这段时间都在写前端的代码，总结一下近期的学习和体悟，作为以后的参考。

一、bootstrap

来自twitter的前端开源框架，调用其提供的API能够免除许多痛苦。经过两天的使用，感觉十分方便，一般的功能都提供。除了CSS样式的提供，js插件提供了许多常用的功能，非常赞。

中文站点地址：http://www.bootcss.com/

二、jquery layer插件

强大的弹窗插件，相对于官方的dialog插件，这个强大许多。API调用十分清楚。

官方地址：http://sentsin.com/jquery/layer/

三、datetimepicker

一个可以选择日期和时间的插件。官方的datepicker提供了日期的选择，而datetimepicker提供到秒（或许能到毫秒）级别的时间选择。API调用十分简洁，使用起来非常方便。

官方网站：http://trentrichardson.com/examples/timepicker/

四、dataTables

必须对这个插件赞一个，功能很强大。这个插件提供对表格的数据库化，支持分页查看。本来之前想用jPaginate来达到相同目的，后来发现这个强大多了。自定义的话稍微麻烦，通过参考官网和别人的代码达到了我的目的。

 /* API method to get paging information */     $.fn.dataTableExt.oApi.fnPagingInfo = function (oSettings) {         return {             "iStart": oSettings._iDisplayStart,             "iEnd": oSettings.fnDisplayEnd(),             "iLength": oSettings._iDisplayLength,             "iTotal": oSettings.fnRecordsTotal(),             "iFilteredTotal": oSettings.fnRecordsDisplay(),             "iPage": Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength),             "iTotalPages": Math.ceil(oSettings.fnRecordsDisplay() / oSettings._iDisplayLength)         };     }      /* Bootstrap style pagination control */     $.extend($.fn.dataTableExt.oPagination, {         "bootstrap": {             "fnInit": function (oSettings, nPaging, fnDraw) {                 var oLang = oSettings.oLanguage.oPaginate;                 var fnClickHandler = function (e) {                     e.preventDefault();                     if (oSettings.oApi._fnPageChange(oSettings, e.data.action)) {                         fnDraw(oSettings);                     }                 };                  $(nPaging).addClass('pagination').append(                     '<ul>' +                     '<li class="prev disabled"><a href="#">&larr; ' + oLang.sPrevious + '</a></li>' +                     '<li class="next disabled"><a href="#">' + oLang.sNext + ' &rarr; </a></li>' +                     '</ul>');                 var els = $('a', nPaging);                 $(els[0]).bind('click.DT', {                     action: "previous"                 }, fnClickHandler);                 $(els[1]).bind('click.DT', {                     action: "next"                 }, fnClickHandler);             },              "fnUpdate": function (oSettings, fnDraw) {                 var iListLength = 5;                 var oPaging = oSettings.oInstance.fnPagingInfo();                 var an = oSettings.aanFeatures.p;                 var i, j, sClass, iStart, iEnd, iHalf = Math.floor(iListLength / 2);                  if (oPaging.iTotalPages < iListLength) {                     iStart = 1;                     iEnd = oPaging.iTotalPages;                 } else if (oPaging.iPage <= iHalf) {                     iStart = 1;                     iEnd = iListLength;                 } else if (oPaging.iPage >= (oPaging.iTotalPages - iHalf)) {                     iStart = oPaging.iTotalPages - iListLength + 1;                     iEnd = oPaging.iTotalPages;                 } else {                     iStart = oPaging.iPage - iHalf + 1;                     iEnd = iStart + iListLength - 1;                 }                  for (i = 0, iLen = an.length; i < iLen; i++) {                     // Remove the middle elements                     $('li:gt(0)', an[i]).filter(':not(:last)').remove();                      // Add the new list items and their event handlers                     for (j = iStart; j <= iEnd; j++) {                         sClass = (j == oPaging.iPage + 1) ? 'class="active"' : '';                         $('<li ' + sClass + '><a href="#">' + j + '</a></li>')                             .insertBefore($('li:last', an[i])[0])                             .bind('click', function (e) {                             e.preventDefault();                             oSettings._iDisplayStart = (parseInt($('a', this).text(), 10) - 1) * oPaging.iLength;                             fnDraw(oSettings);                         });                     }                      // Add / remove disabled classes from the static elements                     if (oPaging.iPage === 0) {                         $('li:first', an[i]).addClass('disabled');                     } else {                         $('li:first', an[i]).removeClass('disabled');                     }                      if (oPaging.iPage === oPaging.iTotalPages - 1 || oPaging.iTotalPages === 0) {                         $('li:last', an[i]).addClass('disabled');                     } else {                         $('li:last', an[i]).removeClass('disabled');                     }                 }             }         }     }); 	 	$('#data_table').dataTable({ 		//"aaSorting": [[ 0, "desc" ]],         "sDom": "<'pull-right'f>rt<'pull-left'i><'pull-right'l><'text-center'p>",         "sPaginationType": "bootstrap",         "oLanguage": {       "sLengthMenu": '每页显示 <select>'+         '<option value="10">10</option>'+         '<option value="20">20</option>'+         '<option value="30">30</option>'+         '<option value="40">40</option>'+         '<option value="50">50</option>'+         '<option value="-1">All</option>'+         '</select>条',         "aoColumnDefs": [{ "sType": "numeric", "aTargets": [0]}],         "sSearch": "过滤:",         "sInfo": "_START_ - _END_  共_TOTAL_条",         "oPaginate": {         "sPrevious": "上一页",         "sNext": "下一页"       },       "sZeroRecords": "没有匹配数据"       }     }); 

官方地址：http://www.datatables.net/
五、ueditor
百度的开源网页可视化编辑器，在之前的项目中使用过，感觉还不错。功能，图标等都可以自定义。
官方网址：http://ueditor.baidu.com/website/
六、其他
这几天使用过的主要是上面几个插件，打算接下来使用的有： validate(表单验证), raty(评分插件)。

原文链接：https://www.qiquanji.com/post/4735.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。