Home > Developer > JavaScript
Put an image first, and I will change the code.
<Html> <pead> <title> 163 mailbox tab effect </title> <style> ul, li {margin: 0; padding: 0; list-style: none; /* for close location */position: relative;} li {display: block; width: 130px; height: 25px; float: left; cursor: pointer; overflow: hidden ;} span {font-size: 10pt; color: #22b5d9; font-weight: bold; display: block ;}# asgardCard li {font-size: 10pt; font-weight: bold; color: #22b5d9; border: 1px solid #22b5d9; margin: 10px; text-align: center; line-height: 1.5 ;} </style> <style>/* Asgard CardProgram Css Start */# itemsPanel, # itemsPanel li {margin: 0; padding: 0; list-style: none; /* for close location */position: relative;}/* Clear Float: Referrence --> http://www.blueidea.com/tech/web/2005/3065.asp#// * There is defect: the attribute-content hold one line place. */ul: after {content :". "; display: block; height: 0; clear: both; visibility: hidden;} # cardContent {height: auto; min-height: 300px; border: 2px solid # cccccc; clear: both ;}# itemsPanel li {display: block; width: 130px; height: 25px; float: left; cursor: pointer; overflow: hidden ;}# cardFrame {width: 100%; height: 100%; border: 1px solid # ffffff; margin: 0 ;}. active {background: url ('HTTP: // www.jb51.net//upload/20070928200410937.jpg') 0 0 no-repeat ;}. default {background: url ('HTTP: // www.jb51.net//upload/20070928200410937.jpg') 0-25px no-repeat ;}. title {font-size: 10pt; font-weight: bold; line-height: 2; padding-left: 10px; display: block; width: 105px; height: 25px ;} li. close {position: absolute; top: 9px; left: 115px; display: block; width: 10px; height: 10px; overflow: hidden ;}. active. close {background: url ('HTTP: // progress) 0-50px no-repeat ;}. default. title {color: #999999 ;}. active. title {color: #000000 ;}. active. close: hover {background: url ('HTTP: // callback)-10px-50px no-repeat ;}. default. close {background: url ('HTTP: // response)-20px-50px no-repeat ;}. default. close: hover {background: url ('HTTP: // callback)-30px-50px no-repeat ;} /* Asgard CardProgram Css End */</style> </pead> <body> 1. sample Code: <ul> <li class = "active"> <nobr class = "title"> Kiss </nobr> </li> <li class = "default"> <nobr class = "title"> Andy </nobr> </li> </ul> <p/> note: for the code of DOM dynamic organization, see <p style = "clear: both;"/> <p/> 2. click the table below, change content <ul id = "asgardCard"> <li title = "blueidea"> blue ideal </li> <li title = "google"> Google China </li> <li title = "email126"> Email-126 </li> <li title = "ngacn"> azelas </li> </ul> <p style = "clear: both; "/> 3. <ul id = "itemsPanel"> </ul> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Code Description
1. My CSS is divided into two sections. The first section is used for this purpose and can be customized by myself. The second section is required for this framework.
2. I also split the script into two sections. The first section is required and the second section is customized by the customer. The code here is for an implementation reference.
3. The following HTML code is a required container code for reference implementation.
Copy codeThe Code is as follows:
<Ul id = "itemsPanel">
</Ul>
<Div id = "cardContent">
<Iframe id = "cardFrame">
</Iframe>
</Div>
Usage:
1. ItemsPanel object
Constructor: new Asgard. CardProgram. ItemsPanel ("itemsPanel", "cardFrame ").
Two parameters are accepted. The first parameter is the ul container ID, and the second parameter is the irame ID of the content corresponding to the tag to be displayed.
The ItemPanel object uses the addItem method to add an Item.
If you need to create multiple ItemsPanel instances, refer to my example.
2. Item object
Constructor: new Asgard. CardProgram. Item ("index", "Space-Time originality", "http://www.skst.com.cn", true) accepts 4 parameters
The first is the id of the tab to be created, the second is the title of the tab to be created, the third is the URL corresponding to this tab, and the fourth is whether it is the homepage, because we may plan to create a default page that cannot be closed. Of course, if you set all to true, it is the normal tab effect.
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
