JQuery学习

这星期主要用jquery的两个库函数和自己写的js做了个页面，两个<inpt>框进行任务的内容和截止时间的输入，截止时间的输入运用的是JQuery插件(laydate.js)，下面的参与者的选择运用的是JQuery插件(magicsuggest.js).通过这两个插件的修改来实现时间框的弹出和在下拉框中选择文字在右边水平排布的功能。而这个界面最主要的功能就是将两个<input>框中的内容以及参与者的所有名字放在一个列表中，在下方进行排列，而且能保存在本地文件，不随刷新而改变。

(function() {

var lastdeletedID, lastdeletedTEXT, lastdeletedINDEX, count = 0;

function updateCounter() {
$('.count').text(count);
var deleteButton = $('.clear-all');//选取‘删除所有’按钮样式
if (count === 0) {
deleteButton.attr('disabled', 'disabled').addClass('disabled');//如果没有列表，按钮不可用
} else {
deleteButton.removeAttr('disabled').removeClass('disabled');//如果有列表，可正常使用
}
}
//返回列表的id
function generateId() {
return "reminder-" + +new Date();
}
//保存一个item到本地
var saveReminder = function(id, content) {
localStorage.setItem(id, content);
};
//编辑item
var editReminder = function(id) {
var $this = $('#' + id);
$this.focus() .append($('<button />', { //当点击编辑样式按钮时，改变它样式
"class": "icon-save save-button",
click: function() { //点击按钮时，使输入框不可以编辑

$this.attr('contenteditable', 'false');

var newcontent = $this.text(), //定义编辑完的内容
saved = $('.save-notification');

if (!newcontent) { //点击删除按钮，弹出显示框
var confirmation = confirm('Delete this item?');
if (confirmation) { //改变列表的id
removeReminder(id);
}
} else { //编辑完成，显示编辑的内容
localStorage.setItem(id, newcontent);
saved.show();
setTimeout(function() {
saved.hide();
}, 2000);
$(this).remove();
$('.icon-pencil').show();
}

}

}));
};

//将列表的内容和id从本地移除
var deleteReminder = function(id, content) {
localStorage.removeItem(id);
count--;
updateCounter();
};

//列表移除id变化
var removeReminder = function(id) {
var item = $('#' + id);
lastdeletedID = id;
lastdeletedTEXT = item.text();
lastdeletedINDEX = item.index();
//移除列表的css动画
item.addClass('removed-item')
.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {
$(this).remove();
});

deleteReminder(id);
//增加item当它内容不为空的时候
if (lastdeletedTEXT) {
UndoOption();
}
};
//增加列表内容
var createReminder = function(id, content, index) {
//定义列表样式
var reminder = '<li id="' + id + '">' + content + '</li>',
list = $('.reminders li');
//让截止时间框内容清除
$('#text1').val('')

//增加列表样式
if (!$('#' + id).length) {

if (index && index < list.length) {
var i = index + 1;
reminder = $(reminder).addClass('restored-item');
$('.reminders li:nth-child(' + i + ')').before(reminder);
}
if (index === 0) {
reminder = $(reminder).addClass('restored-item');
$('.reminders').prepend(reminder);
}
if (index === list.length) {
reminder = $(reminder).addClass('restored-item');
$('.reminders').append(reminder);
}
if (index === undefined) {
reminder = $(reminder).addClass('new-item');
$('.reminders').append(reminder);
}

var createdItem = $('#' + id);
//增加删除按钮
createdItem.append($('<button />', {
"class": "icon-trash delete-button",
"contenteditable": "false",
click: function() {
var confirmation = confirm('Delete this item?');
if (confirmation) {
removeReminder(id);
}
}
}));
//增加编辑按钮
createdItem.append($('<button />', {
"class": "icon-pencil edit-button",
"contenteditable": "false",
click: function() {
createdItem.attr('contenteditable', 'true');
editReminder(id);
$(this).hide();
}
}));
createdItem.on('keydown', function(ev) { //定义不能使用enter键
if (ev.keyCode === 13) return false;
});
//保存列表
saveReminder(id, content);
count++;
updateCounter();
}
};
//提交框内容
var handleInput = function() {
$('#input-form').on('submit', function(event) {
var input = $('#text'), //文本框
value = input.val() + ' [' + $('#text1').val() + ']'; //时间框
event.preventDefault();
if (value) {
//value=value+' 参与人：';
value = value + '————';
for (var i = 0; i < $(".ms-sel-item ").length; i++) {
value += $($(".ms-sel-item ")[i]).text() + ',';
}

var text = value.substr(0, value.length - 1);
//alert(text);
var id = generateId();
createReminder(id, text);
input.val('');
$("#ms-sel-ctn-0").html("");
}
});
};
//点击输入框时弹出的本地储存数据
var loadReminders = function() {
if (localStorage.length !== 0) {
for (var key in localStorage) {
var text = localStorage.getItem(key);
if (key.indexOf('reminder') === 0) {
createReminder(key, text);
}
}
}
};
//提交"删除所有"按钮并加上css3动画
var handleDeleteButton = function() {
$('.clear-all').on('click', function() {
if (confirm('Are you sure you want to delete all the items in the list? There is no turning back after that.')) { //remove items from DOM
var items = $('li[id ^= reminder]');
items.addClass('removed-item').one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {
$(this).remove();
});

//寻找已经被删除和保存的在本地的item
var keys = [];
for (var key in localStorage) {
if (key.indexOf('reminder') === 0) {

localStorage.removeItem(key);
}
}
count = 0;
updateCounter();
}
});
};

var init = function() {
$('#text').focus();
loadReminders();
handleDeleteButton();
handleInput();
updateCounter();
};
//加载所有函数
init();

})();