<!doctype HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/ Xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title> Effect Code </title>
<script language= "Web Effects" >
$.tabs = function () {/*main object*/}$.tabs.initialize = function ()
{
var tabcount = 3, p, str;
var previoustab = 0; /*0=default*/
$.tabs.parameters = P = [];
for (var i = 0; i < arguments.length; i++)
P[i] = arguments[i];
Construct tabbed View
for (var str = "<div class = ' view ' style = ' position:absolute; top:26px; left:2px; Width: "+ (parseint (p[1])-6) +"; Height: "+ (parseint (p[2])-4-26) +"; ></div><div style = ' width: + p[1] + '; height:32px; ' > ", i = 0; I < p[Tabcount]; i++)
STR + + "<div class = ' tab ' style = ' float:left; ' id = '" + i + "' >" + (P[4][i]) + "</div>"
STR + + "</div>";
Adjust view
$ ("#" + p[0]). CSS tutorial ({width:p[1], height:p[2]});
$ ("#" + p[0]). html (str);Load default view and highlight default tab
$ ("#" + p[0] + ". View"). HTML ($ ("#" + p[5][0]). HTML ());
$ ("#" + p[0] + "#0"). AddClass ("on");Attach onclick events to all tabs! ~and Take care of tab highlighting
$ ("#" + p[0] + ". tab"). Click (function () {
var id = this.id;
if (ID!= previoustab) {
$ ("#" + p[0] + "#" + previoustab). Removeclass ("on");
$ ("#" + p[0] + "#" + ID). addclass ("on");
$ ("#" + p[0] + ". View"). HTML ($ ("#" + P[5][id]). HTML ());
Previoustab = ID;
}
});
}
</script>
<body>
The plug-in's jquery object will take the primary application object, in this case the ID name of the Mytabbedview. The code will write the internal display care for this application area itself, so there is no need to write any extra HTML. Note that the code works properly and considers this to be a tabbed example, restricted to each of the tag-type design initialization calls to one of the scenic spots. It will be possible to consolidate this code by providing an initialization interface that requires multiple areas of multiple partitions to create a single page view of the Pages tab. Like other plug-ins, I wrote for the Authentic association, and this trivial task was to develop my plugin code into the web development implementation of my website. Now that we have identified the main application object Mytabbedview, it's time for the next step. Let's create some labels for us to view the contents of a Web page<div id = "Mytabbedview" ></div>
<div id = "Page1" >page 1<br/>description of jquery tabs plugin</div>
<div id = "Page2" >page 2<br/>how to use this plugin</div>
<div id = "Page3" >page 3<br/>download plugin</div>Initializing and executing the jquery tabs plugin
<script type = "Text/javascript" >
Initialize plugin code
$ (document). Ready (function () {Jquery.tabs.initialize ("Mytabbedview",
"300px", "150px",
[' description ', ' How to use ', ' Download '],
[' Page1 ', ' page2 ', ' page3 ']);});
</script>
We mytabbedview the plug-in tabs.initialize functionality through the placeholder for the main application. Then we look through our tabs for horizontal and vertical dimensions: 300px and 150 pixels respectively. Then we pass an array of two strings. The first array represents the name of the label. The second array represents the ID tag of the Web page linked to. If you want to create more than three tags, simply enlarge the same array in the way all the above code shows, don't forget to specify the unique ID with other pages (1th, 2nd, ...). Paggen). The last Word Label View interface provides an easy way to display information that is associated in one place. This jquery plugin is created to take a tabbed view of the minimum parameters required. This plugin can be further improved by providing an interface to create multiple tabs on one page of view, but I'll leave it to you. jquery once again shows how easy it can be as a complex thing to create a tabbed view
</body>
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
