Jquery plug-ins are rich and many of them are very useful. I recently learned how to create jquery plug-ins and found that jquery plug-ins are actually very simple. Here I will introduce them.
Basic Format of jquery plug-in:
(Function ($) {$. FN. Tab = function (options) {// The tab next to $. FN is the function name of this plug-in. You can modify var defaults = {// relevant property settings} var Options = $. Extend (defaults, options) with your own preferences );This. Each (function () {// set the implemented Function
}) ;}}) (Jquery );
Here is a tab plug-in for me to complete the aboveCode
(Function ($) {$. FN. Tab = function (options) {var defaults = {eventname :" Click ", // Trigger event, click as click, and mousemove as mouse Titlekeyid :" Tabtitle ", // Switch ID Sedcss :" Sed ",// Select the CSS 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 "Developer.css (" Display "," None "); $ (" # "+ $ ( This ). ATTR (" ID ") +" Info "Developer.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)
<SCRIPT type ="Text/JavaScript"> $ (). Ready (function () {$ ("# Tabtitle"). Tab ({eventname :"Mousemove", Sedcss :"Sed"}) ;}) </SCRIPT>
Use the above two sections of code to describe
$ ("# Tabtitle") Indicates the place where you want to use it. If you have a little understanding of jquery, you will 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"}); In eventname and sedcss are (Code 1) var defaults ={}; defined attribute values. 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:
<HTML> 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"), and the ID of Li is the number added at the end. <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" <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> </body>
This article focuses on how to create the jquery plug-in. The code in the example still needs to be optimized. Please forgive me.
The final attachment source code: http://files.cnblogs.com/joylee/tab.rar
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
