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

一、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

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