Итак начнем с основ практики использования jQuery библиотеки, а именно создания to-do list или просто всем известной «тудушки» :). Что такое to-do list? Это список определенных запланированных заданий, которые надо выполнить или просто список событий. Реализовывать задачу будем с помощью браузерного хранения LockalStorage, что бы данные не удалялись во время перезагрузки.
Выглядеть «тудушка» будет следующим образом (демо):
ToDoList
Итак, для начала определим форму:
<div id="todo"> <h1>ToDoList</h1> <ul class="js_list"></ul> <input type="text" class="js_add_input"> <button class="js_add_button">Add</button> </div> <script type="text/template" id="todo_item_template"> <button class="js_item_remove_btn" type="button">X</button> <button class="js_item_edit_btn btn_edit" type="button">Edit</button> <button class="js_item_apply_btn btn_apply" type="button" style="display: none;">Apply</button> <input class="js_item_input" type="text" value="{{val}}" style="display: none;"> <span class="js_item_text">{{val}}</span> </script>
Далее основные переменные:
var dom = $('#todo'), add_input = dom.find('.js_add_input'), add_btn = dom.find('.js_add_button'), list = dom.find('.js_list'), list_arr = $.parseJSON(localStorage.getItem('todo') || '[]'); item_template = $('#todo_item_template').text();
и серию методов:
function save() { localStorage.setItem('todo', JSON.stringify(list_arr)) } function buildList() { list.html(''); $(list_arr).each(function(index, text){ var item = makeItem(text); list.append(item); setItemActions(item, index); }) }; function makeItem(value) { var li = $('<li>'); li.html(item_template.replace(/{{val}}/g, value)); return li; } function setItemActions(item, index) { var remove_btn = item.find('.js_item_remove_btn'), edit_btn = item.find('.js_item_edit_btn'), edit_input = item.find('.js_item_input'), item_text = item.find('.js_item_text'); var apply_btn = item.find('.js_item_apply_btn'); remove_btn.on('click', function() { list_arr.splice(index, 1); changeAction(); }); edit_btn.on('click', function() { edit_input.show(); apply_btn.show(); item_text.hide(); edit_btn.hide(); }) apply_btn.on('click', function() { list_arr[index] = edit_input.val(); changeAction(); }) } function changeAction() { buildList(); save(); } add_btn.on('click', function() { var text = add_input.val(); list_arr.push(text); add_input.val(''); changeAction(); }); buildList();
Данная реализация to-do list не самая простая, но до начала ее понимания следует прочитать книгу по основам jQuery.
Скачать реализацию можно по ссылке.