Home > Developer > JavaScript
Basic Format of jquery plug-in:
Copy codeThe Code is as follows:
(Function ($ ){
$. Fn. tab = function (options) {// The tab next to $. fn is the function name of this plug-in. You can make changes as you like.
Var defaults = {
// Related property settings
}
Var options = $. extend (defaults, options );
This. each (function (){
// Implemented function settings });
};
}) (JQuery );
Here is a tab plug-in for me to complete the above Code
Copy codeThe Code is as follows:
(Function ($ ){
$. Fn. tab = function (options ){
Var defaults = {
Eventname: "click", // trigger event, click as click, and mousemove as mouse
Titlekeyid: "tabtitle", // switch ID
Sedcss: "sed", // CSS when selected
Nosedcss: "nosed" // CSS when not selected
}
Var options = $. extend (defaults, options );
This. each (function (){
Var tab = $ (this );
// Bind events
$ (Tab). find ("li"). bind (options. eventname, function (){
$ ("#" + Options. titlekeyid). find ("li"). attr ("class", options. nosedcss );
$ (This). attr ("class", options. sedcss );
$ ("#" + Options. titlekeyid + "info"). find ("div" ).css ("display", "none ");
$ ("#" + $ (This). attr ("id") + "info" ).css ("display", "block ");
// Individual JS capabilities are still limited, and the code is not well written.
});
});
};
}) (JQuery );
I think you have used some jquery plug-ins. Here I will look at the code used by the plug-ins:
(Code 2)
Copy codeThe Code is as follows:
<Script type = "text/javascript">
$ (). Ready (function (){
$ ("# Tabtitle"). tab ({eventname: "mousemove", sedcss: "sed "});
})
</Script>
Use the above two sections of code to describe
Copy codeThe Code is as follows:
$ ("# Tabtitle") indicates the location where you want to use it. If you have a little understanding of jquery, all the kids shoes know what it means,
. Tab is the function name defined by this plug-in. For more information, see $. fn. tab in Code 1.
. Tab ({eventname: "mousemove", sedcss: "sed"}); eventname and sedcss are the attribute values defined in (Code 1) var defaults =. If we do not need to change the attribute value, we will use the default attribute value, so the plug-in should use this
<Script type = "text/javascript">
$ (). Ready (function (){
$ ("# Tabtitle"). tab ();
})
</Script>
Complete the Page code:
Copy codeThe Code is as follows:
<Html>
<Head>
<Title> tab test </title>
<Script type = "text/javascript" src = "jquery. js">
</Script>
<Script type = "text/javascript" src = "jquery. joyleetab. js">
</Script>
<Script type = "text/javascript">
$ (). Ready (function (){
$ ("# Tabtitle"). tab ({eventname: "mousemove", sedcss: "sed "});
})
</Script>
<Link href = "css.css" rel = "stylesheet" type = "text/css">
</Head>
<Body>
<Ul id = "tabtitle"> // The ID corresponds to the ID in $ ("# tabtitle"). The ID of LI is the number added at the end of the table.
<Li id = "tabtitle1" class = "sed"> asdfasfd </li>
<Li id = "tabtitle2"> asdfasfd </li>
<Li id = "tabtitle3"> asdfasfd </li>
<Li id = "tabtitle4"> asdfasfd </li>
<Li id = "tabtitle5"> asdfasfd </li>
</Ul>
<Div id = "tabtitleinfo"> // The ID here is the ID in ul. The ID is the number added at the end and "info" respectively"
<Div id = "tabtitle1info"> 000000 </div>
<Div id = "tabtitle2info" style = "display: none"> 111111 </div>
<Div id = "tabtitle3info" style = "display: none"> 22222 </div>
<Div id = "tabtitle4info" style = "display: none"> 33333 </div>
<Div id = "tabtitle5info" style = "display: none"> 44444 </div>
</Div>
</Body>
</Html>
This article focuses on how to create the jquery plug-in. The code in the example still needs to be optimized. Please forgive me.
Package and download source code
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
