zoukankan      html  css  js  c++  java
  • jQuery插件:tabBox(jq插件处女秀)

      最近对js以及jq产生了浓厚的兴趣,看到jq有很多很好用的插件,功能各异,包括webUI,jqGrid等等。心里萌发了制作属于自己的jq插件的想法。查了一下jq的官方插件编写文档(http://docs.jquery.com/Plugins/Authoring)以及文档中推荐的Mike Alsup写的一篇A Plugin Development Pattern。英语不是很好,但还是努力看下来(既学习到知识又能练习英语,何乐不为),照猫画虎的写了一个处女作——tabBox。

      顾名思义,这个插件就是方便的产生具有tab选项卡功能“盒子”的。看图一下就明白

    这样功能在网页上是非常肠炎宁个的,不论前台后台。

      在这,我首先提供了3个参数用于自定义插件,

    $.fn.tabBox.defaults = {
        width : 
    260,
        height : 
    200,
        basePath : 
    "tabBox/"
    };

      width和height定义“盒子”的宽度和高度,basePath用于定义使用插件的页面对插件文件夹的相对路径。这个选项的出现时不得已而为之,因为选项卡的样式中用到了图片,而必须要有一个基准路径才能正确找到图片的路径。这也是参照了一个叫jqtransform(http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/)的插件的做法,他也有个参数用于指定图片文件夹所在的位置。当然还有一种做法,就是想WebUI(http://www.jqueryui.com/)一样,样式写到css文件里,这样图片的引用就是先对与css文件的路径了,而这两个都是插件的组成部分,相对路劲是不变的。所以不用提供这个路径了。只是由于这个插件用到的样式比较少,所以没有采用这个方法。

      插件的原理很简单,核心的函数就是一个render(),用于渲染出tab的样式:

    render
    $.fn.tabBox.render = function() {
        $(
    ".tabBox").css({
            width : $.fn.tabBox.defaults.width
    +"px",
            height : $.fn.tabBox.defaults.height
    +"px",
            position : 
    "relative",
            border : 
    "1px #ccc solid",
            background : 
    "url("+$.fn.tabBox.defaults.basePath+"tabHead.gif) top left repeat-x"
        });
        $(
    ".tabBox h2").each(function(i){
            $(
    this).css({
                width : 
    "80px",
                height : 
    "30px",
                position : 
    "absolute",
                
    "border-top" : "none",
                cursor : 
    "pointer",
                left : 
    10+(i*80),
                background : 
    "url("+$.fn.tabBox.defaults.basePath+"tabNormal.gif) top right no-repeat",
                
    "text-align" : "center",
                
    "font-size" : "12px",
                
    "font-weight" : "normal",
                color : 
    "#06c",
                
    "line-height" : "22px"
            });
        });    
        $(
    ".tabBox div").each(function(){
            $(
    this).css({
                width : $.fn.tabBox.defaults.width
    +"px",
                height : ($.fn.tabBox.defaults.height
    -30)+"px",
                display : 
    "none",
                position : 
    "absolute",
                top : 
    "30px"
            });
        });
        $(
    ".tabBox h2.curTab").css({
            background : 
    "url("+$.fn.tabBox.defaults.basePath+"tabCurTab.gif) top center no-repeat",
            
    "font-weight" : "bolder"
        });
        $(
    ".tabBox h2.curTab + div").css({
            display : 
    "block"
        });
    };

    可以看到这个函数全都是设置样式的代码,(也让我体验了一下用jq设置css的快感,依然记得e.style.backgroud的时代~),这个函数保证了显示当前被激活的标签和对应的信息。另外,通过捕捉tab选项卡的click事件来改变当前的激活标签,再渲染一次就可以了。

    render
    $(".tabBox h2").click(function(){
       $(".tabBox h2").removeClass("curTab");
       $(this).addClass("curTab");
       $.fn.tabBox.render();
      });

      写完之后的一点思考:

    1、对插件自定义选项的做法看不太懂

    render
    // build main options before element iteration
        var opts = $.extend({}, $.fn.tabBox.defaults, options);
        // iterate and reformat each matched element
        return this.each(function() {
      $this = $(this);
      // build element specific options
      var o = $.meta ? $.extend({}, opts, $this.data()) : opts;

     这差不多是从Mike Alsup的文章中照搬过来的。照他的说法,好像是可以自定义整个插件的选项,还可以定义某一个特定元素的选项,可我试了一下,似乎不可以~。难道是我没看懂他说的?

    2、目前tab是捕捉click事件的,我想加强一下,可以自定义是捕捉click还是mouseover,是的,可以写两个事件处理函数。但怎么样来通过配置决定调用哪个处理程序呢?

    完整代码下载:/Files/coffee/tabBox.rar(上午的代码没有放jq,现在更新了,可以直接运行)

  • 相关阅读:
    无线鼠标换电池了
    Jython Interactive Servlet Console YOU WILL NEVER KNOW IT EXECLLENT!!! GOOD
    Accessing Jython from Java Without Using jythonc
    jython podcast cool isnt't it?
    Python里pycurl使用记录
    Creating an Interactive JRuby Console for the Eclipse Environment
    微软为AJAX和jQuery类库提供CDN服务
    Download A File Using Cygwin and cURL
    What is JMRI?这个是做什么用的,我真没看懂但看着又很强大
    用curl 发送指定的大cookie的http/https request
  • 原文地址:https://www.cnblogs.com/coffee/p/1666227.html
Copyright © 2011-2022 走看看