这套 插件库 http://passer-by.com/widget/ 的开发时间应该挺长的, 从工作到现在 3 年了, 都是在实际的项目实践中慢慢完善起来的...... 还是很稳定吧.
类型上满足了 web 开发中常见的一些需求: 轮播, 全屏滚动, 标签页, 滚动条, 日历, 自定义下拉框, 搜索建议等等......
我认为一个插件设计的好不好, 首先得看其参数的设置是否规范! 比如: 参数语义是否和功能匹配, 参数是否有必要, 是否独立等等. 如果一个插件设计的不规范, 很可能在设置一个参数的同时影响到另一个参数......
之前见过一个轮播插件, 作者在设计插件的时候考虑就有所欠妥, 向左滚动 left, 向左循环滚动 leftMarquee......
另外, 插件的可拓展性和是很重要的, 处理插件内容的事件调用, 还需要提供方法调用, 这样在模块外需要控制插件就方便多了~为此我设计的插件除了必要的参数设置外, 还有回调函数!
以轮播为例方法
调用就可以是这样的:
$(selector).slider(options,callback(api));
目前这个轮播已经支持了: 响应式布局, 手势键盘, x 和 y 轴滚动, 无缝滚动, 不定尺寸滚动, 10 余种动画效果等等特点!
以下是默认的配置参数
javascript 代码
- var defaults = {
- /* 节点绑定 */
- contentCls: 'content', // 轮播内容列表的 class
- navCls: 'nav', // 轮播导航列表的 class
- prevBtnCls: 'prev', // 向前一步的 class
- nextBtnCls: 'next', // 向后一步的 class
- /* 动画相关 */
- activeTriggerCls: 'active', // 导航选中时的 class
- disableBtnCls: 'disable', // 按键不可用时的 class
- hoverCls: 'hover', // 当鼠标移至相应区域时获得的 class
- steps: 1, // 移动帧数,'auto'自动移动至下个没有显示完整的帧
- direction: 'x', // 轮播的方向
- inEndEffect: 'switch', //"switch" 表示来回切换,"cycle" 表示循环,"none" 表示无效果
- hasTriggers: true, // 是否含有导航触发点
- triggerCondition:'*', // 触发点的条件 (有时需排除一些节点)
- triggerType: 'mouse', // 导航触发事件:"mouse" 表鼠标移入时触发,"click" 表示鼠标点击时触发
- activeIndex: 0, // 默认选中帧的索引
- pointerType: 'click', // 左右箭头的触发事件
- auto: false, // 是否自动播放
- immediately: false, // 悬浮是否立即停止
- animate: true, // 是否使用动画滑动
- delay: 3000, // 自动播放时停顿的时间间隔
- duration: 500, // 轮播的动画时长
- easing:'linear', // 切换时的动画效果
- keyboardAble:false, // 是否允许键盘按键控制
- touchable: true, // 是否允许触碰
- sensitivity: 0.4, // 触摸屏的敏感度, 滑动当前帧的百分比移动该帧, 该值越小越敏感
- scrollable:false, // 是否允许滚动滚动轴时换屏
- /* 对外事件接口 */
- beforeEvent: function() { // 移动前执行, 返回 flase 时不移动; 传入一个对象, 包含: index 事件发生前索引, count 帧长度, destination 方向 (prev 向前, next 向后, 数字为相应的索引);
- },
- afterEvent: function() { // 移动后执行; 传入一个对象, 包含: index 事件发生前索引, count 帧长度
- }
- };
而回调函数中 api 所用的方法就是轮播内部使用的方法, 这是对方法的多重运用
演示可以看这个
html 代码
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title > 轮播 - silder</title>
- <link rel="shortcut icon" href="/public/img/favicon.png">
- <link rel="stylesheet" type="text/css" href="http://passer-by.com/widget/public/cssreset-min.css">
- <link rel="stylesheet" type="text/css" href="http://passer-by.com/widget/public/common.css">
- <style type="text/css">
- .slider{
- position: relative;
- overflow: hidden;
- height: 150px;
- margin:0 auto 10px;
- }
- .slider .prev,.slider .next{
- display: block;
- position: absolute;
- width: 20px;
- height: 118px;
- background: #999;
- border:1px solid #ccc;
- text-align:center;
- line-height:110px;
- cursor:pointer;
- }
- .slider .prev{
- left:0;
- }
- .slider .next{
- right:0;
- }
- .slider .content li{
- float: left;
- width: 160px;
- height: 120px;
- background: #ccc;
- }
- .slider .nav{
- margin: 3px 0;
- text-align:center;
- }
- .slider .nav li{
- display:inline-block;
- width:24px;
- height:24px;
- background: #ccc;
- margin-right:5px;
- }
- .slider .nav li.active{background:#ff0;}
- .style1{
- width:960px;
- }
- .style1 .container{
- width: 900px;
- height: 120px;
- margin: 0 30px;
- overflow: hidden;
- }
- .style1 .content li{
- float: left;
- margin: 0 10px;
- }
- .style1 .content li.w24{
- width:240px;
- }
- .style2{
- width:220px;
- }
- .style2 .container{
- width: 160px;
- height: 120px;
- margin: 0 30px;
- overflow: hidden;
- }
- .slider4 .disable{
- background:#fff;
- }
- </style>
- <script type="text/javascript" src="http://passer-by.com/widget/public/jquery.min.js"></script>
- <script type="text/javascript" src="http://passer-by.com/widget/code/jquery.slider.js"></script>
- </head>
- <body>
- <div class="main">
- <div class="slider style1 slider1">
- <span class="prev"><</span>
- <span class="next">></span>
- <div class="container">
- <ul class="content">
- <li>1</li>
- <li>2</li>
- <li>3</li>
- <li>4</li>
- <li>5</li>
- <li>6</li>
- <li>7</li>
- <li>8</li>
- </ul>
- </div>
- </div>
- <div class="code">
- <p>$(".slider1").slider({inEndEffect:"cycle",steps:2,auto:true,duration:300,delay:5000});</p>
- </div>
- <script type="text/javascript">
- $(".slider1").slider({inEndEffect:"cycle",steps:2,auto:false,duration:5000,duration:300,delay:5000});
- </script>
- <div class="slider style2 slider2">
- <span class="prev"><</span>
- <span class="next">></span>
- <div class="container">
- <ul class="content">
- <li>1</li>
- <li>2</li>
- <li>3</li>
- <li>4</li>
- <li>5</li>
- </ul>
- </div>
- </div>
- <div class="code">
- <p>$(".slider2").slider({direction:"y",activeIndex:2});</p>
- </div>
- <script type="text/javascript">
- $(".slider2").slider({direction:"y",activeIndex:2});
- </script>
- <div class="slider style2 slider3">
- <div class="container">
- <ul class="content">
- <li>1</li>
- <li>2</li>
- <li>3</li>
- <li>4</li>
- </ul>
- </div>
- <ul class="nav">
- <li > 一 </li>
- <li > 二 </li>
- <li > 三 </li>
- <li > 四 </li>
- </ul>
- </div>
- <div class="code">
- <p>$(".slider3").slider({animate:false,triggerType:"click"});</p>
- </div>
- <script type="text/javascript">
- $(".slider3").slider({animate:false,triggerType:"click"});
- </script>
- <div class="slider style2 slider4">
- <span class="prev"><</span>
- <span class="next">></span>
- <div class="container">
- <ul class="content">
- <li>1</li>
- <li>2</li>
- <li>3</li>
- <li>4</li>
- <li>5</li>
- </ul>
- </div>
- </div>
- <div class="code">
- <p > 按键盘左右键, 切换幻灯片 </p>
- <p>$(".slider4").slider({easing:"backin",keyboardAble:true,hasTriggers:false,inEndEffect:"none"});</p>
- </div>
- <script type="text/javascript">
- $(".slider4").slider({easing:"backin",keyboardAble:true,hasTriggers:false,inEndEffect:"none"});
- </script>
- <div class="slider style1 slider5">
- <span class="prev"><</span>
- <span class="next">></span>
- <div class="container">
- <ul class="content">
- <li>1</li>
- <li>2</li>
- <li>3</li>
- <li>4</li>
- <li>5</li>
- <li>6</li>
- <li>7</li>
- <li>8</li>
- <li>9</li>
- <li>10</li>
- <li>11</li>
- <li>12</li>
- </ul>
- </div>
- </div>
- <div class="code">
- <p > 滚动鼠标中轴, 切换幻灯片 </p>
- <p>$(".slider5").slider({inEndEffect:"none",pointerType:"mouse",scrollable:true,hasTriggers:false,duration:1000});</p>
- </div>
- <script type="text/javascript">
- $(".slider5").slider({inEndEffect:"none",pointerType:"mouse",scrollable:true,hasTriggers:false,duration:1000});
- </script>
- <div class="slider style1 slider6">
- <span class="prev"><</span>
- <span class="next">></span>
- <div class="container">
- <ul class="content">
- <li class="w24">1</li>
- <li>2</li>
- <li>3</li>
- <li class="w24">4</li>
- <li>5</li>
- <li>6</li>
- <li>7</li>
- <li class="w24">8</li>
- <li>9</li>
- <li>10</li>
- <li class="w24">11</li>
- <li>12</li>
- </ul>
- </div>
- </div>
- <div class="code">
- <p > 不定大小的帧 </p>
- <p>$(".slider6").slider({hasTriggers:false,duration:1000,steps:'auto'});</p>
- </div>
- <script type="text/javascript">
- $(".slider6").slider({hasTriggers:false,duration:1000,steps:'auto'});
- </script>
- <div class="slider style2 slider7">
- <div class="container">
- <ul class="content">
- <li > 新闻内容 1</li>
- <li > 新闻内容 2</li>
- <li > 新闻内容 3</li>
- <li > 新闻内容 4</li>
- <li > 新闻内容 5</li>
- <li > 新闻内容 6</li>
- <li > 新闻内容 7</li>
- <li > 新闻内容 8</li>
- <li > 新闻内容 9</li>
- <li > 新闻内容 10</li>
- <li > 新闻内容 11</li>
- <li > 新闻内容 12</li>
- </ul>
- </div>
- </div>
- <div class="code">
- <p > 跑马灯效果 </p>
- <p>$(".slider7").slider({inEndEffect:'cycle',hasTriggers:false,duration:3000,delay:0,direction:'y',auto:true,immediately:true});</p>
- </div>
- <script type="text/javascript">
- $(".slider7").slider({inEndEffect:'cycle',hasTriggers:false,duration:3000,delay:0,direction:'y',auto:true,immediately:true});
- </script>
- <div class="example">
- <div class="call">
- <h1 > 调用方法:</h1>
- <p>$(selector).slider(options,callback(api));</p>
- </div>
- <h2> options 参数 </h2>
- <table>
- <thead>
- <tr>
- <th style="width:150"> 参数 </th>
- <th style="width:80"> 默认值 </th>
- <th > 说明 </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>contentCls</td>
- <td>'content'</td>
- <td > 轮播内容列表的 class</td>
- </tr>
- <tr>
- <td>navCls</td>
- <td>'nav'</td>
- <td > 轮播导航列表的 class</td>
- </tr>
- <tr>
- <td>prevBtnCls</td>
- <td>'prev'</td>
- <td > 向前一步的 class</td>
- </tr>
- <tr>
- <td>nextBtnCls</td>
- <td>'next'</td>
- <td > 向后一步的 class</td>
- </tr>
- <tr>
- <td>activeTriggerCls</td>
- <td>'active'</td>
- <td > 导航选中时的 class</td>
- </tr>
- <tr>
- <td>disableBtnCls</td>
- <td>'disable'</td>
- <td > 按键不可用时的 class</td>
- </tr>
- <tr>
- <td>hoverCls</td>
- <td>'hover'</td>
- <td > 当鼠标移至相应区域时获得的 class</td>
- </tr>
- <tr>
- <td>steps</td>
- <td>1</td>
- <td > 移动帧数,'auto'为自动调整 </td>
- </tr>
- <tr>
- <td>direction</td>
- <td>'x'</td>
- <td > 轮播的方向 </td>
- </tr>
- <tr>
- <td>inEndEffect</td>
- <td>'switch'</td>
- <td > 播放到最后一帧时的效果:"switch" 表示来回切换,"cycle" 表示循环,"none" 表示无效果 </td>
- </tr>
- <tr>
- <td>hasTriggers</td>
- <td>true</td>
- <td > 是否含有导航触发点 </td>
- </tr>
- <tr>
- <td>triggerCondition</td>
- <td>'*'</td>
- <td > 触发点的条件 (有时需排除一些节点)</td>
- </tr>
- <tr>
- <td>triggerType</td>
- <td>'mouse'</td>
- <td > 导航触发事件类型:"mouse" 表鼠标移入时触发,"click" 表示鼠标点击时触发 </td>
- </tr>
- <tr>
- <td>activeIndex</td>
- <td>0</td>
- <td > 默认选中帧的索引 </td>
- </tr>
- <tr>
- <td>pointerType</td>
- <td>'click'</td>
- <td > 左右箭头的触发事件类型:"mouse" 表鼠标移入时触发,"click" 表示鼠标点击时触发 </td>
- </tr>
- <tr>
- <td>auto</td>
- <td>false</td>
- <td > 是否自动播放 </td>
- </tr>
- <tr>
- <td>animate</td>
- <td>true</td>
- <td > 是否使用动画滑动 </td>
- </tr>
- <tr>
- <td>delay</td>
- <td>3000</td>
- <td > 自动播放时停顿的时间间隔 </td>
- </tr>
- <tr>
- <td>immediately</td>
- <td>false</td>
- <td > 悬浮是否立即停止 </td>
- </tr>
- <tr>
- <td>duration</td>
- <td>500</td>
- <td > 轮播的动画时长 </td>
- </tr>
- <tr>
- <td>easing</td>
- <td>'easeIn'</td>
- <td > 切换时的动画效果, 可选的动画函数包括: swing,easeIn,easeOut,expoin,expoout,expoinout,elasin,elasout,elasinout,backin,backout,backinout,bouncein,bounceout,bounceinout</td>
- </tr>
- <tr>
- <td>keyboardAble</td>
- <td>false</td>
- <td > 是否允许键盘按键控制 </td>
- </tr>
- <tr>
- <td>touchable</td>
- <td>true</td>
- <td > 是否允许触碰 </td>
- </tr>
- <tr>
- <td>sensitivity</td>
- <td>0.4</td>
- <td > 触摸屏的敏感度, 滑动当前帧的百分比移动该帧, 该值越小越敏感 </td>
- </tr>
- <tr>
- <td>scrollable</td>
- <td>false</td>
- <td > 是否允许滚动滚动轴时换屏 </td>
- </tr>
- <tr>
- <td>beforeEvent(status)</td>
- <td>[无]</td>
- <td > 移动前执行, 返回 flase 时不移动; 传入一个对象, 包含: index 事件发生前索引, count 帧长度, destination 方向 (prev 向前, next 向后, 数字为相应的索引),event 事件对象;</td>
- </tr>
- <tr>
- <td>afterEvent(status)</td>
- <td>[无]</td>
- <td > 移动后执行; 传入一个对象, 包含: index 事件发生前索引, count 帧长度, destination 方向 (prev 向前, next 向后, 数字为相应的索引),event 事件对象 </td>
- </tr>
- </tbody>
- </table>
- <h2> callback(api) 参数 </h2>
- <table>
- <thead>
- <tr>
- <th style="width:200"> 方法 </th>
- <th > 说明 </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>prev()</td>
- <td > 向前一步 </td>
- </tr>
- <tr>
- <td>next()</td>
- <td > 向后一步 </td>
- </tr>
- <tr>
- <td>start()</td>
- <td > 开始播放 </td>
- </tr>
- <tr>
- <td>stop()</td>
- <td > 停止播放 </td>
- </tr>
- <tr>
- <td>resize()</td>
- <td > 重置幻灯片参数 </td>
- </tr>
- <tr>
- <td>setIndex(index,isAnimate)</td>
- <td > 设置当前帧 </td>
- </tr>
- <tr>
- <td>setSteps(steps)</td>
- <td > 设置移动帧数 </td>
- </tr>
- <tr>
- <td>setDelay(delay)</td>
- <td > 设置动画停顿时间间隔 </td>
- </tr>
- <tr>
- <td>setDuration(duration)</td>
- <td > 设置动画时长 </td>
- </tr>
- <tr>
- <td>getIndex()</td>
- <td > 获取当前帧 </td>
- </tr>
- <tr>
- <td>getOptions()</td>
- <td > 获取组件当前参数值 </td>
- </tr>
- </tbody>
- </table>
- </div>
- </div>
- </body>
- <html>
来源: http://www.qdfuns.com/article/19323/5c0f9d20b013ef1dba91432967deec4d.html