jquery的ui插件，ajax学习和使用

最近的一个星期学习了jquery UI的插件，动手做了个例子，使用的是jquery UI基本的样式，可以去官网下载其他的样式和颜色。有需要的可以在我的github下载：https://github.com/harrietjia/harriet_front_end.git
整体效果：



button：$('.btn').button({
icons : {
primary : 'ui-icon-search',
// secondary : 'ui-icon-triangle-1-s' 字后面
},
}).click(function(){
if($('.search').val()){
$(location).attr('href', 'question.html');
}
});



tab:$('#tabs').tabs({
collapsible : true,});


问题由ajax 返回的数据组成：



折叠UI$('#accordion').accordion({
collapsible : true,
heightStyle : 'content',
header : 'h3',
icons: {
"header": "ui-icon-plus",
"activeHeader": "ui-icon-minus",
},
});


注册表单：form.js，具有提示输入tooltip和日历datepicker还有错误提示validate.js，邮箱用了自动补全autocomplete$('#reg').dialog({
// title : '会员注册',
autoOpen : false,
modal : true,
resizable : false,
width : 320,
height : 340,
buttons : {
'提交' :function(){
$(this).submit();
},
'取消' :function(){
$(this).dialog('close');
}
},
closeText : '关闭',
})


cookie：if($.cookie('user')){
$.cookieFun();
}else{
$('#member,#logout').hide();
$('#reg_a,#login_a').show();
}





根据ajax post的titleid返回的评论数据：



自动补全功能，返回的由ajax取出数据库中数据:
从用户输入的第一的字符开始传给php文件，然后再从数据库中
js部分如下：$.ajax({
url : 'show_test.php',
type : 'POST',
data : {
titleid : '15',
},
success : function(response,status,xhr){
var json = $.parseJSON(response);
var html = '';
var arr =[];
var summary = [];
$.each(json, function(index,value){
html += '<div class="main_left_bottom"><span id="ques_comment">'+value.count+'条评论 </span><span >感谢</span><span >收藏</span></div><hr noshade="noshade" size="1" /><div class="comment_list"></div>';
});
$('.main_left_content').append(html);

$.each($('.main_left_bottom'),functio
4000
n(index,value){
$(this).on('click','#ques_comment',function(){
var comment_this =this;
if($.cookie('user')){
if(!$('.comment_list').eq(index).has('form').length){

$.ajax({
url : 'show_comment.php',
type : 'POST',
data : {
titleid : '15',
},

success : function(response,status){
var count = 0;
var json_comment = $.parseJSON(response);

$.each(json_comment, function (index2, value) {
count =value.count;
$('.comment_list').eq(index).append('<dl class="comment_content"><dt>' + value.user + '</dt><dd>' + value.comment + '</dd><dd class="date">' + value.date + '</dd></dl>');
});

$('.comment_list').eq(index).append('<dl><dd><span class="load_more">加载更多评论</span></dd></dl>');
var page = 2;

if (page > count) {
$('.comment_list').eq(index).find('.load_more').off('click');
$('.comment_list').eq(index).find('.load_more').hide();
}

$('.comment_list').eq(index).find('.load_more').button().on('click', function () {
$('.comment_list').eq(index).find('.load_more').button('disable');

$.ajax({
url : 'show_comment.php',
type : 'POST',
data : {
titleid : '15',
page : page,
},

beforeSend : function (jqXHR, settings) {
$('.load_more').html('<img src="img/more_load.gif" />');
},

success : function (response, status) {
var json_comment_more = $.parseJSON(response);

$.each(json_comment_more, function (index3, value) {

$('.comment_list').eq(index).find('.comment_content').last().after('<dl class="comment_content"><dt>' + value.user + '</dt><dd>' + value.comment + '</dd><dd class="date">' + value.date + '</dd></dl>');
});

$('.load_more').html('加载更多评论');

$('.comment_list').eq(index).find('.load_more').button('enable');
page++;

if (page > count) {
$('.comment_list').eq(index).find('.load_more').off('click');
$('.comment_list').eq(index).find('.load_more').hide();
}
},
});
});

$('.comment_list').eq(index).append('<form><dl class="comment_add"><dt><textarea name="comment"></textarea></dt><dd><input type="hidden" name="titleid" value="'+$(comment_this).attr('data_id')+'" /><input type="hidden" name="user" value="'+$.cookie('user')+'" /><input type="button" value="发表" /></dd></dl></form>');

$('.comment_list').eq(index).find('input[type=button]').button().click(function(){
var _this =this;
$('.comment_list').eq(index).find('form').ajaxSubmit({
url : 'add_comment.php',
type : 'POST',
beforeSubmit : function(){
$('#loading').dialog('open');
$(_this).button('disable');
},

success : function(responseText,statusText){
if(responseText){
$(_this).button('enable');
$('#loading').css('background','url(img/success.gif) no-repeat 20px center').html('数据新增成功');
setTimeout(function(){
$('#loading').dialog('close');

//提交评论，自动显示
var date = new Date();
$('.comment_list').eq(index).prepend('<dl class="comment_content"><dt>' + $.cookie('user') + '</dt><dd>' + $('.comment_list').eq(index).find('textarea').val() + '</dd><dd>' + date.getFullYear() + '-' + (date.getMonth()+ 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' +
date.getMinutes() + ':' + date.getSeconds() + '</dd></dl>');

$('#loading').css('background','url(img/loading.gif) no-repeat 20px center').html('数据交互中。。');
$('.comment_list').eq(index).find('form').resetForm();
},1000);
}
},
});
});

},
});
}
if ($('.comment_list').eq(index).is(':hidden')) {
$('.comment_list').eq(index).show();
} else {
$('.comment_list').eq(index).hide();
}
}else{
$('#error').dialog('open');
setTimeout(function(){
$('#error').dialog('close');
$('#login').dialog('open');
},1000) ;
}
});
});

},
});



最后再增加一个小知识点：each方法就相当于js中的for循环，返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。map将一组元素转换成其他数组（不论是否是元素数组），你可以用这个函数来通过新规则（如过滤掉数字）来建立一个新列表，不论是值、属性还是CSS样式，或者其他特别形式。这都可以用'$.map()'来方便的建立