下载
1. slimScroll
- jquery 滚动条插件
- 中文参考
$(selector).slimScroll({
width: '300px', //容器宽度,默认无
height: '500px', //容器高度,默认250px
size: '10px', //滚动条宽度,默认7px
position: 'left', //滚动条位置,可选值:left,right,默认right
color: '#ffcc00', //滚动条颜色,默认#000000
alwaysVisible: true, //是否禁用隐藏滚动条,默认false
distance: '20px', //距离边框距离,位置由position参数决定,默认1px
start: $('#child_image_element'), //滚动条初始位置,可选值top,bottom,$(selector)--内容元素位置,默认top
railVisible: true, //滚动条背景轨迹,默认false
railColor: '#222', //滚动条背景轨迹颜色,默认#333333
railOpacity: 0.3, //滚动条背景轨迹透明度,默认0.2
wheelStep: 10, 滚动条滚动值,默认20
allowPageScroll: false, //滚动条滚动到顶部或底部时是否允许页面滚动,默认false
disableFadeOut: false //是否禁用鼠标在内容处一定时间不动隐藏滚动条,当设置alwaysVisible为true时该参数无效,默认false
});
2. layout
- jquery 布局插件
- 中文参考
$(function(){
var myLayout =$("body").layout(
{
applyDefaultStyles: true,//应用默认样式
scrollToBookmarkOnLoad:false,//页加载时滚动到标签
showOverflowOnHover:false,//鼠标移过显示被隐藏的，只在禁用滚动条时用。
north__closable:false,//可以被关闭
north__resizable:false,//可以改变大小
north__size:50,//pane的大小
spacing_open:8,//边框的间隙
spacing_closed:60,//关闭时边框的间隙
resizerTip:"可调整大小",//鼠标移到边框时，提示语
//resizerCursor:"resize-p" 鼠标移上的指针样式
resizerDragOpacity:0.9,//调整大小边框移动时的透明度
maskIframesOnResize:"#ifa",//在改变大小的时候，标记iframe（未通过测试）
sliderTip:"显示/隐藏侧边栏",//在某个Pane隐藏后，当鼠标移到边框上显示的提示语。
sliderCursor:"pointer",//在某个Pane隐藏后，当鼠标移到边框上时的指针样式。
slideTrigger_open:"dblclick",//在某个Pane隐藏后，鼠标触发其显示的事件。(click", "dblclick", "mouseover)
slideTrigger_close:"click",//在某个Pane隐藏后，鼠标触发其关闭的事件。("click", "mouseout")
togglerTip_open:"关闭",//pane打开时，当鼠标移动到边框上按钮上，显示的提示语
togglerTip_closed:"打开",//pane关闭时，当鼠标移动到边框上按钮上，显示的提示语
togglerLength_open:100,//pane打开时，边框按钮的长度
togglerLength_closed:200,//pane关闭时，边框按钮的长度
hideTogglerOnSlide:true,//在边框上隐藏打开/关闭按钮(测试未通过)
togglerAlign_open:"left",//pane打开时，边框按钮显示的位置
togglerAlign_closed:"right",//pane关闭时，边框按钮显示的位置
togglerContent_open:"<div style='background:red'>AAA</div>",//pane打开时，边框按钮中需要显示的内容可以是符号"<"等。需要加入默认css样式.ui-layout-toggler .content
togglerContent_closed:"<img/>",//pane关闭时，同上。
enableCursorHotkey:true,//启用快捷键CTRL或shift + 上下左右。
customHotkeyModifier:"shift",//自定义快捷键控制键("CTRL", "SHIFT", "CTRL+SHIFT"),不能使用alt
south__customHotkey:"shift+0",//自定义快捷键（测试未通过）
fxName:"drop",//打开关闭的动画效果
fxSpeed:"slow",//动画速度
//fxSettings: { duration: 500, easing: "bounceInOut" }//自定义动画设置(未通过测试)
//initClosed:true,//初始时，所有pane关闭
//initHidden:true //初始时，所有pane隐藏
onresize :ons,//调整大小时调用的函数
onshow_start:start,
onshow_end:end
/*
其他回调函数
显示时调用
onshow = ""
onshow_start = ""
onshow_end = ""
隐藏时调用
onhide = ""
onhide_start = ""
onhide_end = ""
打开时调用
onopen = ""
onopen_start = ""
onopen_end = ""
关闭时调用
onclose = ""
onclose_start = ""
onclose_end = ""
改变大小时调用
onresize = ""
onresize_start = ""
onresize_end = ""
*/
}
);
});
2. iCheck
- 美化单选多选插件
3 侧栏
http://www.htmleaf.com/Demo/201607063694.html
4 固定
jquery.pinBox-可将任何元素固定在容器中的jQuery插件
http://www.htmleaf.com/jQuery/jquery-tools/201602293163.html
5. 表单
基于Bootstrap的Material Design风格表单插件
http://www.htmleaf.com/jQuery/Form/201604153343.html
6. 菜单
http://www.htmleaf.com/Demo/201512142902.html
jQuery和CSS3堆叠卡片样式导航菜单特效
7. 布局
纯JavaScript可调节大小的拆分视图面板插件
http://www.htmleaf.com/jQuery/Layout-Interface/201512072872.html
基于Bootstrap的响应式可伸展的网格布局系统
http://www.htmleaf.com/jQuery/Layout-Interface/201509172583.html
Material Design风格的人物信息介绍卡片设计
http://www.htmleaf.com/Demo/201507312333.html
8. 表情
实用输入域表情符号选择器jQuery插件
http://www.htmleaf.com/jQuery/Form/201508312497.html
9. 选择插件
http://www.jq22.com/jquery-plugins选择框-5-jq
10. listbox
http://www.jqueryscript.net/tags.php?/Dual%20List%20Box/
11. jquery.pinBox-可将任何元素固定在容器中的jQuery插件
http://www.htmleaf.com/Demo/201601143024.html
12 .jquery.raty 评分插件api
cancel : false 左边添加一个取消按钮.
cancelClass : 'raty-cancel' 按钮样式
cancelHint : 'Cancel this rating!' 按钮提示信息
cancelOff : 'cancel-off.png' 图标取消图片
cancelOn : 'cancel-on.png' 图标开启图片
cancelPlace : 'left' 按钮显示位置 right
click : undefined 点击回调事件 function
half : false 是否允许半星
halfShow : true 是否允许半星开启时显示半星
hints : ['bad', 'poor', 'regular', 'good', 'gorgeous'] 每个评级的提示信息
iconRange : undefined 用对象的方式设置评级的图标
mouseout : undefined 移出回调函数
mouseover : undefined 移入回调函数
noRatedMsg : 'Not rated yet!' 当只读开启时,未评级显示的提示信息
number : 5 星星个数 number 或 function
numberMax : 20 星星最大数
path : undefined 配置图标路径 function
precision : false 值的精度 小数
readOnly : false 是否只读 boolean 或 function
round : { down: .25, full: .6, up: .76 } // Included values attributes to do the score round math.
score : undefined 初始值 number 或 function
scoreName : 'score' input 参数名
single : false 只允许选择一个星星
space : true 图标之间显示一些空间
starHalf : 'star-half.png' // The name of the half star image.
starOff : 'star-off.png' // Name of the star image off.
starOn : 'star-on.png' // Name of the star image on.
target : undefined 将元素选择的分数显示出来 显示元素的id
targetFormat: '{score}' 格式化显示的信息
targetKeep : false 显示点击选中的值
targetScore : undefined 分数直接显示在容器
targetText : '' 点击后显示的文本
targetType : 'hint' hint o 'score' 显示值还是text
starType : 'img' // Element used to represent a star.
网友评论