常用组件使用范例

1. 以下组件基于 bootstrap 3.3.6版(按需)，Jquery 1.11.x 或 2.x以上版本；其它版本存在兼容问题；
2. 新项目尤其是需要适配移动端，Jquery请使用 1.11.x 或 2.x以上版本；低版本存在兼容问题，并注意live、off等已经被删除的方法； 以及对元素自有属性（disable、checked等）合理使用prop,代替attr方法；
3. 未明确标注引用Bootstrap包（JS、CSS）的非BS组件，不受BS约束；

@梁磊
@update:2016-10-20

部分示例代码来源网络，未做校验，如有问题请及时指出
新版手册：http://lianglei.net.cn/demo-ui/platform-help/htmldemo/

数据表格Datatable

Datatable组件可实现表格分页、排序、搜索、行列冻结等功能；常用jquery UI版本；bootstrap版本是基于该版本之上的；

官网地址：https://datatables.net/ 中文社区：http://datatables.club/

常用组件包

包间存在依赖关系，顺序不可变；根据功能需要选用组件包

基础包（必须）

dataTables.bootstrap.css
jquery.dataTables.min.js
dataTables.bootstrap.min.js

列冻结状态包（可选）

fixedColumns.bootstrap.min.css
dataTables.fixedColumns.min.js

行、列选中状态包（可选）

select.bootstrap.min.css
dataTables.select.min.js

常用配置

<style>
    table .spanwhite-space {
        display: inline-block;
        width: 100%;
        text-overflow: ellipsis;
        -moz-text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
</style>
var table = $('#example1').DataTable( {
        scrollY:        "300px",//可选，是否固定表格高度，不包括表头；
        scrollX:        true,//可选是否显示水平滚动条；默认false;
        scrollCollapse: true,//与scrollY结合使用，是否固定高度，默认false;
        paging:         true,//是否显示分页组件
        pageLength:20,//每页显示条数；paging=false 时该值为 -1
        lengthChange:false, //是否允许用户改变表格每页显示的记录数，显示条数组件
        ordering : false,//是否启用排序组件，优先级高于columns中的排序控制；
        searching: false,//是否启用自带搜索组件；             
        info: true, //是否显示数据条数信息
        language : {url:"js/plugins/datatables/zh_cn.js"},//自定义提示语言
        //destroy: true, //销毁一个已经存在的Datatables，然后创建一个新的 
	columns: [//可选，必须定义全部列属性；data 对应数据接口字段名称
		/* {
		    "data": null,
		    "className": "text-center hhhdd",
		    "width": "30px",
		    render: function (data, type, row, meta) {
		        // 显示行号（页码*size+curPageDataindex）
		        // var startIndex = meta.settings._iDisplayStart;
		        // return startIndex + meta.row + 1;
		        return 1+meta.row; //当前页序号
		    }
		}, */
		//data为null,不对应任何数据字段，并通过defaultContent自定义单元格内容，带数据的自定义参照render
		//{ "data": null, "defaultContent": '<input type="checkbox" name="checkbox1">' },
		//模拟checkbox
		//{ "data": null, "className":'select-checkbox', "defaultContent": ''},
		//带数据的
		{ "data": "DT_RowId", 
			"render": function(data, type, row, meta){ //data:当前字段DT_RowId；row:当前整行数据
				/* 将数据绑定在table元素上，不建议使用此方式，
				 * 建议统一使用 tr:dataAPI进行数据绑定，详见下方 ajax-dataSrc
				 */
				//return '<button class="btn btn-success btn-xs" type="button" data-itemtext = "'+row.name1+'" data-itemid = "'+data+'">选择</button>';
				return '<button class="btn btn-success btn-xs" type="button">选择</button>';
			}
		},
		/* 限制宽度并溢出。。。应用样式 .spanwhite-space
		{"data": "last_name","width":"30px", render: function (data, type, row, meta){
				return ''+data+'';
			}
		},
		 */
		{ "data": "first_name"},
		{ "data": "last_name" },
		{ "data": "position","className":"text-right" },
		{ "data": "office","className":"text-center" },
		{ "data": "start_date" },
		{ "data": "salary" },
		{ "data": "node1" },
		{ "data": "node2" },
		{ "data": "node3" }
    	],
        /*columnDefs: [{//可选，使用规则同columns，用来单独定义某几个列属性
            orderable: false,//是否可排序
            className: 'select-checkbox',//显示模拟复选框
            targets:   0  //将配置应用于某列，下标从0开始；
        }],*/
        /*fixedColumns:{//可选，锁定左侧、右侧各两列，需引用列冻结包
            leftColumns: 2,
            rightColumns: 2
        },*/               
        //initComplete:function(settings, json ){resizeIframeHeight();},//组件及数据初始化完成 （iframe 框架用到）
        //drawCallback: function(settings){resizeIframeHeight();},//视图渲染完成，每次破坏性操作均出发该事件（iframe 框架用到）
        processing: true,//显示加载中，serverSide=true时生效
        serverSide: true,//服务器模式，排序、搜索、分页均在服务器端实现，默认浏览器模式
        select:{style:'mutil', info: false},//是否启用选中状态，需引入选中组件包，style:'mutil'为多选，默认单选'os'
        ajax: {
		    "url": "demotabledata.js",//接口地址
		    "dataSrc": function (dd) {
		    /* 重构接口返回的数据结构，将需要交互的数据（pkeyid）以自定义键值对的形式存到‘DT_RowData’中，
		     * 获取数据时使用$('tr').data('itemid')方式；
		     */
		    	var D_ = dd.data;
			    for ( var i=0, ien=D_.length ; i<ien ; i++ ) {
			        D_[i]['DT_RowData'] = {
			        	'itemid':D_[i]['DT_RowId'],
			        	'itemtext':D_[i]['last_name']
			        };
			    }
			    return D_;
		    },
		    "data": function(d){
		    //自定义方法，仅限CRM框架中使用，重构发送到服务器端的参数结构；searchParemOBj_对象类型，为附加请求参数，不可使用保留字pageSize、start、draw;
		    	return cus_dt_ajaxdata(d,searchParemOBj_); 
		    }
		}
    });
						

常用方法

API::function获取选中行数据

/* 获取选中行的数据(多选) */
//table 为当前页面作用域内初始化后的dt对象实例；selected类必须引入select包
//数据组成建议使用数据，利用join拼接，避免使用substring
var ids=[];
table.rows('.selected').nodes().to$().each(function(){
	ids.push($(this).data('itemid'));
});
return ids.join(',');

/* 重新加载数据 */
table.ajax.reload(); //重新请求当前接口地址
table.ajax.url( 'newData.json' ).load(); //更改接口地址并请求
table.page(index).draw(false);  //跳转到第（index+1）页，index从0 开始

/* 应用当前数据重绘表格 */
table.draw();

/* 全选、全不选 */
table.rows().select();
table.rows().deselect();

/* 事件监听 */
// 真实checkbox联动事件，模拟的不需要
table.on('select.dt', function ( e, dt, type, indexes ){
    if ( type === 'row' ) {
        var t_ = table.rows(indexes).nodes().to$(); //获取当前行，并转化为jQuery对象
        t_.find('input[type="checkbox"]').prop('checked',true);
    }
}).on('deselect.dt', function ( e, dt, type, indexes ){
    if ( type === 'row' ) {
        var t_ = table.rows(indexes).nodes().to$();
        t_.find('input[type="checkbox"]').prop('checked',false);
    }
});


/* API实例可以通过以下方式创建： */
    $( selector ).DataTable();
    $( selector ).dataTable().api();
    new $.fn.dataTable.Api( selector );
上面三种方式均可返回一个api实例，注意区别 $( selector ).DataTable() 和 $( selector ).dataTable() 前者直接返回API实例，后者返回的是jQuery实例（如果是这个方式初始化Datatables，那么返回的对象不能使用api方法，不然会报方法未定义）
可以互转 ，jquery转api：dt.api();api转jquery：dt.to$(); 

var table = $('#myTable').DataTable();
OR：
var table = $('#myTable').dataTable().api();
OR：
var table = new $.fn.dataTable.Api( '#myTable' );

var data = table.rows().data()[0];
							

DEMO

1. 锁定列：jquery-UI
2. 锁定列：BS-UI
3. 选中行
4. 选中行checkbox(模拟)
5. 锁队列：左右列同时固定
6. 固定列宽度

表单验证Validate

Validate组件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。

官网地址：https://jqueryvalidation.org/
中文教程：http://www.runoob.com/jquery/jquery-plugin-validate.html

组件包

jquery.validate.min.js

常用配置

修改全局配置信息：

$.validator.setDefaults({
    //debug:true, 测试时使用，阻止表单默认提交
    //onsubmit:true,//默认 true，指定是否提交时验证。
    //errorElement:"em",//默认 "label"。指定使用什么标签标记错误
    //errorClass:"cusvaldateerror",//默认 "error"。指定错误提示的 css 类名
    //onkeyup:false, //默认 true，指定是否在敲击键盘时验证。
    //ignore:".nocheck", // 对某些元素不进行验证。默认 :hidden; 不验证的元素还包括:submit, :reset, :image, :disabled
    success:function(a,e){console.log(e);
    	//要验证的元素通过验证后的动作
    },
    errorPlacement:function(error,element){
    	//跟一个函数，可以自定义错误放到哪里
    	//error.appendTo(element.parent());
    }
});

							

初始化配置：

var validator = $("#signupForm").validate({option});
//Option 同上面的 setDefaults::option;
						

常用方法

API::function重置表单：validator.resetForm();

API::function验证 form 返回成功还是失败（Boolean）：validator.form (); 或 $('#signupForm').valid();

API::function验证单个元素是成功还是失败（Boolean）：validator.element('.select'); 默认对hidden无效（参照ignore 属性），建议对必须的hidden元素进行自行验证，并提示error

Option::submitHandler：通过验证后运行的函数，里面要加上表单提交的函数，否则表单：不会提交。

$(".selector").validate({
	submitHandler:function(form) {
		$(form).ajaxSubmit();//ajax提交表单或 form.submit();
	}
});
						

默认验证规则

序号	规则	描述
1	required:true	必须输入的字段。
2	remote:"check.php"	使用 ajax 方法调用 check.php 验证输入值。
3	email:true	必须输入正确格式的电子邮件。
4	url:true	必须输入正确格式的网址。
5	date:true	必须输入正确格式的日期。日期校验 ie6 出错，慎用。
6	dateISO:true	必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不验证有效性。
7	number:true	必须输入合法的数字（负数，小数）。
8	digits:true	必须输入整数。
9	creditcard:	必须输入合法的信用卡号。
10	equalTo:"#field"	输入值必须和 #field 相同。
11	accept:	输入拥有合法后缀名的字符串（上传文件的后缀）。
12	maxlength:5	输入长度最多是 5 的字符串（汉字算一个字符）。
13	minlength:10	输入长度最小是 10 的字符串（汉字算一个字符）。
14	rangelength:[5,10]	输入长度必须介于 5 和 10 之间的字符串（汉字算一个字符）。
15	range:[5,10]	输入值必须介于 5 和 10 之间。
16	max:5	输入值不能大于 5。
17	min:10	输入值不能小于 10。

使用方法： (必需, 最小两个字母)：

 <input name="name" type="text" minlength="2" required> 

自定义验证规则

$("#signupForm").validate({
    rules: {
      firstname: "required",
      password: {
        required: true,
        minlength: 5
      },
      confirm_password: {
        required: true,
        minlength: 5,
        equalTo: "#password"
      },
      email: {
        required: true,
        email: true,
        remote: "ajaxUrl" //使用远程异步验证
      }
    },
    messages: {
      firstname: "请输入您的名字",
      password: {
        required: "请输入密码",
        minlength: "密码长度不能小于 5 个字母"
      },
      confirm_password: {
        required: "请输入密码",
        minlength: "密码长度不能小于 5 个字母",
        equalTo: "两次密码输入不一致"
      },
      email: {
      	email："请输入一个正确的邮箱",
      	remote ： "服务器验证失败"
      }
    }
});

/* 异步验证 */
//使用 ajax 方式进行验证，默认会提交当前验证的值到远程地址，如果需要提交其他的值，可以使用 data 选项。
PS:远程地址只能输出 "true" 或 "false"，不能有其他输出。
remote: "check-email.php"

remote: {
    url: "check-email.php",     //后台处理程序
    type: "post",               //数据发送方式
    dataType: "json",           //接受数据格式   
    // async : false,		//同步请求，默认true（建议使用 true，并结合使用submitHandler回调方法提交表单）
    /* PS：如使用validator.form() && form.submit()方式验证提交表单，请改成同步 */
    data: {                     //要传递的数据
        username: function() {
            return $("#username").val();
        }
    }
}

/* 
 * addMethod(name,method,message)方法
 * 参数 name 是添加的方法的名字。
 * 参数 method 是一个函数，接收三个参数 (value,element,param) 。
 * value 是元素的值，element 是元素本身，param 是参数
  */
 //实例1：
jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {
    var length = value.length;
    for(var i = 0; i < value.length; i++){
        if(value.charCodeAt(i) > 127){
            length++;
        }
    }
  return this.optional(element) || ( length >= param[0] && length <= param[1] );   
}, $.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)"));

 //实例2：只能输一个字母，范围是 a-f，
$.validator.addMethod("af",function(value,element,params){  
	if(value.length>1){
		return false;
	}
    if(value>=params[0] && value<=params[1]){
		return true;
	}else{
		return false;
	}
},"必须是一个字母,且a-f");

 //实例3： 邮政编码验证   
jQuery.validator.addMethod("isZipCode", function(value, element) {   
    var tel = /^[0-9]{6}$/;
    return this.optional(element) || (tel.test(value));
}, "请正确填写您的邮政编码");


 //实例4： 新规则要求值必须与第一个参数相同
  $.validator.methods.equal = function(value, element, param) {
    return value == param;
  };

/*  使用方法： */
rules: {
	name1: {
		required:true,
		"isZipCode":true
	},
	name2: "isZipCode",
	name3: {
          equal: 11 
        }
}
					

PS:

1. required: true 值是必须的。
2. required: "#aa:checked" 表达式的值为真，则需要验证。
3. required: function(){} 返回为真，表示需要验证。

后边两种常用于，表单中需要同时填或不填的元素。

弹窗(模态框)

bootStrap-模态框

PS:

1. 不支持模态框重叠: 千万不要在一个模态框上重叠另一个模态框。要想同时支持多个模态框，需要自己写额外的代码来实现。
2. 务必将模态框的 HTML 代码放在文档的最高层级内（也就是说，尽量作为 body 标签的直接子元素），以避免其他组件影响模态框的展现和/或功能。

API:http://v3.bootcss.com/javascript/#modals

layer-模态框

包含常用的prompt层、提示层【layer.msg('玩命提示中');】、tips、modal

官网：http://layer.layui.com/

PS:

1. 支持模态框重叠
2. 支持跨iframe

代码实例（效果详见CRM-demo）：

/*
打开弹窗
@param tit 弹窗名称
@param url frame地址
@param partOBJ 窗口对象 parent || top || window(self)
@param opt = {}配置属性
*/
var cum_Modalindex_ = 0; //记录弹窗索引
var cum_ModalValobj = null; //记录弹窗透传数据对象
function cumCurWinModal(tit,url,partOBJ,opt){
	var partOBJ_ = partOBJ || window;
	var param ={
		"area":['90%', '80%'], /* ['90%', '80%'] or ['500px', '300px'] */
		"scrollbar":false, /* 是否屏蔽滚动条  true:屏蔽滚动条 */
		"ismax":false, /* 是否显示最大化按钮 */
		"callid":'' /* 回调元素ID */
	}
	if(typeof opt !== "undefined"){$.extend(param, opt);}
	partOBJ_.layer.open({
		type: 2
		,title: tit
		,area: param['area']
		,content: url
		,scrollbar: (param['scrollbar'] && !partOBJ_.$('html').attr('layer-full'))?false:true
		,maxmin: param['ismax']
		,zIndex:  partOBJ_.layer.zIndex
		,success: function(layero,ind_){
		 	partOBJ_.layer.setTop(layero);
		 	var index = partOBJ_.layer.getFrameIndex(window.name);
		 	console.log(index+"$$$"+ind_);
			if(index){
				var iWin_ = partOBJ_[layero.find('iframe')[0]['name']]; //返回目标window对象,window.fun()
    			iWin_.cum_Modalindex_ = index;
    			if(param['callid']){
    				iWin_.cum_ModalValobj = param['callid'];
    			}
			}
		}
	});
}

/*
在iframe父窗口中打开弹窗
@param tit 弹窗名称
@param url frame地址
@param opt => @function :: cumCurWinModal
*/

function cumParentWinModal(tit,url,opt){
	if(typeof opt !== "undefined"){$.extend(opt,{"ismax":true});}
	cumCurWinModal(tit,url,parent,opt);
}

//使用方法：
// cumParentWinModal('标题','pageUrl',{"scrollbar":true,"area":["800px","460px"]}); 
//在父窗口中打开弹窗并显示最大化按钮、隐藏浏览器滚动条
					

colorBox

老牌弹窗组件，简单易用，但不支持多个重叠；http://www.jacklmoore.com/colorbox/

// Examples:
// Image links displayed as a group
$('a.gallery').colorbox({rel:'gal'});

// Ajax
$('a#login').colorbox();

// Called directly, without assignment to an element:
$.colorbox({href:"thankyou.html"});

// Called directly with HTML
$.colorbox({html:"<h1>Welcome</h1>"});

// Colorbox can accept a function in place of a static value:
$("a.gallery").colorbox({rel: 'gal', title: function(){
  var url = $(this).attr('href');
  return '<a href="' + url + '" target="_blank">Open In New Window</a>';
}});	
					

自定义滚动条

slimScroll

网址：https://github.com/rochal/jQuery-slimScroll

组件包

jquery.slimscroll.min.js

简单实例

$(selector).slimScroll();
					

配置实例

$(function() {
    $(".slimscroll").slimScroll({
        width: 'auto', //可滚动区域宽度
        height: '100%', //可滚动区域高度
        size: '10px', //组件宽度
        color: '#000', //滚动条颜色
        position: 'right', //组件位置：left/right
        distance: '0px', //组件与侧边之间的距离
        start: 'top', //默认滚动位置：top/bottom
        opacity: .4, //滚动条透明度
        alwaysVisible: true, //是否 始终显示组件
        disableFadeOut: false, //是否 鼠标经过可滚动区域时显示组件，离开时隐藏组件
        railVisible: true, //是否 显示轨道
        railColor: '#333', //轨道颜色
        railOpacity: .2, //轨道透明度
        railDraggable: true, //是否 滚动条可拖动
        railClass: 'slimScrollRail', //轨道div类名 
        barClass: 'slimScrollBar', //滚动条div类名
        wrapperClass: 'slimScrollDiv', //外包div类名
        allowPageScroll: true, //是否 使用滚轮到达顶端/底端时，滚动窗口
        wheelStep: 20, //滚轮滚动量
        touchScrollStep: 200, //滚动量当用户使用手势
        borderRadius: '7px', //滚动条圆角
        railBorderRadius: '7px' //轨道圆角
    });
});
					

事件实例

$(selector).slimScroll().bind('slimscroll', function(e, pos){
     console.log("Reached " + pos");
 });						
					

custom-content-scroller(推荐)

网址：http://manos.malihu.gr/jquery-custom-content-scroller/

组件包

<link rel="stylesheet" href="jquery.mCustomScrollbar.css" />
<script src="jquery.mCustomScrollbar.concat.min.js"></script>
					

实例

<div class="mCustomScrollbar" data-mcs-theme="dark">
  <!-- your content -->
</div>

 $(".content").mCustomScrollbar();
 //Basic configuration & option parameters
 $(".content").mCustomScrollbar({
    axis:"x" // horizontal scrollbar
});

$(".content").mCustomScrollbar({
    theme:"dark"
});
					

推荐的第三方插件

SuperSlide

“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”

官网：http://www.superslide2.com/

layer

包含常用的prompt层、提示层【layer.msg('玩命提示中');】、tips、modal

官网：http://layer.layui.com/

全屏滚动插件

1. jQuery全屏滚动插件fullPage.js

网址：http://www.dowebok.com/77.html
下载地址：https://github.com/alvarotrigo/fullPage.js
PS: scrollOverflow 设置为 true，且引入 jquery.slimscroll.min.js，可支持本页内内容溢出添加滚动条；

2. swiper

网址：http://www.swiper.com.cn/
PC: 2.x ; APP: 3.x

日历控件

bootstrap-datetimepicker

官网：http://www.bootcss.com/p/bootstrap-datetimepicker/

bootstrap-datepicker(没有时间) 官网：http://bootstrap-datepicker.readthedocs.io/en/latest/

daterangepicker 官网：http://www.daterangepicker.com/

jedate（API少，不建议使用）

1、解压后，将jedate整个文件放至您项目的任意目录
2、控件不支持选周
3、 此为PC日期控件，非手机日期控件
浏览器兼容，下面是我们的主要兼容目标 1、Internet Explorer >= 8 (Windows), IE8以下浏览器不兼容
2、Safari (Mac)
3、Chrome (Windows, Mac, iOS, Linux)
4、Firefox (Windows, Mac, Linux)
5、谷歌内核(webkit)浏览器，如360浏览器，搜狗浏览器，QQ浏览器等 

官网：http://www.jayui.com/jedate/

常用jQuery对象方法

PS: 仅限原生HTML-input元素，组件请使用对应API

单选按钮组

<input type="radio" name="testradio" value="" />

$('input[name="testradio"]:checked').val();
//选中:
$('input[name="testradio"]').eq(0).prop('checked',true); //根据下标
$('input[name="testradio"][value="111"]').prop('checked',true); //根据value值

复选按钮组

<input type="checkbox" name="testcheckbox" value="" />

var ids_ =[];
$('input[name="testcheckbox"]:checked').each(function(){
	var t_= $(this);
	ids_.push(t_.val());
});
return ids_.join(','); //用，号分割；
//选中:
$('input[name="testcheckbox"]').eq(0).prop('checked',true); //根据下标
$('input[name="testcheckbox"][value="111"]').prop('checked',true); //根据value值

下拉列表

<select id="testSelect"><option value="">text</option></select>

$('#testSelect').val(); //获取当前选中项的value
$("#testSelect").find("option:selected").text(); // 获取当前选中项的text

$(".selector1").change(function(){ //select的级联
     // 先清空第二个
      $(".selector2").empty();
     // 实际的应用中，这里的option一般都是用循环生成多个了
      var option = $("<option>").val(1).text("pxx");
      $(".selector2").append(option);
});
//选中:
$('#testSelect').val('111'); //设置value为111的项选中

form序列化

PS:序列表表格内容为字符串，用于 Ajax 请求。

<form>
  <select name="single">
    <option>Single</option>
    <option>Single2</option>
  </select>
  <select name="multiple" multiple="multiple">
    <option selected="selected">Multiple</option>
    <option>Multiple2</option>
    <option selected="selected">Multiple3</option>
  </select><br/>
  <input type="checkbox" name="check" value="check1"/> check1
  <input type="checkbox" name="check" value="check2" checked="checked"/> check2
  <input type="radio" name="radio" value="radio1" checked="checked"/> radio1
  <input type="radio" name="radio" value="radio2"/> radio2
</form>

 $("form").serialize();  //输出a=1&b=2&c=3&d=4&e=5
 
 $("form").serializeArray(); //输出：
[ 
  {name: 'firstname', value: 'Hello'}, 
  {name: 'lastname', value: 'World'},
  {name: 'alias'}, // 值为空
]

iframe 操作

获取子页面 window
window['iframeName']
$('#iframeId')[0].contentWindow
window.frames["iframeName"]

获取子页面 DOM
$(window.frames["iframeName"].document).find('#id')
$('#iframeId').contents().find('#id');

子操作父类 DOM
parent.$('#id').val()
$('#id', parent.document).val()

子操作父类 function
parent.yourfun(); //yourfun() 在父页面定义

富文本编辑器

CKEditor

老牌富文本编辑器，前身是FCKEditor
网址：http://ckeditor.com/demo#standard

<script type="text/javascript" src="ckeditor/ckeditor.js"></script>

<textarea rows="30" cols="50" name="editor01">请输入.</textarea>
<script type="text/javascript">CKEDITOR.replace('editor01');</script>
						

点击查看自定义Toolbar Configuration

ueditor

百度旗下产品，微信公众号管理后台使用的就是这个

网址：http://ueditor.baidu.com/website/umeditor.html

文件上传

WebUploader

1. 多途径添加文件:

支持文件多选，类型过滤，拖拽(文件&文件夹)，图片粘贴功能。
粘贴功能主要体现在当有图片数据在剪切板中时（截屏工具如QQ(Ctrl + ALT + A), 网页中右击图片点击复制），Ctrl + V便可添加此图片文件。

2. 预览、压缩:

支持常用图片格式jpg,jpeg,gif,bmp,png预览与压缩，节省网络数据传输。

网址：http://fex.baidu.com/webuploader/getting-started.html

<!--引入CSS-->
<link rel="stylesheet" type="text/css" href="webuploader文件夹/webuploader.css">
<!--引入JS-->
<script type="text/javascript" src="webuploader文件夹/webuploader.js"></script>

<!--html：-->
<div id="uploader" class="wu-example">
    <!--用来存放文件信息-->
    <div id="thelist" class="uploader-list"></div>
    <div class="btns">
        <div id="picker">选择文件</div>
        <button id="ctlBtn" class="btn btn-default">开始上传</button>
    </div>
</div>

<!--初始化Web Uploader-->
var uploader = WebUploader.create({

    // swf文件路径
    swf: BASE_URL + '/js/Uploader.swf',

    // 文件接收服务端。
    server: 'http://webuploader.duapp.com/server/fileupload.php',

    // 选择文件的按钮。可选。
    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
    pick: '#picker',

    // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
    resize: false,
    // 只允许选择图片文件。
    accept: {
        title: 'Images', //文字描述
        extensions: 'gif,jpg,jpeg,bmp,png', //允许的文件后缀，不带点，多个用逗号分割。
        mimeTypes: 'image/*' //多个用逗号分割。
    }
});

<!--显示用户选择-->
// 当有文件被添加进队列的时候
uploader.on( 'fileQueued', function( file ) {
    $list.append( '<div id="' + file.id + '" class="item">' +
        '<h4 class="info">' + file.name + '</h4>' +
        '<p class="state">等待上传...</p>' +
    '</div>' );
});

<!--文件上传进度-->
// 文件上传过程中创建进度条实时显示。
uploader.on( 'uploadProgress', function( file, percentage ) {
    var $li = $( '#'+file.id ),
        $percent = $li.find('.progress .progress-bar');

    // 避免重复创建
    if ( !$percent.length ) {
        $percent = $('<div class="progress progress-striped active">' +
          '<div class="progress-bar" role="progressbar" style="width: 0%">' +
          '</div>' +
        '</div>').appendTo( $li ).find('.progress-bar');
    }

    $li.find('p.state').text('上传中');

    $percent.css( 'width', percentage * 100 + '%' );
});

<!--文件成功、失败处理-->
uploader.on( 'uploadSuccess', function( file ) {
    $( '#'+file.id ).find('p.state').text('已上传');
});

uploader.on( 'uploadError', function( file ) {
    $( '#'+file.id ).find('p.state').text('上传出错');
});

uploader.on( 'uploadComplete', function( file ) {
    $( '#'+file.id ).find('.progress').fadeOut();
});



						

更多API : http://fex.baidu.com/webuploader/doc/index.html#WebUploader_Uploader_options

JStree

官网：https://www.jstree.com/
浏览器兼容：Chrome 14+, Firefox 3.5+, Opera 12+, Safari 4+, IE8+
demo:demo-tree.html

基本方法

<script src="js/plugins/jsTree/jstree.min.js"></script>
//初始化
$('#jstree1').jstree({
    'core' : {
        'check_callback' : true
    },
    'plugins' : ['types'],
    'types' : { //样式图标，可选
        'default' : {
            'icon' : 'fa fa-folder'
        },
        'html' : {
            'icon' : 'fa fa-file-code-o'
        },
        'svg' : {
            'icon' : 'fa fa-file-picture-o'
        },
        'css' : {
            'icon' : 'fa fa-file-code-o'
        },
        'img' : {
            'icon' : 'fa fa-file-image-o'
        },
        'js' : {
            'icon' : 'fa fa-file-text-o'
        }
    }
}).on("changed.jstree", function (e, data) {//事件监听
	if(data && data.selected && data.selected.length) {
		var h = [];
		h.push('id:',data.selected,'<br/>');//选中的节点id
		h.push('OR-id:',data.node.id,'<br/>');//通过选择的节点node对象获取 Id及text
		h.push('node-text:',data.node.text);
		console.log(data.node.data['jstree']['type']);
		layer.alert(h.join(''));
  	}
});

function demo_create() {//创建节点
	var ref = $('#jstree1').jstree(true), //获取tree对象
		sel = ref.get_selected(); //获取选中的节点ID；get_selected(true),获取选中的节点对象，返回OBJ（id,text...）
	if(!sel.length) { return false; }
	sel = sel[0];
	sel = ref.create_node(sel, {"type":"html"});
	if(sel) {
		ref.edit(sel);
	}
};
function demo_rename() {//重命名节点
	var ref = $('#jstree1').jstree(true),
		sel = ref.get_selected();
	if(!sel.length) { return false; }
	sel = sel[0];
	ref.edit(sel);
};
function demo_delete() {//删除节点
	var ref = $('#jstree1').jstree(true),
		sel = ref.get_selected();
	if(!sel.length) { return false; }
	ref.delete_node(sel);
};
					

数据结构

// AJAX
$('#tree').jstree({
    'core' : {
        'data' : {
            'url' : '/get/children/',
            'data' : function (node) {
                return { 'id' : node.id };
            }
        }
    });
### ps 
[
{ "text" : "ajax-Child 1","icon":"fa fa-file-text-o","children" : true}, 
{ "text" : "state-Child 2","icon":"fa fa-file-text-o", "children" : ["One more"] }
]

//静态 data #1：
$('#using_json').jstree({
    'core' : {
        'data' : [
            {
                'id' : 'node_2',
                'text' : 'Root node with options',
                'state' : { 'opened' : true, 'selected' : true },
                'children' : [ { 'text' : 'Child 1' }, 'Child 2']
            }
        ]
    }
});

###  PS：
{
  id          : "string" // will be autogenerated if omitted
  text        : "string" // node text
  icon        : "string" // string for custom
  state       : {
    opened    : boolean  // is the node open
    disabled  : boolean  // is the node disabled
    selected  : boolean  // is the node selected
  },
  children    : []  // array of strings or objects
  li_attr     : {}  // attributes for the generated LI node
  a_attr      : {}  // attributes for the generated A node
}


//静态 data #2：list child=> parent
$('#using_json_2').jstree({ 'core' : {
    'data' : [
       { "id" : "ajson1", "parent" : "#", "text" : "Simple root node" },
       { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" },
       { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" },
       { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" },
    ]
} });

###  PS：
{
  id          : "string" // required
  parent      : "string" // required
  text        : "string" // node text
  icon        : "string" // string for custom
  state       : {
    opened    : boolean  // is the node open
    disabled  : boolean  // is the node disabled
    selected  : boolean  // is the node selected
  },
  li_attr     : {}  // attributes for the generated LI node
  a_attr      : {}  // attributes for the generated A node
}
					

icheck(自定义单、复选框)

参考网址：http://www.bootcss.com/p/icheck/

1. 支持触摸设备 — iOS、Android、BlackBerry、Windows Phone
2. 支持键盘导航 — Tab、Spacebar、Arrow up/down 和其它快捷键
3. 方便定制 — 用HTML 和 CSS 即可为其设置样式 (试试 6 套针对Retina屏幕的皮肤吧)
4. 支持 jQuery 和 Zepto JavaScript工具库
5. 25 种参数 用来定制复选框（checkbox）和单选按钮（radio button）
6. 8 个回调事件 用来监听输入框的状态
7. 7 个方法 用来通过编程方式控制输入框的状态
8. 能够将输入框的状态变化同步回原始输入框中， 支持所有选择器

PS: 结合bootstrap使用，需留意input:margin-left: -20px;的影响， 可对input.radio 反向应用 parent.ele.checkbox[checked-inline]

初始化

// 应用于所有input (只应用于 checkboxes and radio buttons)
$('input').iCheck();

// 应用于 class=block 内部的所有 checkboxes and radio 
$('.block input').iCheck();

// 应用于 class=vote 内部的所有 checkboxes and radio 
$('.vote').iCheck();

方法

$('input').iCheck('check'); — 将输入框的状态设置为checked

$('input').iCheck('uncheck'); — 移除 checked 状态

$('input').iCheck('toggle'); — toggle checked state

$('input').iCheck('disable'); — 将输入框的状态设置为 disabled

$('input').iCheck('enable'); — 移除 disabled 状态

$('input').iCheck('update'); — apply input changes, which were done outside the plugin

$('input').iCheck('destroy'); — 移除iCheck样式

回调事件

事件名称	使用时机
ifClicked	用户点击了自定义的输入框或与其相关联的label
ifChanged	输入框的 checked 或 disabled 状态改变了
ifChecked	输入框的状态变为 checked
ifUnchecked	checked 状态被移除
ifDisabled	输入框状态变为 disabled
ifEnabled	disabled 状态被移除
ifCreated	输入框被应用了iCheck样式
ifDestroyed	iCheck样式被移除

实例

/* 全选  演示地址： http://www.cctvplus.com/news/latest.shtml */

$('#Locations_data_box input[type="checkbox"]').on('ifChecked ifUnchecked',function(e_){
	var inp_data_all_ = $('#Locations_data_box input[type="checkbox"][class="data_all"]');
	var inp_data_items_ = $('#Locations_data_box input[type="checkbox"][class="data_item"]');	
	if($(this).hasClass('data_all')){//点击全选					
		if(e_.type == 'ifChecked'){
			inp_data_items_.prop('checked','checked');
		}else{
			inp_data_items_.removeProp('checked');
		}
		inp_data_items_.iCheck('update').iCheck('enable');
	}
	var che_1=[];
	$('#Locations_data_box input[type="checkbox"][class="data_item"]:checked').each(function(){
		che_1.push($(this).val());															   
	});
	if(che_1.length>0){
		seach_check_LL['LOCATIONS_'] = che_1.join(',');
		search_fun_LL(1);
		if(che_1.length == inp_data_items_.length){
			inp_data_all_.prop('checked','checked').iCheck('update').iCheck('enable'); //注意顺序
		}else{
			inp_data_all_.removeProp('checked').iCheck('update').iCheck('enable');
		}
	}else{
		seach_check_LL['LOCATIONS_'] ='';
		//inp_data_all_.removeProp('checked').iCheck('update');
		//cusmot_alert_fun('Please select at least one Locations');
	}
});


/* 自定义数据状态修改、初始化  演示地址： http://www.cctvplus.com/news/latest.shtml */
if(seach_check_LL['LOCATIONS_']){
	var g_3 = seach_check_LL['LOCATIONS_'].split(',');
	$('#Locations_data_box input[type="checkbox"][class="data_item"]').each(function(){
		if(jQuery.inArray($(this).val(), g_3)!==-1){
			$(this).prop('checked','checked');
		}else{
			$(this).removeProp('checked');
		}
		$(this).iCheck('update');
	});
	if($('#Locations_data_box input[type="checkbox"][class="data_item"]').not(':checked').length==0){
		$('#Locations_data_box input[type="checkbox"][class="data_all"]').prop('checked','checked').iCheck('update');
	}
}

模拟ajax请求jquery-mockjax

参考地址：https://github.com/jakerella/jquery-mockjax

$.mockjax({
  url: "/restful/fortune",
  responseText: {
    status: "success",
    fortune: "Are you a mock turtle?"
  }
});
	
$.getJSON("/restful/fortune", function(response) {
  if ( response.status == "success") {
    $("#fortune").html( "Your fortune is: " + response.fortune );
  } else {
    $("#fortune").html( "Things do not look good, no fortune was told" );
  }
});

分步骤引导说明——Intro.js

参考地址：http://introjs.com/

分步骤引导说明——bootstrap-tour

参考地址：http://bootstraptour.com/

分步骤显示组件——jquery.steps

参考地址：http://www.jquery-steps.com/