web前端开发中常用的工具

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

一、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(评分插件)。