前端框架中的JavaScript

起步

请在html头部引入以下文件，根据具体项目管理路径，对应其书写规范。如使用第三方插件，务必引用在jQuery文件之后

<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.10.1.js"></script>
<script src="js/base.js"></script>

框架路径

下载压缩包的前端框架路径

弹窗

支持链式调用
此插件支持链式调用

不支持弹窗重叠
请不要在一个弹窗弹出时叠加另一个弹窗，如想运行多个弹窗，请关闭当前弹窗，再运行另一个弹窗

弹窗的HTML代码放置的位置
务必将弹窗的 HTML 代码放在文档的最高层级内（也就是说，尽量作为 body 标签的直接子元素）

实例

弹窗按钮

html:

<button>弹窗按钮</button>
<div id="dialogs" class="dialogs-nal">内容2</div>

js:

$('button').click(function(){
    $('#dialogs').plugDialog();
})

用法

只需要一行代码，即可通过选中的元素调用弹窗

$('selector').plugDialog();

参数

名称	类型	默认值	描述
bts	function	{}	调用时，不传此参数，则默认弹窗没有按钮；传参数其中一个值，默认为按钮1；传参数两个值，则分别为按钮1、按钮2 $('#dialogs').plugDialog({     bts:{         '按钮1':function(){             //to do something.....         },         '按钮2':function(){              //to do something.....          }     } });
title	string	title	此参数为弹窗标题
width	number 或者 string	auto	此参数为弹窗宽度大小
shader	boolean	true	此参数为弹窗是否有遮罩层
clickBgHide	string	true	此参数为是否点击遮罩关闭弹窗
btnsOne	string	空	此参数为按钮一名称，可支持传参
btnsTwo	string	空	此参数为按钮二名称，可支持传参
bgColor	string	#459dff,#ffffff	此参数为弹窗标题、按钮背景颜色及字体颜色!以","相隔!颜色获取地址：http://www.atool.org/colorpicker.php
btPosition	string	right	可选参数:left,center,right
count	string	空	此参数可配置弹窗里的内容

方法

包含所有参数的弹窗:

$('#dialogs').plugDialog({
    bts:{
        '按钮1':function(){
            //to do something.....
        },
        '按钮2':function(){
             //to do something.....
         }
    },
    title:'标题',
    width:'700px',
    shader:false,
    bgColor:'#459dff,#ffffff',
});

标签页

支持链式调用
此插件支持链式调用

支持集合元素调用
可选择多个元素一起调用；可以是集合元素

实例

html:

<div id="tab">
    <div class="tabsNav">
        <a href="javascript:void(0);" class="tabActive">Tab1</a>
        <a href="javascript:void(0);">Tab2</a>
        <a href="javascript:void(0);">Tab3</a>
        <a href="javascript:void(0);">Tab4</a>
    </div">
    <div class="tabMain">
        <div class="tabItem" style="display:block;">内容1</div>
        <div class="tabItem">内容2</div>
        <div class="tabItem">内容3</div>
        <div class="tabItem">内容4</div>
    </div>
</div>

js:

$('#tab').plugTabs({
    width:'700px',
    bind:'clicks'
});

用法

只需要一行代码，即可通过选中的元素调用标签页

$('selector').plugTabs();

参数

名称	类型	默认值	描述
bind	string	clicks	可选参数值 clicks 或者 hover
width	number 或者 string	auto	此参数为标签页宽度大小

弹出msg

支持链式调用
此插件支持链式调用

支持集合元素调用
可选择多个元素一起调用；可以是集合元素

实例

右方显示 上方显示

html:

<button id="right">按钮1</button>

js:

$('#right').plugMsg({
    width:'100px',
    position:'right'
});

用法

只需要一行代码，即可通过选中的元素调用弹出msg

$('selector').plugMsg();

参数

名称	类型	默认值	描述
contents	string	请输入要提示的信息！	此参数为提示内容
position	string	right	此参数为提示框出现在选中元素的方位 可选参数:left、right、top、bottom
width	number 或者 string	auto	此参数为msg宽度大小

弹出提示框

支持链式调用
此插件支持链式调用

支持集合元素调用
可选择多个元素一起调用；可以是集合元素

实例

成功 失败

html:

<button id="bt1">成功</button>
<button id="bt2">失败</button>

js:

$('document').plugPrompt({
    contents:'请输入要提示的信息！请输入要提示的信息！',
    type:'success',
    delay:1500
});

用法

只需要一行代码，即可通过选中的元素调用弹出提示框

$('document').plugPrompt();

参数

名称	类型	默认值	描述
contents	string	请输入要提示的信息！	此参数为提示内容
type	string	success	此参数为提示框的类型，可选参数值 success 或者 error
delay	number	2000（单位毫秒）	此参数为提示框延迟消失的时间
callBack	fn	空	时间执行的回调函数

折叠页

支持链式调用
此插件支持链式调用

支持集合元素调用
可选择多个元素一起调用；可以是集合元素

实例

html:

<div id="col">
    <div class="colGroup">
        <a class="colBt avtived" href="javascript:void(0);">按钮col1</a>
        <div class="colText">内容1</div>
    </div>
    <div class="colGroup">
        <a class="colBt" href="javascript:void(0);">按钮col2</a>
        <div class="colText">内容2</div>
    </div>
    <div class="colGroup">
        <a class="colBt" href="javascript:void(0);">按钮col3</a>
        <div class="colText">内容3</div>
    </div>
</div>

js:

$('#col').plugCol({
    width:'700px'
});

用法

只需要一行代码，即可通过选中的元素调用折叠页

$('#col').plugCol();

参数

名称	类型	默认值	描述
width	number 或者 string	auto	此参数为折叠页宽度大小
autoOpen	boolean	false	此参数为是否默认全部内容展开

轮播

支持链式调用
此插件支持链式调用

支持集合元素调用
可选择多个元素一起调用；可以是集合元素

实例

html:

<div id="carousel">
    <ul class="index-img">
        <li>
            <a href="javascript:void(0);"><img src="images/Carousel.gif"></a>
        </li>
        <li>
            <a href="javascript:void(0);"><img src="images/Carousel.gif"></a>
        </li>
    </ul>
</div>

js:

$('#carousel').plugCasel();

用法

只需要一行代码，即可通过选中的元素调用轮播

$('#carousel').plugCasel();

参数

名称	类型	默认值	描述
width	number	700	此参数为轮播页宽度
height	number	300	此参数为轮播页高度
types	boolean	true	此参数为轮播页是否间断
vertical	boolean	false	此参数为轮播页是否上下滚动
nexts	boolean	true	此参数为轮播页有翻页按钮（上一张、下一张）
speed	number	2000（单位毫秒）	此参数为轮播页翻页速度

日历

支持链式调用
此插件支持链式调用

第三方插件
更多详情，请浏览框架文件 /dist 目录中的案列和参数介绍

实例

html:

<input type="text" id="basic_example_1" />

js:

$('#basic_example_1').datetimepicker();

用法

只需要一行代码，即可通过选中的元素调用日历插件

$('#basic_example_1').datetimepicker();

参数

名称	类型	默认值	描述
currentText	string	Now	设置当前的按钮文本
closeText	string	Done	设置关闭的按钮文本
amNames	arry	['AM', 'A']	解析以确定AM字符串数组
pmNames	arry	['PM', 'P']	解析以确定PM字符串数组
timeFormat	string	HH:mm	设置时间格式
timeSuffix	string	''	字符串转化后的时间
timeOnlyTitle	string	Choose Time	日历插件标题
timeText	string	Time	时间选择格式的标签
hourText	string	Hour	识别小时滑块的标签
minuteText	string	Minute	识别分钟滑块的标签
secondText	string	Second	识别秒钟滑块的标签
timezoneText	string	Timezone	识别时区滑块标签
millisecText	string	Millisecond	识别毫秒滑块的标签
isRTL	boolean	false	日历方向

滚动监听

支持链式调用
此插件支持链式调用

支持集合元素调用
可选择多个元素一起调用；可以是集合元素

实例 查看>>

html:

<div roll="RollMonitor">
    <div roll="Top">
        <h3>...</h3>
        <ul>
            <li><a href="javascript:void(0);">..</a></li>
        </ul>
    </div>
    <div roll="Con">
        <h4>...</h4>
        <div>...</div>
    </div>
</div>

js:

$('div[roll="Con"]').plugRollMonitor({
    Bg_c:'背景色值',//高亮背景颜色，比如白色：#FFF
    Te_c:'字体色值'//高亮字体颜色，比如黑色：#000
});

用法

只需要一行代码，即可通过选中的元素调用弹出提示框

$(selector).plugRollMonitor();

参数

名称	类型	默认值	描述
Bg_c	string	#227bb7	此参数为改变高亮背景颜色
Te_c	string	#FFF	此参数为改变高亮字体颜色

加载中

支持链式调用
此插件支持链式调用

支持集合元素调用
可选择多个元素一起调用；可以是集合元素

实例

html:

<div class="ui-loading" loading="load"></div>

js:

$(document).plugLoad({
    url:'图片路径', //比如：images/gif/morph-shape-gif-preloader.gif
    text:'文字', //比如：加载中...
    bgrd:是否遮罩, //是为true，否为false
});

用法

只需要一行代码，即可通过选中的元素调用弹出提示框

$(selector).plugLoad();

参数

名称	类型	默认值	描述
show	string	true	用于是否显示加载...，不需要则值为：false
bgrd	string	true	用于是否用遮罩，不需要则值为：false
closBt	string	true	用于是否需要手动关闭按钮...，不需要则值为：false
url	string	images/gif/morph-shape-gif-preloader.gif	用于改变图片路径
text	string	加载中...	用于改变文本显示

Urls

该插件为通用方法
该插件为通用方法，无需jQuery式调用

实例 查看>>

js:

get_url_para('name')

用法

只需要一行代码，即可获取url中的参数值

get_url_para(key)

参数

名称	类型	默认值	描述
key	string	-	用于获取url指定的参数

flash复制

支持链式调用
此插件支持链式调用

支持集合元素调用
可选择多个元素一起调用；可以是集合元素

实例

html:

<input type="button" value="点击复制" id="copys" class="p-nbt"/>

js:

$('#copys').zclip({
    path:'dist/js/ZeroClipboard.swf',
    copy:function(){return $('#copyText').val();},
    afterCopy:function(){
        alert('复制成功')
    }
});

用法

只需要一行代码，即可通过选中的元素调用复制功能

$(selector).zclip();

参数

名称	类型	默认值	描述
path	string	"ZeroClipboard.swf"	swf文件所在路径
copy	string or function	null	设置用于所复制的内容
afterCopy	string or function	null	指定方法后，所执行的函数 (aftercopy功能将覆盖默认的警告框)
beforeCopy	string or function	null	指定方法前，所执行的函数
clickAfter	boolean	true	true false
setHandCursor	boolean	true	true false
setCSSEffects	boolean	true	true false

自动关闭提示框

支持链式调用
此插件支持链式调用

支持集合元素调用
可选择多个元素一起调用；可以是集合元素

实例 查看>>

html:

不需要添加html

js:

$.plugAutoHide({
    times:5,//倒计时长，默认为5秒
    alerts:'wrong',//提示框颜色，默认为wrong（红色）
    text:'提示信息',提示框内容，默认为提示信息
});

用法

只需要一行代码，即可通过选中的元素调用自动关闭提示框

$.plugAutoHide();

参数

名称	类型	默认值	描述
times	string	5	倒计时（秒）
alerts	string	wrong	用于更换提示框颜色及提示类型，红色（错误）：wrong，蓝色（正确）：correct，黄色（未知）：warn
text	string	提示信息	用于更换提示内容

输入卡号提示

支持链式调用
此插件支持链式调用

支持集合元素调用
可选择多个元素一起调用；可以是集合元素

实例 查看>>

html:

<input type="text" value="" class="ui-inBank"/>

js:

$('.ui-inBank').plugInputBank({
    colors:'Blue',
});

用法

只需要一行代码，即可通过选中的元素调用输入卡号提示

$('#id').plugInputBank();

参数

名称	类型	默认值	描述
colors	string	Blue	更改提示框颜色：Blue（蓝色），Green（绿色），Black（黑色）
sizes	string	normal	可选参数:normal,small,large

placeHolder

支持链式调用
此插件支持链式调用

支持集合元素调用
可选择多个元素一起调用；可以是集合元素

实例

html:

<input type="text" class="placeHolder"/>

js:

$('.placeHolder').placeHolder({
    texts:'姓名',
    types:'inputs'
});

用法

只需要一行代码，即可通过选中的元素调用placeHolder

$(selector).placeHolder();

参数

名称	类型	默认值	描述
texts	string	-	所提示的文字
types	string	focus	执行输入框操作

tree

支持链式调用
此插件支持链式调用

支持集合元素调用
可选择多个元素一起调用；可以是集合元素

实例

html:

<ul id="treeDemo" class="ztree"></ul>

js:

var setting = {
    check: {
        enable: true
    },
    data: {
        simpleData: {
            enable: true
        }
    }
};
var zNodes =[
    { id:1, pId:0, name:"随意勾选 1", open:true},
    { id:11, pId:1, name:"随意勾选 1-1", open:true},
    { id:111, pId:11, name:"随意勾选 1-1-1"},
    { id:112, pId:11, name:"随意勾选 1-1-2"},
    { id:12, pId:1, name:"随意勾选 1-2", open:true},
    { id:121, pId:12, name:"随意勾选 1-2-1"},
    { id:122, pId:12, name:"随意勾选 1-2-2"},
    { id:2, pId:0, name:"随意勾选 2", checked:true, open:true},
    { id:21, pId:2, name:"随意勾选 2-1"},
    { id:22, pId:2, name:"随意勾选 2-2", open:true},
    { id:221, pId:22, name:"随意勾选 2-2-1", checked:true},
    { id:222, pId:22, name:"随意勾选 2-2-2"},
    { id:23, pId:2, name:"随意勾选 2-3"}
];
$(document).ready(function(){
    $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    var zTree = $.fn.zTree.getZTreeObj("treeDemo");
    zTree.setting.check.chkboxType = { "Y" : "ps", "N" : "ps" };
});

用法

只需要一行代码，即可通过选中的元素调用tree

$.fn.zTree.init($("selector"), setting, zNodes);

参数

名称	类型	默认值	描述
-	-	-	请参见文档手册

upload

支持链式调用
此插件支持链式调用

支持集合元素调用
可选择多个元素一起调用；可以是集合元素

实例

html:

<div id="uploader"></div>

js:

$("#uploader").plupload({
    runtimes : 'html5,flash,silverlight,html4',
    url : "/examples/upload.php",
    // Maximum file size
    max_file_size : '2mb',
    chunk_size: '1mb',
    // Resize images on clientside if we can
    resize : {
        width : 200,
        height : 200,
        quality : 90,
        crop: true // crop to exact dimensions
    },
    // Specify what files to browse for
    filters : [
        {title : "Image files", extensions : "jpg,gif,png"},
        {title : "Zip files", extensions : "zip,avi"}
    ],
    // Rename files by clicking on their titles
    rename: true,
    // Sort files
    sortable: true,
    // Enable ability to drag'n'drop files onto the widget (currently only HTML5 supports that)
    dragdrop: true,
    // Views to activate
    views: {
        list: true,
        thumbs: true, // Show thumbs
        active: 'thumbs'
    },
    // Flash settings
    flash_swf_url : '/plupload/js/Moxie.swf',
    // Silverlight settings
    silverlight_xap_url : '/plupload/js/Moxie.xap'
});

用法

只需要一行代码，即可通过选中的元素调用upload

$(selector).plupload();

参数

名称	类型	默认值	描述
colors	string	Blue	更改提示框颜色：Blue（蓝色），Green（绿色），Black（黑色）

图片查看器

支持链式调用
此插件支持链式调用

支持集合元素调用
可选择多个元素一起调用；可以是集合元素

实例

html:

<a href="javascript:void(0);" id="checPic">
    <img src="images/text1.jpg" width="200" height="200" />
</a>

js:

$('#checPic').plugPic()

用法

只需要一行代码，即可通过选中的元素调用图片查看器

$('#id').plugPic();

参数

名称	类型	默认值	描述
types	string	core	可选参数： 1.core(中心旋转拖拽) 2.level(水平拖拽)

数据可视化

支持链式调用
此插件支持链式调用

支持集合元素调用
可选择多个元素一起调用；可以是集合元素

实例

html:

<div id="container"></div>

js:

$('#container').highcharts({
    title: {
        text: 'Monthly Average Temperature',
        x: -20 //center
    },
    subtitle: {
        x: -20
    ,
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    yAxis: {
        title: {
            text: 'Temperature (°C)'
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },
    tooltip: {
        valueSuffix: '°C'
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle',
        borderWidth: 0
    },
    series: [{
        name: 'Tokyo',
        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
    }, {
        name: 'New York',
        data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
    }, {
        name: 'Berlin',
        data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
    }, {
        name: 'London',
        data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
    }]
});

用法

只需要一行代码，即可通过选中的元素调用数据可视化

$('#id').highcharts();

参数

名称	类型	默认值	描述
-	-	-	文档手册

可拖动元素

支持链式调用
此插件支持链式调用

支持集合元素调用
可选择多个元素一起调用；可以是集合元素

实例

点击查看其他实例

html:

无

js:

$('.drag').drag();

用法

只需要一行代码，即可通过选中的元素调用可拖动元素

$('#id').drag();

参数

名称	类型	默认值	描述
oflow	参数	true	默认值为true，另外值false，用于是否可溢出窗外
stion	参数	true	默认值为true，另外值false，用于绝对定位或相对定位
ption	参数	center	默认值为center，另外值topLeft,topRight,bottomLeft,bottomRight，用于元素初始位置

图片延迟加载

支持链式调用
此插件支持链式调用

支持集合元素调用
可选择多个元素一起调用；可以是集合元素

实例

html:

<img src="" imgurl="图片链接地址" />

js:

$('#imgDelay').imgDelay();

用法

只需要一行代码，即可通过选中的元素调用图片延迟加载

$('body').imgDelay();

参数

名称	类型	默认值	描述
-	-	-	-

下拉多选框

支持链式调用
此插件支持链式调用

支持集合元素调用
可选择多个元素一起调用；可以是集合元素

实例

options 1 options 2 options 3 options 4 options 5

html:

<select id="plugSelect">
    <option value="1">options 1</option>
    <option value="2">options 2</option>
    <option value="3">options 3</option>
    <option value="4">options 4</option>
    <option value="5">options 5</option>
</select>

js:

$('#plugSelect').plugSelect();

用法

只需要一行代码，即可通过选中的元素调用下拉多选框

$(selector).plugSelect();

取值

名称	类型	默认值	描述
value	Array	null	$(selector).val()就能取到多选框选中的值
clicks	function	{}	clicks:{   function(){     alert('自定义事件');   }, },

全屏轮播

支持链式调用
此插件支持链式调用

支持集合元素调用
可选择多个元素一起调用；可以是集合元素

实例查看>>

请点击上方‘查看’按钮查看实例

html:

<div id="fullCasel">
    <ul>
        <li style="background: url(../../images/full1.jpg) 50% 0 no-repeat;"></li>
        <li style="background: url(../../images/full2.jpg) 50% 0 no-repeat;"></li>
        <li style="background: url(../../images/full3.jpg) 50% 0 no-repeat;"></li>
        <li style="background: url(../../images/full4.jpg) 50% 0 no-repeat;"></li>
    </ul>
</div>

js:

$('#fullCasel').plugFullCasel({
    heights:'454px'
});

用法

只需要一行代码，即可通过选中的元素调用全屏轮播

$(selector).plugFullCasel();

参数

名称	类型	默认值	描述
heights (必填)	str	auto	轮播图片原尺寸高度(单位px)
speeds	number	2000	轮播切换的速度(单位ms)

回到顶部

支持链式调用
此插件支持链式调用

支持集合元素调用
可选择多个元素一起调用；可以是集合元素

实例

本页面的右下角的回到顶部就是通过此插件调用

js:

$.plugTop()

用法

只需要一行代码，即可通过选中的元素调用回到顶部

$.plugTop();

参数

名称	类型	默认值	描述
width	number	50	此参数为宽度
height	number	50	此参数为高度
url	str	images/goTop.png	此参数为图标地址

自动补全

支持链式调用
此插件支持链式调用

支持集合元素调用
可选择多个元素一起调用；可以是集合元素

实例

html:

<input id="autoComplete" type="text" />

js:

$('#autoComplete').AutoComplete({
    'data': ['One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine', 'Ten', 'Eleven', 'Twelve']
});

用法

只需要一行代码，即可通过选中的元素调用自动补全

$(selector).AutoComplete();

参数

名称	类型	默认值	描述
width	str	320px	当列表宽度不足以容纳下列表项的内容时，列表项的文本以折行的方式显示。可以通过设定足够大的列表宽度，避免折行的发生
maxHeight	number	null	限制列表的高度不能大于某个值。当列表实际长度大于限制值时，显示纵向滚动轴。(单位ms)
itemHeight	number	null	列表项的高度。
listStyle	str	'normal'	'normal': 普通文本样式。 'iconList': 左边是图标右边是文本的样式。 'custom': 自定义样式。须配合createItemHandler参数一起使用。
listDirection	str	'down'	'down': 列表会显示在输入框的下方。 'up': 列表会显示在输入框的上方。
data	array,fn,url	[]	输入框中每次发生按件抬起事件(除某些被忽略的按键，如上下左右键)时，AutoComplete都会从数据源中搜寻符合匹配规则的数据作为列表的项
ajaxParams	obj,fn,str	{'keyword': value}	作为jQuery.ajax函数中的data参数。
ajaxTimeout	number	3000	作为jQuery.ajax函数中的timeout参数。
ajaxType	str	'GET'	作为jQuery.ajax函数中的type参数。
maxItems	number	20	列表的最大项数。
matchHandler	fn	-	通过此回调函数，可以实现自定义的匹配规则。在匹配的过程中，数据源中的每一个数据项都会触发一次此回调函数。
emphasisHandler	fn	-	通过此函数，可以实现自定义的匹配内容渲染。每个匹配成功的数据项都会触发一次此回调函数。
createItemHandler	fn	-	当listStyle参数设置为'custom'时，AutoComplete会调用此回调函数获取列表项的内容。
beforeLoadDataHandler	fn	-	在每次输入之后装载数据之前的回调函数。
afterSelectedHandler	fn	-	在列表项被选择之后的回调函数。
async	布尔值	false	是否异步。
emphasis	布尔值	true	是否渲染匹配文本。
onerror	fn	-	遇到错误时的回调函数

图片上传带裁剪功能

支持链式调用
此插件支持链式调用

支持集合元素调用
可选择多个元素一起调用；可以是集合元素

实例

html:

<div class="container">
    <div class="imageBox">
        <div class="thumbBox"></div>
        <div class="spinner" style="display: none">Loading...</div>
    </div>
    <div class="action">
        <!-- <input type="file" id="file" style=" width: 200px">-->
        <div class="new-contentarea"> <a href="javascript:void(0)" class="upload-img">
            <label for="upload-file">添加图片</label>
            </a>
            <input type="file" class="" name="upload-file" id="upload-file" />
        </div>
        <input type="button" id="btnUp" class="Btnsty_peyton" value="上传">
        <input type="button" id="btnCrop" class="Btnsty_peyton" value="裁切">
        <select id="selId" class="Btnsty_peyton">
<option value="no">选择图片</option>
<option value="all">全部</option>
<option value="1">小</option>
<option value="2">中</option>
<option value="3">大</option>
        </select>
        <input type="button" id="btnZoomIn" class="Btnsty_peyton" value="+" >
        <input type="button" id="btnZoomOut" class="Btnsty_peyton" value="-" >
        <div class="cropped"></div>
    </div>
</div>

js:

$(window).load(function() {
    var options =
    {
        thumbBox: '.thumbBox',
        spinner: '.spinner',
        imgSrc: 'images/avatar.png'
    }
    var cropper = $('.imageBox').cropbox(options);
    $('#upload-file').on('change', function(){
        var reader = new FileReader();
        reader.onload = function(e) {
            options.imgSrc = e.target.result;
            cropper = $('.imageBox').cropbox(options);
        }
        reader.readAsDataURL(this.files[0]);
        this.files = [];
    })
    $('#btnCrop').on('click', function(){
        var html = $('.cropped').html();
        var img = cropper.getDataURL();
            $('.cropped').html('');
            $('.cropped').append('<img id="cropBoxOne" src="'+img+'" align="absmiddle" style="width:64px;margin-top:4px;border:1px solid #CCC;" ><p>64px*64px</p>');
            $('.cropped').append('<img id="cropBoxTwo" src="'+img+'" align="absmiddle" style="width:128px;margin-top:4px;border:1px solid #CCC;"><p>128px*128px</p>');
            $('.cropped').append('<img id="cropBoxThr" src="'+img+'" align="absmiddle" style="width:180px;margin-top:4px;border:1px solid #CCC;"><p>180px*180px</p>');
    })
    $('#btnZoomIn').on('click', function(){
        cropper.zoomIn();
    })
    $('#btnZoomOut').on('click', function(){
        cropper.zoomOut();
    })
    $('#btnUp').on('click',function(){
        var html = $('.cropped').html();
        if(html != ''){
            var img = cropper.getDataURL();
            var imgUrlOne = $('#cropBoxOne').attr('src');
            var imgUrlTwo = $('#cropBoxTwo').attr('src');
            var imgUrlThr = $('#cropBoxThr').attr('src');
            var id = $('#selId').val();
            if(id=='no'){
                alert('请选择图片')
            }else if(id=='all'){
                alert('第一张图片值'+imgUrlOne+'\r\n第二张图片值'+imgUrlTwo+'\r\n第三张图片值'+imgUrlThr);
            }else if(id==1){
                alert('第一张图片值'+imgUrlOne);
            }else if(id==2){
                alert('第二张图片值'+imgUrlTwo);
            }else if(id==3){
                alert('第三张图片值'+imgUrlThr);
            };
        }else{
            alert('请添加图片并裁剪');
        };
    });
});

用法

只需调用相应的html及js即可

参数

名称	类型	默认值	描述
thumbBox	str	.thumbBox	图片显示元素名称
spinner	str	.spinner	网速较慢时加载特效元素名称
imgSrc	str	images/avatar.png	初始图片
以上参数更改时，html元素名称也需同步更改，请尽量不要更改！此第三方插件不支持IE 9以下版本

表格行、列自由拖动排版

支持链式调用
此插件支持链式调用

支持集合元素调用
可选择多个元素一起调用；可以是集合元素

实例

thead1	thead2	thead3	thead4	thead5
tbody11	tbody21	tbody31	tbody41	tbody51
tbody12	tbody22	tbody32	tbody42	tbody52
tbody13	tbody23	tbody33	tbody43	tbody53
tbody11	tbody21	tbody31	tbody41	tbody51
tbody12	tbody22	tbody32	tbody42	tbody52
tbody13	tbody23	tbody33	tbody43	tbody53

用法

只需在table标签加free="yes"属性即可，拖动表头等于表格列自由排版，拖动表格内容第一

<table free="yes"></table>

跟随鼠标同步进出

支持链式调用
此插件支持链式调用

支持集合元素调用
可选择多个元素一起调用；可以是集合元素

实例

html:

<div class="folSon">
    <span>自定义内容一</span>
    <img src="images/ThuBna_1.jpg" />
</div>
可自定义html

js:

$('.folSon span').MouseSynchr({
    BgColor:'black',//背景颜色，默认值：black
    FontColor:'white',//文字颜色，默认值：white
    opacity:0.7,//透明度，默认值：0.7 值区间0-1
    speed:300,//移动速度，默认值：300 值区间0以上
});

用法

只需要一行代码，即可通过选中的元素调用让元素跟随鼠标同步进出效果

$(selector).MouseSynchr();

参数

名称	类型	默认值	描述
BgColor	str	black	用于跟随鼠标同步进出元素背景颜色，有效值：颜色英文（如：黑色 - black），色值（如：黑色 - #000000）
FontColor	str	white	用于跟随鼠标同步进出元素内容颜色，有效值：颜色英文（如：白色 - white），色值（如：白色 - #FFFFFF）
opacity	str	0.7	用于跟随鼠标同步进出元素背景透明度，有效值：>= 0 , <=1
speed	str	speed	用于跟随鼠标同步进出元素移动速度，有效值：>= 0

编辑器

支持链式调用
此插件支持链式调用

支持集合元素调用
可选择多个元素一起调用；可以是集合元素

实例

系统技术部-前端框架

html:

<textarea name="content" style="width:800px;height:400px;visibility:hidden;">系统技术部-前端框架</textarea>

js:

KindEditor.ready(function(K){
    var editor;
    editor = K.create('textarea[name="content"]', {
        allowFileManager : true
    });
});

用法

只需要几行代码，即可通过选中的元素调用编辑器

KindEditor.ready(function(K){
    K.create('textarea[name="content"]', {
        allowFileManager : true
    });
});

参数

名称	类型	默认值	描述
-	-	-	http://kindeditor.net/doc.php

打印

支持链式调用
此插件支持链式调用

支持集合元素调用
可选择多个元素一起调用；可以是集合元素

实例

打印以下表格

打印	打印	打印	打印
打印	打印	打印	打印
打印	打印	打印	打印
打印	打印	打印	打印

html:

<div class="printHtml dialogs-nal">
     //打印内容
</div>

js:

$('.printHtml').Prints();

用法

只需要几行代码，即可通过选中的元素调用打印

$('selector').Prints();

参数

名称	类型	默认值	描述
width	number	800px	打印预览的宽度

元素定位

支持链式调用
此插件支持链式调用

支持集合元素调用
可选择多个元素一起调用；可以是集合元素

实例更多>>

html:

<div class="tbody"><div class="element1"></div></div>

js:

$('.element1').eleFloat({
    scls:false,
    parent:true,
});

用法

只需要几行代码，即可通过选中的元素调用打印

$('.eleSel1').eleFloat({});

参数

名称	类型	默认值	描述
position	str	左上	指定元素定位于四个角，即：左上、左下、右上、右下
custom	str	空	自定义元素定位位置，如：0,5,100,0(元素位于距离右侧5px,底部100px,)
index	number	9999	自定义元素位于其他元素的上下层级
scls	str	true	是否随滚动条滚动，其他值：false
parent	str	false	是否根据上级定位，其他值：true

元素下拉菜单

支持链式调用
此插件支持链式调用

支持集合元素调用
可选择多个元素一起调用；可以是集合元素

实例更多>>

html:

<div class="eleSel1">元素下拉（下）</div>

js:

$('.eleSel1').eleSelect({
    position:'下',
});

用法

只需要几行代码，即可通过选中的元素调用打印

$('.element1').eleSelect();

参数

名称	类型	默认值	描述
width	number	150	自定义元素宽度
position	str	下	指定元素下拉菜单定位于四个位置，即：上、下、左、右
texts	str	'下拉一,下拉二,下拉三'	自定义下拉菜单文本及个数，以","号相隔
links	str	',,'	自定义下拉菜单链接及个数，如果无链接请为空，但要以","相隔

搜索下拉菜单

支持链式调用
此插件支持链式调用

支持集合元素调用
可选择多个元素一起调用；可以是集合元素

实例更多>>

html:

<input type="text" id="seaSel1" />

js:

$('#seaSel1').searchSelect({});

用法

只需要几行代码，即可通过选中的元素调用打印

$('#seaSel1').searchSelect({});

参数

名称	类型	默认值	描述
texts	str	热门搜索词一,热门搜索词二,热门搜索词三	自定义热搜词文本
links	str	,,	自定义热搜词链接

确认框

支持链式调用
此插件支持链式调用

支持集合元素调用
可选择多个元素一起调用；可以是集合元素

实例

确认框按钮

html:

<div class="confirm" id="confirmWin"></div>

js:

$('#confirmWin').confirms({});

用法

只需要几行代码，即可通过选中的元素调用打印

$('#confirmWin').confirms({});

参数

名称	类型	默认值	描述
width	number	200	自定义确认框宽度
content	str	确认框内容	自定义确认框内容
background	str	true	是否需要遮罩,其他值：false
clickBgClose	str	true	是否点击背景关闭,其他值：false
bts	function	{}	调用时，不传此参数，则默认弹窗没有按钮；传参数其中一个值，默认为按钮1；传参数两个值，则分别为按钮1、按钮2 $('#confirmWin').confirms({     bts:{         '按钮1':function(){             //to do something.....         },     } });

表单验证

支持链式调用
此插件支持链式调用

支持集合元素调用
可选择多个元素一起调用；可以是集合元素

实例

html:

<form onsubmit="return CheckForm(this)">
    <input type="text" warning="信息不能为空" check="Require" />
    <input type="submit" value="验证">
</form>

用法

只需要几行代码，即可通过选中的元素调用打印

<form onsubmit="return CheckForm(this)">

参数

名称	类型	默认值	描述
check	str	''	自定义正则匹配模式
warning	str	''	自定义提示内容

复选框全选

支持链式调用
此插件支持链式调用

支持集合元素调用
可选择多个元素一起调用；可以是集合元素

实例查看>>

html:

红色字体部分为自定义属性且必填
结构一[上级同级的下级]：
<div>
  <div dataType="parent">
    <label dataType="checkbox1"><input type="checkbox">全选</label>
  </div>
  <div dataType="siblings">
    <label><input type="checkbox">checkbox1</label>
    <label><input type="checkbox">checkbox2</label>
    <label><input type="checkbox">checkbox3</label>
  </div>
</div>
结构二[同级]：
<div>
  <div>
    <label datatype="checkbox2"><input type="checkbox">全选</label>
    <label><input type="checkbox">checkbox1</label>
    <label><input type="checkbox">checkbox2</label>
    <label><input type="checkbox">checkbox3</label>
  </div>
</div>
结构三[表格]：
<table>
  <thead>
    <tr>
      <td><label datatype="table"><input type="checkbox">全选</label></td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><label><input type="checkbox">checkbox1</label></td>
    </tr>
    <tr>
      <td><label><input type="checkbox">checkbox1</label></td>
    </tr>
    <tr>
      <td><label><input type="checkbox">checkbox1</label></td>
    </tr>
  </tbody>
</table>

用法

只需要几行代码，即可通过选中的元素调用打印

$('[dataType="checkbox1"]').allCheckbox({});

参数

名称	类型	默认值	描述
types	str	parSib	自定义类型: parSib-->上级的同级的子级 siblings-->同级 table-->表格
customName	str	dataType="parent",dataType="siblings"	自定义属性： dataType="parent" 为全选按钮上级属性 dataType="siblings" 为全选按钮上级属性的同级属性

伪装滚动条

支持链式调用
此插件支持链式调用

支持集合元素调用
可选择多个元素一起调用；可以是集合元素

实例查看>>

html:

<div class="scroMain">
  <div class="scroCont" dataType="scroll">
    内容
  </div>
</div>

用法

只需要几行代码，即可通过选中的元素调用打印

$('[dataType="scroll"]').scrolls({});

参数

名称	类型	默认值	描述
rollSize	number	100	自定义滚动大小
scrollBg	str	#666666,#000000	自定义滚动条背景及滚动条颜色 前者：#666666为背景颜色 后者：#000000为滚动条颜色

拉动调整表格列宽

支持链式调用
此插件支持链式调用

支持集合元素调用
可选择多个元素一起调用；可以是集合元素

实例查看>>

html:

<table class="blue" table="adjWidth">
  <thead>
    <tr>
      <td>adjWidth1</td>
      <td uid="Adj1" style="width: 124px;">adjWidth12</td>
      <td uid="Adj2" style="width: 158px;">adjWidth123</td>
      <td uid="Adj3">adjWidth1234</td>
      <td uid="Adj4">adjWidth12345</td>
      <td uid="Adj5">adjWidth123456</td>
      <td uid="Adj6">adjWidth1234567</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>adjWidth1</td>
      <td>adjWidth12</td>
      <td>adjWidth123</td>
      <td>adjWidth1234</td>
      <td>adjWidth12345</td>
      <td>adjWidth123456</td>
      <td>adjWidth1234567</td>
    </tr>
  </tbody>
</table>

用法

只需要几行代码，即可通过选中的元素调用调整表格列宽

只需在table元素上添加自定义 table="adjWidth" 属性，
如：<table table="adjWidth"></table>

参数

名称	类型	默认值	描述
table="adjWidth"	str		自定义属性

拉动调整相邻元素高度

支持链式调用
此插件支持链式调用

支持集合元素调用
可选择多个元素一起调用；可以是集合元素

实例查看>>

html:

<div class="downUpTop" dataType="downUpMove">downUpTop</div>
<div class="downUpBtm">downUpBtm</div>

用法

只需要几行代码，即可通过选中的元素调用调整相邻元素高度

$('[dataType="downUpMove"]').downUpMove({});

无参数

拉动调整文本值

支持链式调用
此插件支持链式调用

支持集合元素调用
可选择多个元素一起调用；可以是集合元素

实例查看>>

html:

<div uid="pageDuA" style="width:300px;"></div>

用法

只需要几行代码，即可通过选中的元素调用拉动调整文本值

$('[uid="pageDuA"]').pageDu({});

参数

名称	类型	默认值	描述
width	number	100%	自定义宽度
number	number	100	自定义最大值

自定义鼠标右键

支持链式调用
此插件支持链式调用

支持集合元素调用
可选择多个元素一起调用；可以是集合元素

实例查看>>

html:

<div id="rightKey">右键一</div>

用法

只需要几行代码，即可通过选中的元素调用自定义鼠标右键

function custom(){
    alert('自定义事件');
}
rightClick($('#rightKey'),custom)

参数

名称	类型	默认值	描述
custom	function		自定义事件,custom函数名及事件都可自定义
rightClick	function		函数调用(参数一,参数二) 参数一：对象 参数二：自定义事件名称