layer.js 弹窗插件
layer.open({
//层的类型 0:信息框(默认),1:页面层,2:iframe层,3:加载层,4:tips层。
type: 1,
time: 0,//自动关闭等待秒数,整数值;0表示不自动关闭
area: ['70%', '30%'],//控制层宽高
maxmin: false, //是否输出窗口最小化/全屏/还原按钮
title: '弹出框',// title: ['标题', 'background:#c00;']
shade: 0.6,//遮罩透明度
shadeClose:true,//点击遮罩关闭层
moveType: 1,//拖拽风格,0是默认,1是传统拖动
shift: 1,//0-6的动画形式,-1不开启
fix:true,//不随滚动条滚动,一直在可视区域
border:[0],//控制层的边框
closeBtn:[1,true],
btn:['确定','取消'],
content: '<div style="padding:10px;">页面层</div>'
});
其他属性
dialog: {
type: 3,
msg: ''
}
信息框层模式提供的私有参数。使用时,按需配置即可
type: 图标类型,提供了0-16的选择,也许有你喜欢的。 设置-1不显示图标
msg: 信息框内容,重要参数
page: {
dom: '#id',
html: '',
url: '',
ok: function(datas){}
}
页面层模式私有参数。
dom: 页面已存在的选择器
html: 直接传入的html字符串。
url: ajax请求地址。
ok: ajax请求完毕后执行的回调,datas是异步传递过来的值。
需要特别注意的是,dom、html、url只需设定其中一个就行,若配置html或url,你必须也配置宽高值。
iframe: {
src: '',
scrolling: 'auto'
}
iframe层模式私有参数。
src: 要打开的网址。
scrolling: 是否允许iframe出现滚动条,默认自动。允许:'yes',不允许:'no'
loading: {
type: 0
}
加载层私有属性。
type: loading图标类型(提供了0-3的选择)。 一般配合ajax使用
tips : {
msg: '',
follow: '#id',
guide: 0,
isGuide: true,
more: false,
style: ['', '']
}
tips提示层私有属性。
msg: 提示内容。
follow: 吸附目标选择器。
guide: 指引方向(0:上,1:右,2:下,3:左)。
isGuide: 是否显示默认三角形。 这个参数可配合msg帮助你自定义三角形icon
more: 是否允许多个tips
style: [' color:#000; border:1px solid #FF9900; /* 此处可用来自定义tips的css样式 */', '#FF9900']]。 数组第二个值,为三角形的颜色。
回调函数
success: function(layero){}
层弹出成功后的回调函数.
layero是回调传过来的当前层容器的实例,这意味着你可以对当前弹层进行dom操作
yes: function(index){}
按钮一的回调函数
index为当前层的索引,主要用来回调执行后,配合layer.close(index)来关闭层
no: function(index){}
按钮二的回调函数
close: function(index){}
层右上角关闭按钮的点击事件触发回调函数
end: function(){}
层被彻底关闭后执行的回调函数
moveEnd: function(){}
拖拽完毕触发的回调函数
min: function(layero){},
full: function(layero){},
restore: function(layero){}
分别为最小化、全屏、还原触发后的回调函数
layero是当前层容器的实例,layer1.8开始新增
Underscore.js 精巧而强大实用功能库
集合(collection)
_.map([1, 2, 3], function(num){ return num * 3; });// [3, 6, 9]
_.map({one : 1, two : 2, three : 3}, function(num, key){ return num * 3; });// [3, 6, 9]
_.each([1, 2, 3], alert);
_.each({one : 1, two : 2, three : 3}, alert);
_.reduce([1, 2, 3], function(memo, num){ return memo + num; }, 0);// 6
_.shuffle([1, 2, 3, 4, 5, 6]);// [4, 1, 6, 3, 5, 2]
数组(array)
_.every([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });// false
_.some([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });// true
_.size({one : 1, two : 2, three : 3});// 3
_.filter([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });// [2, 4, 6]
_.reject([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });// [1, 3, 5]
_.find([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });// 2
_.contains([1, 2, 3], 3);// true
_.countBy([1, 2, 3, 4, 5], function(num) {
return num % 2 == 0 ? 'even' : 'odd';
});// {odd: 3, even: 2}
对象(object)
_.toArray({a:0,b:1,c:2});// [0, 1, 2]
var stooges = [{name : 'moe', age : 40}, {name : 'larry', age : 50}, {name : 'curly', age : 60}];
_.pluck(stooges, 'name');// ["moe", "larry", "curly"]
函数(function)
工具(utility)
模板解析
<ul id="element"></ul>
<!-- 定义模板,将模板内容放到一个script标签中 -->
<script type="text/template" id="tpl">
<% for(var i = 0; i < list.length; i++) { %>
<% var item = list[i] %>
<li>
<span><%=item.firstName%> <%=item.lastName%></span>
<span><%-item.city%></span>
</li>
<% } %>
</script>
<script type="text/javascript" src="underscore/underscore-min.js"></script>
<script type="text/javascript">
// 获取渲染元素和模板内容
var element = $('#element'),
tpl = $('#tpl').html();
// 创建数据, 这些数据可能是你从服务器获取的
var data = {
list: [
{firstName: 'Wang', lastName: 'Wu', city: 'Guangzhou'},
{firstName: 'Zhao', lastName: 'Liu', city: 'Shenzhen'}
]
}
// 解析模板, 返回解析后的内容
var html = _.template(tpl, data);
// 将解析后的内容填充到渲染元素
element.html(html);
</script>
swipe.js是一个轻量级的移动滑动组件,支持触摸移动,支持响应式页面。
window.mySwipe = new Swipe(document.getElementById('slider'), {
startSlide: 2,
speed: 400,
auto: 3000,
continuous: true,
disableScroll: false,
stopPropagation: false,
callback: function(index, elem) {},
transitionEnd: function(index, elem) {}
});
著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
链接:http://caibaojian.com/swipe.html
来源:http://caibaojian.com
设置选项
startSlide Integer (default:0) - 开始滚动的位置
speed Integer (default:300) - 动画滚动的间隔(秒数)
auto Integer - 开始自动幻灯片(以毫秒为单位幻灯片之间的时间)
continuous Boolean (default:true) - 创建一个无限的循环(当滑动到所有动画结束时是否循环滑动)
disableScroll Boolean (default:false) - 当滚动滚动条时是否停止幻灯片滚动
stopPropagation Boolean (default:false) - 是否停止事件冒泡
callback Function - 幻灯片运行中的回调函数
transitionEnd Function - 动画运行结束的回调函数
修改当你用点击或者手势控制了之后,轮播图就不会自动滚动了。
function stop() {
//delay = 0;
delay = options.auto > 0 ? options.auto : 0;
clearTimeout(interval);
}
前端框架库
jQuery Mobile和Zepto是移动端的js库。
jQuery Mobile相当于PC端的jQuery UI,它提供了很多页面的UI库,能够很快的开发出漂亮的界面,适合公司没有UI设计师的前端开发人员来进行移动端的开发。
Zepto相当于PC端的jQuery,它提供了很多方法和功能,能够很快的实现各种需求和功能,适合公司有UI设计师的前端开发人员来进行移动端的开发。
jQuery Mobile性能上没有zepto好。
Angular.Js[MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入]
Vue.Js [以数据驱动和组件化的思想构建的]
React
Ionic
前端UI框架
EasyUI
Bootstrap
Foundation by ZURB
Pure (Yahoo)
Ant Design[蚂蚁金服开发和正在使用的一套企业级的前端设计语言和基于 React 的前端框架实现]
Kendo UI
可视化组件
Echarts
前端构建工具
gulp/grunt/bower/bable/yeoman/webpack/cli/fis3
udesk:云客服
第三方SDK : mob ShareSDK分享、Umeng统计、第三方登陆(QQ/WEIXIN/WEIBO)
即时通讯:openfire+spark、rongCloud