| 订阅 | 在线投稿
分享
 
 
 

javascript+css 标签显示方式的思考收藏

来源:互联网网民  宽屏版  评论
2008-09-09 07:29:09

星期天看了很多国外的图书出版商的网站!发现Sams的标签显示方式的实践思路不错!标签显示的实践方式一般都要用到:javascript,来动态改变div的显示和隐藏.来看看人家写的JS代码吧:

<script type="text/javascript">

//<![CDATA[

//标签的数组,如果让我写,我想不到会用这个保存

var tabArray = new Array();

//默认显示哪个标签

function showDefaultTab(){

//show 'Description' tab by default, else show first

if(!showTab('item1')){

displayToggle(tabArray[0]+"_container",true,'container on');

document.getElementById(tabArray[0]).className = 'selected';

}

}

//改变内容盒的隐显,并重绘显示样式:感觉有点像配适器模式

function showTab(tabID){

var found = false;

for(var i=0; i < tabArray.length; i++){

if(tabArray[i] != tabID){

displayToggle(tabArray[i]+"_container",false, 'container');

document.getElementById(tabArray[i]).className = '';

}else{

displayToggle(tabArray[i]+"_container",true,'container on');

document.getElementById(tabArray[i]).className = 'selected';

found = true;

}

}

return found;

}

//showtab函数会调用这个函数来隐显内容盒

function displayToggle(id, show, newClass){

var obj = document.getElementById(id);

if(obj != null){

if(show){

obj.style.visibility="visible";

obj.style.display="block";

}else{

obj.style.visibility="hidden";

obj.style.display="none";

}

if(newClass != null)

obj.className = newClass;

}

}

//]]>

</script>

看看HTML的代码吧!相信大家都猜了个大概:

<div id="sitepage">

<div id="productBSS" class="tabwidget">

<ul class="tabs">

<li id="item1">

<a id="info3" href="#info3" onclick="showTab('item1'); return false;">Description</a>

</li>

<script language="JavaScript">

tabArray.push('item1');

</script>

<li id="item2">

<a id="info8" href="#info8" onclick="showTab('item2'); return false;">Sample Content</a>

</li>

<script language="JavaScript">

tabArray.push('item2');

</script>

</ul>

</div>

<div id="bssContent">

<div id="item1_container">

<!--detail content-->

</div>

<div id="item2_container">

<!--detail content-->

</div>

</div>

<script language="JavaScript">

showDefaultTab();

</script>

</div>

最后是CSS的样式定义:

<style type="text/css">

<!--

body {margin:150px 0 0 0;font-size:0.8em;font-family:"Lucida Grande", Arial, Helvetica, sans-serif;}

div#sitepage{ margin:0 0 0 184px; padding:0; width:400px;height:auto;}

div#productBSS { clear:both; }

div#bssContent { margin:-1px 0 0 0; padding:1em; border-right:1px solid #C7C8CA; border-left:1px solid #C7C8CA; border-bottom:1px solid #C7C8CA; border-top:1px solid #C7C8CA; }

/* - Tab Widget (blog sidebar) - */

div.tabwidget { border-left: 1px solid #C7C8CA; position: relative; }

/* tab control */

div.tabwidget ul.tabs { list-style: none; margin: 0; padding: 0 0 1px 0; height: 2em; border-bottom: 1px solid #C7C8CA; }

div.tabwidget ul.tabs li { display: block; float: left; background-color:#EEE; border: 1px solid #C7C8CA; border-width: 1px 1px 1px 0; padding: 0 1em; line-height: 2em; margin: 0; }

div.tabwidget ul.tabs li.selected { background-color: #FFF; border-bottom: 1px solid #FFF; }

/* layer control */

div.tabwidget div.container { display: none; clear: both; border: 1px solid #C7C8CA; border-width: 0 1px 1px 0; position: relative; }

div.tabwidget div.on { display: block; }

/* Content control */

:link,:visited { text-decoration:none; }

a:link { color:#004F7F; }

a:visited { color:#2E87B2; }

a:hover, a:active { color:#004F7F; text-decoration:underline; }

-->

</style>

最值的学习的是:javascript数组在这过程的应用!有人会说!硬编码不是更好么!不就少了至少一个函数和两个push操作.这种表现形式是死的!但要灵活运用人家写代码的思维!如果你只学习人家的表面形式. 哪没什么好说的!

 
特别声明:以上内容(如有图片或视频亦包括在内)为网络用户发布,本站仅提供信息存储服务。
 
星期天看了很多国外的图书出版商的网站!发现Sams的标签显示方式的实践思路不错!标签显示的实践方式一般都要用到:javascript,来动态改变div的显示和隐藏.来看看人家写的JS代码吧: <script type="text/javascript"> //<![CDATA[ //标签的数组,如果让我写,我想不到会用这个保存 var tabArray = new Array(); //默认显示哪个标签 function showDefaultTab(){ //show 'Description' tab by default, else show first if(!showTab('item1')){ displayToggle(tabArray[0]+"_container",true,'container on'); document.getElementById(tabArray[0]).className = 'selected'; } } //改变内容盒的隐显,并重绘显示样式:感觉有点像配适器模式 function showTab(tabID){ var found = false; for(var i=0; i < tabArray.length; i++){ if(tabArray[i] != tabID){ displayToggle(tabArray[i]+"_container",false, 'container'); document.getElementById(tabArray[i]).className = ''; }else{ displayToggle(tabArray[i]+"_container",true,'container on'); document.getElementById(tabArray[i]).className = 'selected'; found = true; } } return found; } //showtab函数会调用这个函数来隐显内容盒 function displayToggle(id, show, newClass){ var obj = document.getElementById(id); if(obj != null){ if(show){ obj.style.visibility="visible"; obj.style.display="block"; }else{ obj.style.visibility="hidden"; obj.style.display="none"; } if(newClass != null) obj.className = newClass; } } //]]> </script> 看看HTML的代码吧!相信大家都猜了个大概: <div id="sitepage"> <div id="productBSS" class="tabwidget"> <ul class="tabs"> <li id="item1"> <a id="info3" href="#info3" onclick="showTab('item1'); return false;">Description</a> </li> <script language="JavaScript"> tabArray.push('item1'); </script> <li id="item2"> <a id="info8" href="#info8" onclick="showTab('item2'); return false;">Sample Content</a> </li> <script language="JavaScript"> tabArray.push('item2'); </script> </ul> </div> <div id="bssContent"> <div id="item1_container"> <!--detail content--> </div> <div id="item2_container"> <!--detail content--> </div> </div> <script language="JavaScript"> showDefaultTab(); </script> </div> 最后是CSS的样式定义: <style type="text/css"> <!-- body {margin:150px 0 0 0;font-size:0.8em;font-family:"Lucida Grande", Arial, Helvetica, sans-serif;} div#sitepage{ margin:0 0 0 184px; padding:0; width:400px;height:auto;} div#productBSS { clear:both; } div#bssContent { margin:-1px 0 0 0; padding:1em; border-right:1px solid #C7C8CA; border-left:1px solid #C7C8CA; border-bottom:1px solid #C7C8CA; border-top:1px solid #C7C8CA; } /* - Tab Widget (blog sidebar) - */ div.tabwidget { border-left: 1px solid #C7C8CA; position: relative; } /* tab control */ div.tabwidget ul.tabs { list-style: none; margin: 0; padding: 0 0 1px 0; height: 2em; border-bottom: 1px solid #C7C8CA; } div.tabwidget ul.tabs li { display: block; float: left; background-color:#EEE; border: 1px solid #C7C8CA; border-width: 1px 1px 1px 0; padding: 0 1em; line-height: 2em; margin: 0; } div.tabwidget ul.tabs li.selected { background-color: #FFF; border-bottom: 1px solid #FFF; } /* layer control */ div.tabwidget div.container { display: none; clear: both; border: 1px solid #C7C8CA; border-width: 0 1px 1px 0; position: relative; } div.tabwidget div.on { display: block; } /* Content control */ :link,:visited { text-decoration:none; } a:link { color:#004F7F; } a:visited { color:#2E87B2; } a:hover, a:active { color:#004F7F; text-decoration:underline; } --> </style> 最值的学习的是:javascript数组在这过程的应用!有人会说!硬编码不是更好么!不就少了至少一个函数和两个push操作.这种表现形式是死的!但要灵活运用人家写代码的思维!如果你只学习人家的表面形式. 哪没什么好说的!
󰈣󰈤
 
 
 
>>返回首页<<
 
 热帖排行
 
 
 
静静地坐在废墟上,四周的荒凉一望无际,忽然觉得,凄凉也很美
©2005- 王朝网络 版权所有