Home>

Here demonstrate simple implementations of tab binders (web page tags), zebra crossing, masking layers, pop-up layers,The js file inside can be saved as a js code call,It can also be copied and used in this website.This small web page includes the current popular wind page labels, pop-up layers, and zebra crossing effects.Very practical.

The screenshot of the running effect is as follows:

The online demo address is as follows:

The specific code is as follows:

<! Doctype html public "-//w3c //dtd xhtml 1.0 transitional //en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>a simple implementation of the tab binder, zebra crossing, masking layer)</title>
<style type="text/css">
* {margin:0;padding:0;list-style:none;font-size:12px;line-height:20px;font-family:arial;}
h1, h2, h3 {font-size:14px;margin:10px 0;}
hr {margin:10px 0;height:1px;clear:both;border:0;background:#c00;}
a:link, a:visited {color:#164a84;text-decoration:none;}
a:hover, a:active {color:#c00;text-decoration:underline;}
table {border-collapse:collapse;border:1px solid #ccc;border-width:1px 1px 0 0;margin-left:20px;}
td, th {padding:5px;border:1px solid #ccc;border-width:0 0 1px 1px;}
</style>
<script type="text/javascript">
function bthide (id) {var div=document.getelementbyid (id);if (div) {div.style.display="none"}}
function btshow (id) {var div=document.getelementbyid (id);if (div) {div.style.display="block"}}
function bttabremove (index, head, divs) {
 var tab_heads=document.getelementbyid (head);
 if (tab_heads) {
 var lis=tab_heads.getelementsbytagname ("li");var as=tab_heads.getelementsbytagname ("a");
 for (var i=0;i<as.length;i ++) {lis [i] .classname="";bthide (divs + "_" + i);if (i == index) {lis [i] .classname="current";}}
 btshow (divs + "_" + index)}
}
function bttabon (head, divs) {
 var tab_heads=document.getelementbyid (head);
 if (tab_heads) {
 bttabremove (0, head, divs);
 var alis=tab_heads.getelementsbytagname ("a");
 for (var i=0;i<alis.length;i ++) {
 alis [i] .num=i;
 alis [i] .onclick=function () {bttabremove (this.num, head, divs);this.blur ();return false;}
 alis [i] .onfocus=function () {bttabremove (this.num, head, divs)}}}
}
function btzebrastrips (id, tag) {
 var listid=document.getelementbyid (id);
 if (listid) {
 var tags=listid.getelementsbytagname (tag);
 for (var i=0;i&tags.length;i ++) {
 tags [i] .classname +="barry" + i%2;
 tags [i] .onmouseover=function () {this.classname +="hover"}
 tags [i] .onmouseout=function () {this.classname=this.classname.replace ("hover", "")}}}
}
function btpopload (showid) {//Mask generates div + iframe
 var h=math.max (document.documentelement.scrollheight, document.documentelement.clientheight) + "px";
 var w=document.documentelement.scrollwidth + "px";
 var popcss="background:#000;opacity:0.3;filter:alpha (opacity=30);position:absolute;left:0;top:0;overflow:hidden;"
 var exsit=document.getelementbyid ("popbox");
 if (! exsit) {
  pop_box=document.createelement ("div");pop_box.id="popbox";
  document.getelementsbytagname ("body") [0] .appendchild (pop_box);
  pop_box.style.csstext=popcss;pop_box.style.zindex="10";
  pop_box.style.height=h;pop_box.style.width=w;
  pop_iframe=document.createelement ("iframe");pop_iframe.id="popiframe";
  document.getelementsbytagname ("body") [0] .appendchild (pop_iframe);
  pop_iframe.style.csstext=popcss;pop_iframe.style.zindex="9";
  pop_iframe.style.height=h;pop_iframe.style.width=(parseint (w) -5) + "px";
 }
 btshow ("popiframe");btshow ("popbox");btshow (showid);
 pop_win=document.getelementbyid (showid);
 pop_win.style.position="absolute";
 pop_win.style.zindex="11";
 pop_win.style.top=document.documentelement.scrolltop + document.documentelement.clientheight/2-pop_win.offsetheight/2 + "px";
 pop_win.style.left=(document.documentelement.clientwidth/2-pop_win.offsetwidth/2) + "px";
}
function btpopshow (bid, did) {
 var uploadbtn=document.getelementbyid (bid);
 if (uploadbtn) {uploadbtn.onclick=function () {btpopload (did);return false;}}
}
function btpophide (bid, did) {
 var uploadbtn=document.getelementbyid (bid);
 if (uploadbtn) {uploadbtn.onclick=function () {bthide (did);bthide ("popbox");bthide ("popiframe");return false;}}
}
</script>
</head>
<body>
<style type="text/css">
.tabs {position:relative;width:300px;height:260px;border:1px solid #ccc;margin:0 20px;}
.tabs ul {width:200px;height:21px;overflow:hidden;position:absolute;top:0;left:0;}
.tabs ul li {float:left;width:60px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;text-align:center;background:#f5f5f5;}
.tabs ul li.current {border-bottom:0;background:#fff;}
.tabs ul li a {color:#4a4a4a;display:block;width:100%;font-size:14px;text-decoration:none;}
.tabs ul li a:visited {color:#4a4a4a;}
.tabs .tablist {height:260px;overflow:hidden;}
.tabs .s {width:300px;height:460px;overflow:hidden;text-align:center;font-size:40px;color:#4a4a4a;line-height:160px;background:#fff;}
.tabs a.more {background:#fff;color:#4a4a4a;line-height:20px;float:right;padding:0 5px;font-family:verdana;}
</style>
<h2>1:tab</h2>
<div>
 <ul>
  <li><a href="#s_0">s1</a></li>
  <li><a href="#s_1"&s;s2</a></li>
  <li><a href="#s_2"&s;s3</a></li>
 </ul>
 <div>
  <div>
   <a href="#">more s1</a>
   s1 content
  </div>
  <div>
   <a href="#">more s2</a>
   s2 content
  </div>
  <div>
   <a href="#">more s3</a>
   s3 content
  </div>
 </div>
</div>
<script type="text/javascript">bttabon ("head", "s")</script>
<hr />
<style type="text/css">
.barry1 {background:#f5f5f5;}
.barry0 {background:#fff;}
.hover {background:#ddd;}
</style>
<h2>2:Zebra crossing</h2>
<div>
<table cellpadding="0" cellspacing="0"&​​gt;
 <thead><tr><td>Vendor Guidance Price</td><td>Dealer Quote</td><td>Promotional Information ;/td></tr></thead>
 <tr><td>190,800</td><td>2008-12-15</td></tr>
 <tr><td>190,800</td><td>2008-12-15</td></tr>
 <tr><td>190,800</td><td>2008-12-15</td></tr>
 <tr><td>190,800</td><td>2008-12-15</td></tr>
 <tr><td>190,800</td><td>2008-12-15</td></tr>
 <tr><td>190,800</td><td>2008-12-15</td></tr>
 <tr><td>190,800</td><td>2008-12-15</td></tr>
</table>
</div>
<style type="text/css">
.ul {margin:20px 0 0 20px;width:300px;border:1px solid #ccc;border-bottom:0;}
.ul li {height:20px;padding:3px 5px;border-bottom:1px solid #ccc;}
</style>
<ul>
 <li><span>[<a href="#">Enterprise</a>]</span><a href="#">Up to 19 words per line</a></li>
 <li><span>[<a href="#">Code</a>]</span><a href="#"></a></li>
 <li><span>[<a href="#">Enterprise</a>]</span><a href="#">Shanghai GM Dingdang Global Club Hill<>;/a></li>
 <li><span>[<a href="#">Special effects</a>]</span><a href="#">Promote harmonious development and build a green enterprise</a></li>
 <li><span>[<a href="#">Enterprise</a>]</span><a href="#">Discover business wisdom to witness progress ideas</a></li>
 <li><span>[<a href="#">Programming</a>]</span><a href="#">Achieve the dream of car repair "golden blue collar"<;/a></li>
 <li><span>[<a href="#">source</a>]</span><a href="#">Discover Business Wisdom Witness Progressive Thoughts //a></li>
 <li><span>[<a href="#">Style</a>]</span><a href="#">Achieve the dream of car repair "golden blue collar"<;/a></li>
 <li><span>[<a href="#">Program</a>]</span><a href="#">Discover Business Wisdom Witness Progressive Thoughts //a></li>
 <li><span>[<a href="#">Industry</a>]</span><a href="#">Achieve the dream of auto repair "golden-collar"<;/a></li>
</ul>
<script type="text/javascript">btzebrastrips ("hot_car", "tr");btzebrastrips ("ul", "li")</script>
<hr />
<style type="text/css">
.pop {border:3px solid skyblue;width:400px;background:#fff;padding:5px;display:none;}
</style>
<h2>3:Mask layer</h2>
<a href="#">Click popup</a>
<div><a href="#">Click to close</a></div>
<script type="text/javascript">btpopshow ("open", "pop");btpophide ("close", "pop")</script>
<hr />
</body>
</html>
  • Previous File upload function based on Ajax and HTML5 in MVC
  • Next ASP display page execution time method