Jquery plug-in writing (using the tab plug-in as an example)

I. Preface

Encapsulating a function of jquery into a plug-in is to facilitate reuse and provide efficiency.

Ii. Results

　　　　　　　　

Supports IE6 and the latest Chrome browser.

Iii. Plug-in code

Jquery. Tab. js

 (Function ($ ){
// 2010-11-26
$. FN. Extend ({
// Tab plug-in name
Xqhtab: function (options ){
// Default Value
VaR defaults = {
Tabselected: "tab_selected ",
Tabwidth: "100% ",
Autoheight: "true"
};

VaR Options = $. Extend (defaults, options );

Optional (this).css ("width", options. tabwidth );

// Tab this indicates the jquery object obtained through the current selector.
VaR tab = $ (". tab_menu ul li", this );
// Option content
VaR tabcontent = $ (". tab_box> Div", this );

If (options. autoheight! = "True "){
Tabcontent.css ("height", options. autoheight );
}

// Click the tab
Tab. Click (function (){
$ (This). addclass (options. tabselected). siblings (). removeclass (options. tabselected );
VaR curindex = tab. Index (this );
Tabcontent. eq (curindex). Show (). siblings (). Hide ();
});

// Return this makes the jquery method chained
Return this;
}
});
}) (Jquery );

 

 

It is difficult to understand the key code.

Iv. CSS code

Jquery.tab.css

 .tab{ width:98%;}
.tab_menu ul{ width:98%; list-style:none;}
.tab_menu li{ list-style:none; float:left; margin-right:4px; display:block; border-right:#4488BB solid 1px;border-left:#4488BB solid 1px; border-top:#4488BB solid 1px; cursor:pointer; color:#000; height:20px; width:auto; padding:5px;}
.tab_box{ border:solid #4488BB 1px; padding:4px; height:auto; width:98%; float:left;}
.tab_selected{ background:#4488BB;}
.tab_displayNone{ display:none;}
li{ background:#EEEEEE; list-style:none;}

V. Use of plug-ins

Code

     <script type="text/javascript">
        $(function() {
            $(".tab").XQHTab();
        });
</script>

<div class="tab">
<div class="tab_menu">
<ul>
<li class="tab_selected">JQuery</li>
<li>ExtJs</li>
<li>Sliverlight</li>
</ul>
</div>           
<div class="tab_box">
<div>Hello JQuery!</div>
<div class="tab_displayNone">Hello ExtJs!</div>
<div class="tab_displayNone">Hello Sliverlight!</div>
</div>
</div>

You can set the autoheight attribute to control the content height. The default value is true to automatically adapt to the height. tabwidth controls the tab width. The default value is 100%.

Vi. Summary

In the past, users used IE6 or ext or sliverlight for almost all-in-one development, making browser compatibility almost incomprehensible. After this test on IE6 and chorme by writing plug-ins by myself, the plug-ins are correctly displayed on IE6 at the beginning, but the style will be different when running to chrome. After query, it turns out to be a floating relationship.