js库

    xiaoxiao2021-03-25  27

    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

    转载请注明原文地址: https://ju.6miu.com/read-300039.html

    最新回复(0)