JQuery插件的开发真的有那么难吗

【前言】
jQuery已经被广泛使用，凭借其简洁的API，对DOM强大的操控性，易扩展性越来越受到web开发人员的喜爱，我在社区也发布了很多的jQuery插件，经常有人询问一些技巧，因此干脆写这么一篇文章给各位jQuery爱好者，算是抛砖引玉吧。

创新互联专注于南木林网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供南木林营销型网站建设，南木林网站制作、南木林网页设计、南木林网站官网定制、小程序定制开发服务，打造南木林网络公司原创品牌,更为您提供南木林网站排名全网营销落地服务。

【基础】
a)样式
很多人会认为样式是个很复杂的东西，需要沉着冷静的心态加上非凡的审美观才能设计出赏心悦目的UI，抛开图片设计不说，其实css也就是那么些属性：position,margin,padding,width,height,left,top,float,border,background...

UI设计的漂亮与否在很大程度上依赖于设计人员对配色的把握和整体效果的协调。举个简单的例子，一个简单的页面，马虎的人：　　

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.     Test Pagetitle> </li>
  
  
  
  <li>head> </li>
  
  
  
  <li><body> </li>
  
  
  
  <li>    jQuery是一个框架！压缩后有30多k吧。  </li>
  
  
  
  <li>body> </li>
  
  
  
  <li>html> </li>
 
 
 
 </ol></pre><p>细心的人：</p><pre>
 
 
 
 <ol>
  
  
  
  <li><html xmlns="http://www.w3.org/1999/xhtml"> </li>
  
  
  
  <li><head> </li>
  
  
  
  <li>    <title>Test Pagetitle> </li>
  
  
  
  <li>    <style type="text/css"> </li>
  
  
  
  <li>        body  </li>
  
  
  
  <li>        {  </li>
  
  
  
  <li>            font-family:'宋体';  </li>
  
  
  
  <li>            font-size:12px;  </li>
  
  
  
  <li>            }  </li>
  
  
  
  <li>    style> </li>
  
  
  
  <li>head> </li>
  
  
  
  <li><body> </li>
  
  
  
  <li>    jQuery是一个框架！压缩后有30多k吧。  </li>
  
  
  
  <li>body> </li>
  
  
  
  <li>html> </li>
 
 
 
 </ol></pre><p>专心的人：</p><pre>
 
 
 
 <ol>
  
  
  
  <li><html xmlns="http://www.w3.org/1999/xhtml"> </li>
  
  
  
  <li><head> </li>
  
  
  
  <li>    <title>Test Pagetitle> </li>
  
  
  
  <li>    <style type="text/css"> </li>
  
  
  
  <li>        body  </li>
  
  
  
  <li>        {  </li>
  
  
  
  <li>            font-family:'Verdana','宋体';  </li>
  
  
  
  <li>            font-size:12px;  </li>
  
  
  
  <li>            }  </li>
  
  
  
  <li>    style> </li>
  
  
  
  <li>head> </li>
  
  
  
  <li><body> </li>
  
  
  
  <li>    jQuery是一个框架！压缩后有30多k吧。  </li>
  
  
  
  <li>body> </li>
  
  
  
  <li>html> </li>
 
 
 
 </ol></pre><p>我们对比一下三者的UI效果：</p><p> 一目了然，或许很多的站点失去关注正是因为这不起眼的font-family,font-size。当然这还只是个简单的例子，掌握css应该从简单做起，从基本入手，在实践中运用并不断深入。</p><p>b)脚本 <br /> 我们同样需要对javascript有着深刻的理解，对dom, xhr, Regex, call-apply, prototype等都应该有一定的了解。</p><p>有人会说要这些有啥用啊，对dom的操作其实通过getElementById, getElementsByTagName以及其他的API都可以轻松的完成，这话是没错，当思路确定后，思想才是重点，一段代码是精华还是糟粕很容易就可以区分出来，究其原因还是取决你自己，举个简单的例子，大量的html组装，</p><p>路人甲：</p><pre>
 
 
 
 <ol>
  
  
  
  <li>var a = new Array(10);  </li>
  
  
  
  <li>var menu = '';     </li>
  
  
  
  <li>for (var i = 0; i < a.length; i++) {  </li>
  
  
  
  <li>  menu += '' + a[i] + '" >' + a[i] + '';  </li>
  
  
  
  <li>}  </li>
 
 
 
 </ol></pre><p>路人乙：</p><pre>
 
 
 
 <ol>
  
  
  
  <li>String.prototype.format = function() {  </li>
  
  
  
  <li>    var args = arguments;  </li>
  
  
  
  <li>    return this.replace(/{(\d{1})}/g, function() {  </li>
  
  
  
  <li>        return args[arguments[1]];  </li>
  
  
  
  <li>    });  </li>
  
  
  
  <li>};  </li>
  
  
  
  <li> </li>
  
  
  
  <li>var a = new Array(1,2,3,4,5,6,7,8,9,0);  </li>
  
  
  
  <li>var m = '{0}';  </li>
  
  
  
  <li> </li>
  
  
  
  <li>for (var i = 0; i < a.length; i++) {  </li>
  
  
  
  <li>    menu += m.format(a[i]);  </li>
  
  
  
  <li>}  </li>
 
 
 
 </ol></pre><p>在实现方式明确的情况下，优雅高效的代码显然更具吸引力。</p><p>【实践】<br /> jQuery开发或使用，更多的灵感是来自实践，而不是copy||paste(奉行拿来主义的同学可以离开了)。</p><p>那么在这里我会用一个简单的例子来阐述jQuery插件开发的流程，能否举一反三就看各位看官了。</p><p>【目的】</p><p>开发一个插件之前我们需要对自己的目的有一个清醒的认识，有很明确的方向感，那么此次我作为示例插件的目的，就是呈现一个用于UI的Slider - 滑动条，常年从事于或暂时专注于win32开发的同学应该比较了解。</p><p>草图</p><p>真正动手编码之前我们还需要有一个草图来描述自己插件的“长相”（事件驱动或API封装的可以忽略）。<br /> 很多的同学在做UI开发前往往会忙于搜集各种小图片(非精通ps或iconworkshop人士)，其实漂亮的图标的确可以美化我们的UI，不过我一般的处理方式是编写易于扩展的css，前期的UI呈现尽量少使用图片，多用线条完成。</p><p>　　ok，言归正卷，那么我的slider设计草图是:</p><p>解释下下文将用到的几个词：<br /> slider: 此部分是作为拖拽手柄来使用，用户可以通过拖拽此部分来更新completed bar的位置。<br /> completed: 此部分作为bar的内嵌元素，作为特殊效果来显示slider与起始点的距离，亦即与slider的value值关联。<br /> bar: slider的载体，completed的满值。</p><p>思路：<br /> slider作为手柄提供拖拽功能，作用区域为bar，拖拽过程中completed条必须实时更新(长度)，影响区域为slider至bar左端的距离。</p><p>【编码】</p><p>开发jQuery UI/Effect 插件在很多时候都需要与UI交互，因此在呈现上需要提供Html tree来绘制我们的插件，最终通过js dom来输出，那么在绘制简单的dom结构的时候我会直接用js来完成，不过如果嵌套比较复杂的话，我们还是应该先用html来完成，然后转变成js输出。</p><p>html tree:</p><pre>
 
 
 
 <ol>
  
  
  
  <li><div class="defaultbar"> </li>
  
  
  
  <li>  <div class="jquery-completed"> div> </li>
  
  
  
  <li>  <div class="jquery-jslider"> div> </li>
  
  
  
  <li>div> </li>
 
 
 
 </ol></pre><p>　　deafultbar -> bar<br /> 　　jquery-completed -> completed<br /> 　　jquery-jslider -> slider</p><p>　　前期UI呈现上我们不使用图片，尽量用线条、颜色来完成：</p><pre>
 
 
 
 <ol>
  
  
  
  <li>/*----default skin----*/  </li>
  
  
  
  <li>.defaultbar  </li>
  
  
  
  <li>{  </li>
  
  
  
  <li>    margin-top: 10px;  </li>
  
  
  
  <li>    height: 5px;  </li>
  
  
  
  <li>    background-color: #FFFFE0;  </li>
  
  
  
  <li>    border: 1px solid #A9C9E2;  </li>
  
  
  
  <li>    position: relative;  </li>
  
  
  
  <li>    }  </li>
  
  
  
  <li>.defaultbar .jquery-completed  </li>
  
  
  
  <li>{  </li>
  
  
  
  <li>    height: 3px;  </li>
  
  
  
  <li>    background-color: #7d9edb;  </li>
  
  
  
  <li>    top: 1px;  </li>
  
  
  
  <li>    left:1px;  </li>
  
  
  
  <li>    position: absolute;  </li>
  
  
  
  <li>    }  </li>
  
  
  
  <li>.defaultbar .jquery-jslider  </li>
  
  
  
  <li>{  </li>
  
  
  
  <li>    height: 15px;  </li>
  
  
  
  <li>    background-color: #E6E6FA;  </li>
  
  
  
  <li>    border: 1px solid #A5B6C8;  </li>
  
  
  
  <li>    top: -6px;  </li>
  
  
  
  <li>    display: block;  </li>
  
  
  
  <li>    cursor: pointer;  </li>
  
  
  
  <li>    position: absolute;  </li>
  
  
  
  <li>    }  </li>
 
 
 
 </ol></pre><p>将bar的position属性设置成relative，以方便子节点的浮动（子节点使用position:absolute来获得内联浮动效果）。</p><p>那么我们可以看下这个css和html tree产生的UI效果： </p><p>ok,具备了所需的元素 - slider, completed, bar.</p><p>一些规范:</p><p>当我们画出了UI之后就可以正式编写jQuery插件代码了，不过在着之前我们还需要对jQuery插件开发的一些规范性有一些了解。</p><p><strong>1. 使用闭包：</strong></p><pre>
 
 
 
 <ol>
  
  
  
  <li>(function($) {  </li>
  
  
  
  <li>  // Code goes here  </li>
  
  
  
  <li>})(jQuery);  </li>
 
 
 
 </ol></pre><p>这是来自jQuery官方的插件开发规范要求，使用这种编写方式有什么好处呢？</p><p>a) 避免全局依赖。</p><p>b) 避免第三方破坏。</p><p>c) 兼容jQuery操作符'$'和'jQuery '</p><p>我们知道这段代码在被解析时会形同如下代码：</p><pre>
 
 
 
 <ol>
  
  
  
  <li>var jq = function($) {  </li>
  
  
  
  <li>  // Code goes here  </li>
  
  
  
  <li>};   </li>
  
  
  
  <li>jq(jQuery);  </li>
 
 
 
 </ol></pre><p>这样效果就一目了然了。</p><p><strong>2. 扩展</strong></p><p>jQuery提供了2个供用户扩展的‘基类’ - $.extend和$.fn.extend.</p><p>$.extend 用于扩展自身方法，如$.ajax, $.getJSON等，$.fn.extend则是用于扩展jQuery类，包括方法和对jQuery对象的操作。为了保持jQuery的完整性，我比较趋向于使用$.fn.extend进行插件开发而尽量少使用$.extend.</p><p><strong>3. 选择器</strong></p><p>jQuery提供了功能强大，并兼容多种css版本的选择器，不过发现很多同学在使用选择器时并未注重效率的问题。 </p><p> a) 尽量使用Id选择器，jQuery的选择器使用的API都是基于getElementById或getElementsByTagName，因此可以知道效率***的是Id选择器，因为jQuery会直接调用getElementById去获取dom，而通过样式选择器获取jQuery对象时往往会使用 getElementsByTagName去获取然后筛选。</p><p> b) 样式选择器应该尽量明确指定tagName, 如果开发人员使用样式选择器来获取dom，且这些dom属于同一类型，例如获取所有className为jquery的div，那么我们应该使用的写法是$('div.jquery')而不是$('.jquery')，这样写的好处非常明显，在获取dom时jQuery会获取div然后进行筛选，而不是获取所有dom再筛选。</p><p>c) 避免迭代，很多同学在使用jQuery获取指定上下文中的dom时喜欢使用迭代方式，如$('.jquery .child')，获取className为jquery的dom下的所有className为child的节点，其实这样编写代码付出的代价是非常大的，jQuery会不断的进行深层遍历来获取需要的元素，即使确实需要，我们也应该使用诸如$(selector,context), $('selector1>selector2'), $(selector1).children(selector2), $(selctor1).find(selector2)之类的方式。</p><p>开始编码</p><p>话题有点扯远，ok，在对UI有了清晰的认识后我们就可以使用js来输出html了。</p><p>我们使用jSlider来命名这个slider插件(为了避免插件冲突，插件命名时也应十分考究，这里我就俗一回)。</p><pre>
 
 
 
 <ol>
  
  
  
  <li>$.extend($.fn, {  </li>
  
  
  
  <li>        ///  </li>
  
  
  
  <li>        /// apply a slider UI  </li>
  
  
  
  <li>        ///  </li>
  
  
  
  <li>        jSlider: function(setting) {  </li>
  
  
  
  <li>        }  </li>
  
  
  
  <li>});  </li>
 
 
 
 </ol></pre><p>在插件开发中比较标准的方式是将元数据独立出来并开放API，比如这里的setting参数传入值，有时候为了减少代码编写量，我习惯于直接在插件内赋值：</p><pre>
 
 
 
 <ol>
  
  
  
  <li>var ps = $.extend({  </li>
  
  
  
  <li>    renderTo: $(document.body),  </li>
  
  
  
  <li>    enable: true,  </li>
  
  
  
  <li>    initPosition: 'max',  </li>
  
  
  
  <li>    size: { barWidth: 200, sliderWidth: 5 },  </li>
  
  
  
  <li>    barCssName: 'defaultbar',  </li>
  
  
  
  <li>    completedCssName: 'jquery-completed',  </li>
  
  
  
  <li>    sliderCssName: 'jquery-jslider',  </li>
  
  
  
  <li>    sliderHover: 'jquery-jslider-hover',  </li>
  
  
  
  <li>    onChanging: function() { },  </li>
  
  
  
  <li>    onChanged: function() { }  </li>
  
  
  
  <li>}, setting);  </li>
 
 
 
 </ol></pre><p>规范的做法：</p><pre>
 
 
 
 <ol>
  
  
  
  <li>$.fn.jSlider.default = {  </li>
  
  
  
  <li>    renderTo: $(document.body),  </li>
  
  
  
  <li>    enable: true,  </li>
  
  
  
  <li>    initPosition: 'max',  </li>
  
  
  
  <li>    size: { barWidth: 200, sliderWidth: 5 },  </li>
  
  
  
  <li>    barCssName: 'defaultbar',  </li>
  
  
  
  <li>    completedCssName: 'jquery-completed',  </li>
  
  
  
  <li>    sliderCssName: 'jquery-jslider',  </li>
  
  
  
  <li>    sliderHover: 'jquery-jslider-hover',  </li>
  
  
  
  <li>    onChanging: function() { },  </li>
  
  
  
  <li>    onChanged: function() { }  </li>
  
  
  
  <li>    };  </li>
  
  
  
  <li> </li>
  
  
  
  <li>$.extend({},$.fn.jSlider.default,setting);  </li>
 
 
 
 </ol></pre><p>ok, 下面描述下我所定义的这些API的作用：<br /> renderTo: jSlider的载体、容器，可以是一个jQuery对象，也可以是选择器。　　<br /> enable: jSlider插件是否可用，true时end-user可拖拽，否则禁止。<br /> initPosition: jSlider的初始值，‘max’或者‘min’，亦即 slider的value值，1或者0。<br /> size: jSlider的参数，包括2个值barWidth - bar的长度， sliderWidth - slider的长度。<br /> barCssName: bar的样式名称，便于end-user自行扩展样式。<br /> completedCssName: completed的样式名称。<br /> sliderCssName: slider的样式名称。<br /> sliderHover: slider聚焦时的样式名称。<br /> onChanging: slider被拖拽时触发的事件。<br /> onChanged: slider拖拽结束时触发的事件。</p><p>此时我们需要将renderTo强制转换成jQuery对象(兼容使用selector的情况)：</p><pre>
 
 
 
 <ol>
  
  
  
  <li>ps.renderTo = (typeof ps.renderTo == 'string' ?  </li>
  
  
  
  <li>                 $(ps.renderTo) : ps.renderTo);  </li>
 
 
 
 </ol></pre><p>然后将html tree输出到render:</p><pre>
 
 
 
 <ol>
  
  
  
  <li>/* ----------> </li>
  
  
  
  <li>html tree:  </li>
  
  
  
  <li> </li>
  
  
  
  <li> ---->sliderbar  </li>
  
  
  
  <li>    ----> completed bar  </li>
  
  
  
  <li>   ----> slider                    </li>
  
  
  
  <li><-----------*/  </li>
  
  
  
  <li>var sliderbar = $('')  </li>
  
  
  
  <li>                    .attr('class', ps.barCssName)  </li>
  
  
  
  <li>                        .css('width', ps.size.barWidth)  </li>
  
  
  
  <li>                            .appendTo(ps.renderTo);  </li>
  
  
  
  <li> </li>
  
  
  
  <li>var completedbar = sliderbar.find('div:eq(0)')  </li>
  
  
  
  <li>                        .attr('class', ps.completedCssName);  </li>
  
  
  
  <li> </li>
  
  
  
  <li>var slider = sliderbar.find('div:eq(1)')  </li>
  
  
  
  <li>                .attr('class', ps.sliderCssName)  </li>
  
  
  
  <li>                    .css('width', ps.size.sliderWidth);  </li>
 
 
 
 </ol></pre><p>这样我们就在UI上直接呈现了Html并且用定制的css进行渲染，分别用sliderbar, completedbar, slider对我们需要的三个对象进行缓存。</p><p>ok, 在呈现了UI后我们就需要提供方法来实现slider的拖拽，在这之前我们还需要实现一个方法，就是completedbar的实时更新，即在拖动slider的时候让completedbar始终填充左侧区域：</p><pre>
 
 
 
 <ol>
  
  
  
  <li>var bw = sliderbar.width(), sw = slider.width();  </li>
  
  
  
  <li>//make sure that the slider was displayed in the bar(make a limited)  </li>
  
  
  
  <li>ps.limited = { min: 0, max: bw - sw };  </li>
  
  
  
  <li> </li>
  
  
  
  <li>if (typeof window.$sliderProcess == 'undefined') {  </li>
  
  
  
  <li>    window.$sliderProcess = new Function('obj1', 'obj2', 'left',  </li>
  
  
  
  <li>                                     'obj1.css(\'left\',left);obj2.css(\'width\',left);');  </li>
  
  
  
  <li>}  </li>
  
  
  
  <li>$sliderProcess(slider, completedbar, eval('ps.limited.' + ps.initPosition));  </li>
 
 
 
 </ol></pre><p>bw,sw用来存储sliderbar和slider的长度，此处没有直接使用ps.size里的值是为了防止样式里的border-width对width造成破坏。</p><p>定义一个私用成员limited来存储slider[left]的***值和最小值，并在后面直接使用eval('ps.limited.' + ps.initPosition)来获取，从而避免switch操作。</p><p>同时还需定义一个全局Function用来定位completedbar的填充长度以及slider左侧距离，我给其命名为$sliderProcess。</p><p>那么我们接下来剩下的工作就是slider的拖拽功能了，那么在这里我会用到之前发布的一款jQuery拖拽插件，并做适量的订制：</p><pre>
 
 
 
 <ol>
  
  
  
  <li>//drag and drop  </li>
  
  
  
  <li>var slide = {  </li>
  
  
  
  <li>    drag: function(e) {  </li>
  
  
  
  <li>        var d = e.data;  </li>
  
  
  
  <li>        var l = Math.min(Math.max(e.pageX - d.pageX + d.left, ps.limited.min), ps.limited.max);  </li>
  
  
  
  <li> </li>
  
  
  
  <li>        $sliderProcess(slider, completedbar, l);  </li>
  
  
  
  <li>        //push two parameters: 1st:percentage, 2nd: event  </li>
  
  
  
  <li>        ps.onChanging(l / ps.limited.max, e);  </li>
  
  
  
  <li>    },  </li>
  
  
  
  <li>    drop: function(e) {  </li>
  
  
  
  <li>        slider.removeClass(ps.sliderHover);  </li>
  
  
  
  <li>        //push two parameters: 1st:percentage, 2nd: event  </li>
  
  
  
  <li>        ps.onChanged(parseInt(slider.css('left')) / ps.limited.max, e);  </li>
  
  
  
  <li> </li>
  
  
  
  <li>        $().unbind('mousemove', slide.drag).unbind('mouseup', slide.drop);  </li>
  
  
  
  <li>    }  </li>
  
  
  
  <li>};  </li>
  
  
  
  <li> </li>
  
  
  
  <li>if (ps.enable) {  </li>
  
  
  
  <li>    //bind events  </li>
  
  
  
  <li>    slider.bind('mousedown', function(e) {  </li>
  
  
  
  <li>        var d = {  </li>
  
  
  
  <li>            left: parseInt(slider.css('left')),  </li>
  
  
  
  <li>            pageX: e.pageX  </li>
  
  
  
  <li>        };  </li>
  
  
  
  <li>        $(this).addClass(ps.sliderHover);  </li>
  
  
  
  <li>        $().bind('mousemove', d, slide.drag).bind('mouseup', d, slide.drop);  </li>
  
  
  
  <li>    });  </li>
  
  
  
  <li>}  </li>
 
 
 
 </ol></pre><p>这样当jSlider enable属性为true时，在end-user按下鼠标时绑定mousemove事件，在鼠标弹起时移除，我们只需要同步更新slider的left 属性和completedbar的width即可，同时在drag中绑定onChanging方法，在drop中绑定onChanged方法，向这两个方法推送的参数相同，1>百分比，即value值，介于0~1，2>event。</p><p>那么至此我们的jSlider插件就基本成型，向用户提供了一个可拖拽的slider。</p><p>【扩展】 <br /> 有的时候用户却不是那么容易满足，于是有人高呼：“我要自己设置value，为什么不提供这个功能？”。</p><p>那么这时我们就需要为用户公开一个方法，用于设置jSlider的value，首先考虑的是作为方法需要一个作用对象(jSlider)，那么此时我又不想将作用对象作为参数传入，那么我们还是将这个方法作为插件来开发，我们将方法命名为setSliderValue，开放2个参数，v(value值)和 callback(设置完成后的回调函数)。</p><p>即：$.fn.setSliderValue(v,callback);</p><p>ok，那么剩下的就是作用对象了，由之前的设计可知，在slider拖动时主要作用于2个对象，slider和completedbar，那么我们在jSlider插件末尾加上一段代码来返回slider对象：</p><pre>
 
 
 
 <ol>
  
  
  
  <li>slider.data = { bar: sliderbar, completed: completedbar };  </li>
  
  
  
  <li>return slider;  </li>
 
 
 
 </ol></pre><p>这样我们在初始化jSlider的时候就可以直接用一个变量来获取jSlider对象，然后调用setSliderValue方法了，伪码：</p><pre>
 
 
 
 <ol>
  
  
  
  <li>var slider = $.fn.jSlider({});  </li>
  
  
  
  <li>slider.setSliderValue(v,function(){});  </li>
 
 
 
 </ol></pre><p>setSliderValue代码：</p><pre>
 
 
 
 <ol>
  
  
  
  <li>try {  </li>
  
  
  
  <li>    //validate  </li>
  
  
  
  <li>    if (typeof v == 'undefined' || v < 0 || v > 1) {  </li>
  
  
  
  <li>        throw new Error('\'v\' must be a Float variable between 0 and 1.');  </li>
  
  
  
  <li>    }  </li>
  
  
  
  <li> </li>
  
  
  
  <li>    var s = this;  </li>
  
  
  
  <li> </li>
  
  
  
  <li>    //validate   </li>
  
  
  
  <li>    if (typeof s == 'undefined' ||  </li>
  
  
  
  <li>        typeof s.data == 'undefined' ||  </li>
  
  
  
  <li>            typeof s.data.bar == 'undefined') {  </li>
  
  
  
  <li>        throw new Error('You bound the method to an object that is not a slider!');  </li>
  
  
  
  <li>    }  </li>
  
  
  
  <li> </li>
  
  
  
  <li>    $sliderProcess(s, s.data.completed, v * s.data.bar.width());  </li>
  
  
  
  <li> </li>
  
  
  
  <li>    if (typeof callback != 'undefined') { callback(v); }  </li>
  
  
  
  <li>}  </li>
  
  
  
  <li>catch (e) {  </li>
  
  
  
  <li>    alert(e.message);  </li>
  
  
  
  <li>}  </li>
 
 
 
 </ol></pre><p>这里同样调用了全局Function $sliderProcess在设置slider的value值时进行completedbar[width]和slider[left]的更新。由于此处进行了异常处理，所以如果end-user在确保setSliderValue被作用于jSlider对象的时候可以删除此异常处理代码。</p><p>【皮肤】<br /> 根据jSlider的API我们可以更加方便的为其设定皮肤，为了让jSlider更加专业，我们需要2张图片：</p><p> 用来作为completedbar背景的'bar'和用来作为slider背景的'slider'，ok，我们更新下样式：</p><pre>
 
 
 
 <ol>
  
  
  
  <li> /*----blue skin----*/  </li>
  
  
  
  <li>.bluebar  </li>
  
  
  
  <li>{  </li>
  
  
  
  <li>    margin-top: 10px;  </li>
  
  
  
  <li>    height: 4px;  </li>
  
  
  
  <li>    background:#F7F7F7;  </li>
  
  
  
  <li>    border:solid 1px #3e3e3e;  </li>
  
  
  
  <li>    position: relative;  </li>
  
  
  
  <li>    }  </li>
  
  
  
  <li>.bluebar .jquery-completed  </li>
  
  
  
  <li>{  </li>
  
  
  
  <li>    height: 4px;  </li>
  
  
  
  <li>    background:url(../images/slider/blue/bar.gif) left center no-repeat;  </li>
  
  
  
  <li>    top: 0;  </li>
  
  
  
  <li>    left:0;  </li>
  
  
  
  <li>    position: absolute;  </li>
  
  
  
  <li>    }  </li>
  
  
  
  <li>.bluebar .jquery-jslider  </li>
  
  
  
  <li>{  </li>
  
  
  
  <li>    height: 17px;  </li>
  
  
  
  <li>    background:url(../images/slider/blue/slider.gif) center 0 no-repeat;  </li>
  
  
  
  <li>    top: -4px;  </li>
  
  
  
  <li>    display: block;  </li>
  
  
  
  <li>    cursor: pointer;  </li>
  
  
  
  <li>    position: absolute;  </li>
  
  
  
  <li>    }  </li>
  
  
  
  <li>.bluebar .jquery-jslider-hover  </li>
  
  
  
  <li>{  </li>
  
  
  
  <li>    background-position:center -17px;  </li>
  
  
  
  <li>    }  </li>
 
 
 
 </ol></pre><p>由于在设置样式时我仍然让子节点样式使用了API的默认值，因此在创建jSlider时我们只需要设置barCssName就行了：</p><pre>
 
 
 
 <ol>
  
  
  
  <li>var blue = $.fn.jSlider({  </li>
  
  
  
  <li>    renderTo: '#slidercontainer',  </li>
  
  
  
  <li>    size: { barWidth: 500, sliderWidth: 10 },  </li>
  
  
  
  <li>    barCssName: 'bluebar',  </li>
  
  
  
  <li>    onChanging: function(percentage, e) {  </li>
  
  
  
  <li>        // code goes here  </li>
  
  
  
  <li>    }  </li>
  
  
  
  <li>});  </li>
 
 
 
 </ol></pre><p>呈现出来的UI:</p><p> 我们这样来设置其值：</p><pre>
 
 
 
 <ol>
  
  
  
  <li>//set percentage with a callback function  </li>
  
  
  
  <li>blue.setSliderValue(0.65, function(percentage) {  </li>
  
  
  
  <li>    // code goes here  </li>
  
  
  
  <li>});  </li>
 
 
 
 </ol></pre><p>【通用性】<br /> 当然，我们不仅可以将jSlider作为slider使用，有时候它也是一个progressbar: </p><p>(代码我就不贴了，直接在demo里查看 ???? )</p><p>【小结】 <br /> 通篇到这里就结束了，简单的介绍了一款jQuery插件的开发流程，以及开发中应该注意的细节，那么在下一篇的文章中我会向大家介绍如何打造一个通用型的 自动完成 插件。</p><p>live demo</p><p>source[google code]</p>            <p>
                名称栏目：<a href="http://www.shufengxianlan.com/qtweb/news41/509291.html">JQuery插件的开发真的有那么难吗</a>
                <br>
                网页路径：<a href="http://www.shufengxianlan.com/qtweb/news41/509291.html">http://www.shufengxianlan.com/qtweb/news41/509291.html</a>
            </p>
            <p>
                网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等
                                </p>
            <p class="adpic">
                <a href="https://www.cdcxhl.com/service/ad.html" target="_blank" class="ad">广告</a>
                <a href="" target="_blank" class="adimg"><img src=""></a>
            </p>
            <p class="copy">
                声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：
                <a href="https://www.cdcxhl.com/" target="_blank">创新互联</a>
            </p>
        </div>
        <div class="newsmorelb">
            <p>猜你还喜欢下面的内容</p>
            <ul>
                <li>
                        <a href="/qtweb/news40/509290.html">实现数据库到Redis的有效同步更新（数据库更新到redis）</a>
                    </li><li>
                        <a href="/qtweb/news39/509289.html">代码与标准如何对应</a>
                    </li><li>
                        <a href="/qtweb/news38/509288.html">简易助手好用吗？阿里云服务器管理助手</a>
                    </li><li>
                        <a href="/qtweb/news37/509287.html">和天秤女谈多久可以睡?（天秤女交往多久能睡)</a>
                    </li><li>
                        <a href="/qtweb/news36/509286.html">Linux命令加解密，在保护数据安全上威力无穷！(linux加解密命令)</a>
                    </li><li>
                        <a href="/qtweb/news35/509285.html">云服务器如何运行python程序</a>
                    </li><li>
                        <a href="/qtweb/news34/509284.html">谨慎使用Redis内存消耗过高（redis消耗内存过高）</a>
                    </li><li>
                        <a href="/qtweb/news33/509283.html">定位服务打开好还是关闭好，定位服务（定位服务打开好还是关闭好,定位服务不好）</a>
                    </li><li>
                        <a href="/qtweb/news32/509282.html">安全组规则SSH，RDP，ping，FTP的典型应用示例</a>
                    </li>                            </ul>
        </div>
    </div>
    <div class="col-lg-3 noneb">
        <div class="bkright" style="margin-top: 0">
            <p><a href="https://www.cdcxhl.com/news/sosuo/">搜索引擎优化知识</a></p>
            <ul>
                <li>
                        <a class="text_overflow" href="/qtweb/news19/62519.html">如何查看域名的A记录、MX记录、CNAME记录和NS记录？(如何查mx记录)</a>
                    </li><li>
                        <a class="text_overflow" href="/qtweb/news9/281259.html">电脑浏览器无法解析dns是怎么回事？（该域名尚未到期但解析不了）</a>
                    </li><li>
                        <a class="text_overflow" href="/qtweb/news47/286547.html">租用一台服务器大概要多少钱啊？IDC服务器租用多少钱一年</a>
                    </li><li>
                        <a class="text_overflow" href="/qtweb/news41/451041.html">云服务器装了系统会改变电脑原来的系统吗？（kvm的云服务器）</a>
                    </li><li>
                        <a class="text_overflow" href="/qtweb/news39/45139.html">创新互联CSS教程：响应式Web设计–图片</a>
                    </li><li>
                        <a class="text_overflow" href="/qtweb/news2/69602.html">Redis容量溢出时的处理策略（redis满了怎么办）</a>
                    </li><li>
                        <a class="text_overflow" href="/qtweb/news11/90711.html">一个服务器能否配多个域名？服务器域名多个</a>
                    </li><li>
                        <a class="text_overflow" href="/qtweb/news31/213781.html">东芝nas级硬盘和企业级硬盘哪个好？（硬盘录像机和监控服务器那个好？）</a>
                    </li><li>
                        <a class="text_overflow" href="/qtweb/news13/299913.html">轻量利用服务器配置选比较好的是哪一个？</a>
                    </li><li>
                        <a class="text_overflow" href="/qtweb/news35/265085.html">虚拟主机二级域名怎么设置的</a>
                    </li><li>
                        <a class="text_overflow" href="/qtweb/news44/82394.html">怎么联网激活windows？（windows如何使用匹配）</a>
                    </li><li>
                        <a class="text_overflow" href="/qtweb/news42/42392.html">创新互联百度小程序教程：书架同步功能介绍</a>
                    </li><li>
                        <a class="text_overflow" href="/qtweb/news46/238746.html">Linux进程UID权限管理，保障系统安全(linux权限进程uid)</a>
                    </li><li>
                        <a class="text_overflow" href="/qtweb/news6/377056.html">创新互联less教程：Less循环</a>
                    </li><li>
                        <a class="text_overflow" href="/qtweb/news0/92550.html">top的域名好吗？(top域名如何)</a>
                    </li>            </ul>
        </div>
        <div class="bkright tag">
            <p><a href="https://www.cdcxhl.com/hangye/link.html" target="_blank">各行业网站</a></p>
            <ul>
                <li class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                        <a href="https://www.cdcxhl.com/hangye/renzaowu/" target="_blank">人造雾</a>
                    </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                        <a href="https://www.cdcxhl.com/hangye/bangongkongjian/" target="_blank">办公空间设计</a>
                    </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                        <a href="https://www.cdcxhl.com/hangye/zbljbc/" target="_blank">自拌料搅拌车</a>
                    </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                        <a href="https://www.cdcxhl.com/hangye/hntjbj/" target="_blank">混凝土搅拌机</a>
                    </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                        <a href="https://www.cdcxhl.com/hangye/shiliangting/" target="_blank">石凉亭</a>
                    </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                        <a href="https://www.cdcxhl.com/hangye/gsdb/" target="_blank">工商代办</a>
                    </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                        <a href="https://www.cdcxhl.com/hangye/shidiao/" target="_blank">石雕</a>
                    </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                        <a href="https://www.cdcxhl.com/hangye/vr/" target="_blank">VR全景</a>
                    </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                        <a href="https://www.cdcxhl.com/hangye/suliaodai/" target="_blank">塑料袋</a>
                    </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                        <a href="https://www.cdcxhl.com/hangye/mutuopan/" target="_blank">木托盘</a>
                    </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                        <a href="https://www.cdcxhl.com/hangye/snjbc/" target="_blank">水泥搅拌车</a>
                    </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                        <a href="https://www.cdcxhl.com/hangye/hntjbc/" target="_blank">混凝土搅拌罐车</a>
                    </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                        <a href="https://www.cdcxhl.com/hangye/muzhiliangting/" target="_blank">木制凉亭</a>
                    </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                        <a href="https://www.cdcxhl.com/hangye/jiagu/" target="_blank">加固</a>
                    </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                        <a href="https://www.cdcxhl.com/hangye/wsjgd/" target="_blank">卫生间隔断</a>
                    </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                        <a href="https://www.cdcxhl.com/hangye/jbgc/" target="_blank">搅拌罐车</a>
                    </li>            </ul>
        </div>
    </div>
</div>
<div class="carousel-inner linkbg" style="background: #fff">
    <div class="container">
        <a href="http://www.cdkjz.cn/fangan/response/" target="_blank">响应式网站设计方案</a>　　 　<a href="http://seo.cdkjz.cn/" target="_blank">网络推广外包</a>　　 　<a href="http://www.cdkjz.cn/develop/" target="_blank">电商网站建设</a>　　 　<a href="https://www.cdxwcx.com/tuiguang/ruanwen.html" target="_blank">软文营销</a>　　 　<a href="http://www.sxjierui.cn/" target="_blank">双流能亿建站</a>　　 　<a href="http://www.cdfuwuqi.com/jigui/" target="_blank">成都机柜租用</a>　　 　<a href="http://m.xwcx.net/wangzhan/" target="_blank">成都定制高级网站建设</a>　　 　<a href="http://www.ledaz.cn/" target="_blank">成都小谭网创广告</a>　　 　<a href="http://www.cxhljz.cn/" target="_blank">成都网站设计</a>　　 　<a href="http://www.cqcxhl.com/" target="_blank">网站制作</a>　　 　<a href="http://seo.cdcxhl.cn/" target="_blank">成都网站推广</a>　　 　<a href="https://www.cdcxhl.com/" target="_blank">成都网站建设</a>　　 　<a href="https://www.scvps.cn/services/ssl/" target="_blank">SSL证书</a>　　 　<a href="https://www.cdcxhl.com/seo.html" target="_blank">seo优化排名</a>　　 　<a href="https://www.cdcxhl.com/jigui/" target="_blank">服务器机柜租用</a>　　 　<a href="http://www.cdiso.cn/" target="_blank">小谭建站</a>　　 　<a href="http://www.kswsj.cn/" target="_blank">成都网站建设</a>　　 　<a href="https://www.cdcxhl.com/security/" target="_blank">等级保护测评</a>　　 　<a href="https://www.cdcxhl.com/" target="_blank">网站制作</a>　　 　<a href="http://www.cxjianzhan.com/" target="_blank">seo优化</a>　　 　    </div>
</div>
<footer>
    <div class="carousel-inner footjz">

        <div class="container">
            <i class="icon iconfont zbw"></i>
            高品质定制 <i class="icon iconfont"></i>
            跨终端自动兼容 <i class="icon iconfont"></i>
            节约开发成本  <i class="icon iconfont"></i>
            开发周期短 <i class="icon iconfont"></i>
            一体化服务
            <button  type="button" class="btn  btn-default btn-lg" onClick="window.location.href='tencent://message/?uin=631063699&Site=&Menu=yes'"> 立即开始2800定制网站建设</button>
            <button  type="button" class="btn  btn-default btn-xs" onClick="window.location.href='tencent://message/?uin=631063699&Site=&Menu=yes'"> 2800定制网站建设</button>
        </div>
    </div>
    <div class="carousel-inner bqsy">
        <div class="container">
            <div class="lxfs">
                <h4 class="yutelnone">028-86922220 13518219792</h4>
                <h4 class="yutelblock"><a href="tel:02886922220">028-86922220</a> <a href="tel:13518219792">13518219792</a></h4>

                <a class="btn btn-default" href="tencent://message/?uin=532337155&Site=&Menu=yes" role="button">网站建设<span>QQ</span>：532337155</a>
                <a class="btn btn-default" href="tencent://message/?uin=631063699&Site=&Menu=yes" role="button">营销推广<span>QQ</span>：631063699</a>

                <a class="btn btn1 btn-default" href="mqqwpa://im/chat?chat_type=wpa&uin=532337155&version=1&src_type=web&web_src=oicqzone.com" role="button">网站制作<span>QQ</span>：532337155</a>
                <a class="btn btn1 btn-default" href="mqqwpa://im/chat?chat_type=wpa&uin=631063699&version=1&src_type=web&web_src=oicqzone.com" role="button">营销推广<span>QQ</span>：631063699</a>


                <a class="btn btn-default nonea" href="tencent://message/?uin=1683211881&Site=&Menu=yes" role="button">售后QQ：1683211881</a>
                <div class="dz">创新互联建站专注：
                        <a href="https://www.cdcxhl.com/" target="_blank">网站设计</a>
                        <a href="https://www.cdcxhl.com/" target="_blank">网站制作</a>
                        <a href="https://www.cdcxhl.com/" target="_blank">网站建设</a>
                    <address>地址：成都太升南路288号锦天国际A幢10楼</address>
                </div>
            </div>
            <div class="bzdh dz"><img src="https://www.cdcxhl.com/imges/bottom_logo.png" alt="创新互联">
                <p><a href="https://www.cdcxhl.com/menu.html" target="_blank">成都创新互联科技有限公司</a><br>
                    Tel：400-028-6601（7x24h）</p></div>
        </div>
    </div>
</footer>
</body>
</html>
<script>
      $.getJSON ("../../qtwebpic.txt", function (data) {
        var jsonContent = {
            "featured":data
        }
        var random = jsonContent.featured[Math.floor(Math.random() * jsonContent.featured.length)];
        $(".adpic .adimg").attr("href",random.link)
        $(".adpic img").attr("src",random.pic);
    })
</script>