1 minute to quickly create a beautiful H5 local notepad, 1 minute h5 notepad

1 minute to quickly create a beautiful H5 local notepad, 1 minute h5 notepad

Hello everyone, I have previously shared with you an article on 5-step exquisite HTML5 clock production. Click to review "5-step tutorial on creating beautiful and exquisite HTML Clock". another example is "one minute to show you how to achieve beautiful text strokes". I will share with you todayH5 + localStorageA local notepad application is developed. Let's take a look at his exquisite looks.

The main functions are:

• Enter the title verification function. The title cannot be blank.
• Available category: default/life/food/code
• Displayed immediately after successful addition
• You can search for titles and categories.
• You can click the title to expand and collapse the notes.
• The first data entry is displayed, and the other data entries are collapsed.

1. initialize data

Var init = {title: 'This is the title ',
Date: new Date (). toLocaleString (),
Type: 'example ',
Cont: 'This is a note application. You do not need to connect to the Internet or databases. You can store data locally for ease of use! ^_^ '};

When the user opens the application for the first time, the user is prompted.

2. encapsulation of display data
 

Function show (notes) {var temp = ('{temp'}.html (); var tempStr = ''; // if not an array, convert it to an array if (! Array. isArray (notes) {notes = [notes];} for (var I = notes. length-1; I>-1; I --) {var note = notes [I]; tempStr + = temp. replace ('@ title', note. title ). replace ('@ date', note. date ). replace ('@ type', note. type ). replace ('@ cont', note. cont) ;}('{notelist'}.html (tempStr );}

　　

The data to be displayed is imported externally, and data is spliced and rendered internally.

3. read offline data from local storage

// Read all data function showList () {var notes = localStorage. getItem ('note'); if (! Notes) {show (init);} else {notes = JSON. parse (notes); show (notes) ;}// the first extension $ ('# noteList. item: first '). find ('. title '). trigger ('click ');}

　　

 

4,Query data

$ ('# Search '). click (function () {var title = $ ('# title1 '). val (); var type = $ ('# type1 '). val (); var notes = localStorage. getItem ('note'); if (! Notes) {alert ('no local note data! '); Return;} else {notes = JSON. parse (notes);} var note = []; for (var I = 0; I <notes. length; I ++) {// notes [I] json object var flag = false; if (! Title) {flag = notes [I]. type = type;} else if (! Type) {flag = notes [I]. title. indexOf (title)>-1;} else {flag = notes [I]. title. indexOf (title)>-1 & notes [I]. type = type;} if (flag) {note. push (notes [I]) ;}} if (note. length = 0) {alert ('Sorry ~ No corresponding notes! ') ;}Else {show (note );}});

　　

 

5, Use event Delegate to define collapse and expand operations

$('body').on('click','#noteList .title', function(){    $(this).next().slideToggle();});

　　

 

6, Initialize display data

ShowList ();
 

Well, a beautiful HTML5 local notepad is born. Will it be done? Welcome to follow the html5 related technical articles of Shanghai shangxue.

This article is original at the front-end of Shanghai shangxuexiang. For more information, see the source of the original article.