| 導購 | 订阅 | 在线投稿
分享
 
 
 

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操作.這種表現形式是死的!但要靈活運用人家寫代碼的思維!如果你只學習人家的表面形式. 哪沒什麽好說的!
󰈣󰈤
 
 
 
>>返回首頁<<
 
 
 
 
 熱帖排行
 
王朝網路微信公眾號
微信掃碼關註本站公眾號 wangchaonetcn
 
  免責聲明:本文僅代表作者個人觀點,與王朝網絡無關。王朝網絡登載此文出於傳遞更多信息之目的,並不意味著贊同其觀點或證實其描述,其原創性以及文中陳述文字和內容未經本站證實,對本文以及其中全部或者部分內容、文字的真實性、完整性、及時性本站不作任何保證或承諾,請讀者僅作參考,並請自行核實相關內容。
 
© 2005- 王朝網路 版權所有