歡迎來到Linux教程網
設為首頁 加入收藏
Linux教程網
Linux教程網
Linux教程網
您现在的位置： Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

簡單的jQuery選項卡插件

其實像這類選項卡的插件網上也很多，只是個人覺得自己弄一個更好，畢竟自己弄的東西，自己修改起來也輕松。

原理其實也是很簡單的，關鍵在於樣式的定義。

原本想直接使用jquery的 ui，無奈懶得理，感覺jquery ui很強大，但是用起來也很麻煩，要引用的樣式也多。主要是樣式不好修改。

並且我也只想使用選項卡的功能，何必整這麼多樣式呢。最主要的還是不好修改樣式。

  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head runat="server">  
  4.     <title></title>  
  5.     <script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>  
  6.     <style type="text/css">  
  7.         a {  
  8.             text-decoration: none;  
  9.         }  
  10.         ul, li, p {  
  11.             list-style-type: none;  
  12.             margin: 0px;  
  13.             padding: 0px;  
  14.             font-size: 12px;  
  15.         }  
  16.         #tabs {  
  17.             width: 600px;  
  18.             border: solid 1px #dddddd;  
  19.             margin: 50px auto;  
  20.             padding: 5px;  
  21.             overflow: hidden;  
  22.             border-top-left-radius: 4px;  
  23.             border-top-right-radius: 4px;  
  24.             border-bottom-left-radius: 4px;  
  25.             border-bottom-right-radius: 4px;  
  26.         }  
  27.         #tabs ul.tabs_header {  
  28.             display: block;  
  29.             position: relative;  
  30.             border-top-left-radius: 4px;  
  31.             border-top-right-radius: 4px;  
  32.             border: 1px solid #aaaaaa;  
  33.             background-color: #cccccc;  
  34.             padding: 5px 5px 0px;  
  35.             clear: both;  
  36.             height: 26px;  
  37.             line-height: 26px;  
  38.         }  
  39.         #tabs ul.tabs_header li {  
  40.             border: solid 1px #d3d3d3;  
  41.             border-bottom: 0 none !important;  
  42.             float: left;  
  43.             list-style: none outside none;  
  44.             margin: 0px 5px;  
  45.             position: relative;  
  46.             top: 1px;  
  47.             height: 24px;   
  48.             /*此處要加上背景顏色，否則ie6下沒有邊框,（奇怪）有時在ie6下邊框會不出現，剛剛又試了了一下居然又不出現問題了*/  
  49.             background-color: #F2F2F2;   
  50.             /*圓角樣式，較新版本的浏覽器才支持，ff8.0支持，ie只有ie9支持*/  
  51.             border-top-left-radius: 4px;  
  52.             border-top-right-radius: 4px;  
  53.             padding: 0px 5px;  
  54.         }  
  55.         #tabs .tabs_header li a {  
  56.             color: #333;  
  57.         }  
  58.         #tabs .tabs_header li.hover {  
  59.             border: solid 1px #AAAAAA;  
  60.             background-color: #E4E4E4;  
  61.         }  
  62.         #tabs .tabs_header li.active {  
  63.             padding-bottom: 1px;  
  64.             margin-bottom: 0px;  
  65.             border: solid 1px #AAAAAA;  
  66.             background-color: #FFFFFF;  
  67.         }  
  68.           
  69.         #tabs div.tabs_content {  
  70.             border: solid 1px #AAAAAA;  
  71.             padding: 10px;  
  72.             border-top: none;  
  73.             overflow: hidden;  
  74.         }  
  75.     </style>  
  76. </head>  
  77. <body>  
  78.     <div id="tabs">  
  79.         <ul class="tabs_header">  
  80.             <li><a href="###">選項卡一</a></li>  
  81.             <li><a href="###">選項卡二</a></li>  
  82.             <li><a href="###">選項卡三</a></li>  
  83.         </ul>  
  84.         <div class="tabs_content">  
  85.             <p>  
  86.                 這是選項卡一的內容？<br />  
  87.                 這是選項卡一的內容？<br />  
  88.                 這是選項卡一的內容？<br />  
  89.                 這是選項卡一的內容？<br />  
  90.                 這是選項卡一的內容？<br />  
  91.                 這是選項卡一的內容？<br />  
  92.                 這是選項卡一的內容？  
  93.             </p>  
  94.         </div>  
  95.         <div class="tabs_content">  
  96.             <p>  
  97.                 這是選項卡二的內容？<br />  
  98.                 這是選項卡二的內容？<br />  
  99.                 這是選項卡二的內容？<br />  
  100.                 這是選項卡二的內容？<br />  
  101.                 這是選項卡二的內容？<br />  
  102.                 這是選項卡二的內容？<br />  
  103.                 這是選項卡二的內容？  
  104.             </p>  
  105.         </div>  
  106.         <div class="tabs_content">  
  107.             <p>  
  108.                 這是選項卡三的內容？<br />  
  109.                 這是選項卡三的內容？<br />  
  110.                 這是選項卡三的內容？<br />  
  111.                 這是選項卡三的內容？<br />  
  112.                 這是選項卡三的內容？<br />  
  113.                 這是選項卡三的內容？<br />  
  114.                 這是選項卡三的內容？  
  115.             </p>  
  116.         </div>  
  117.     </div>  
  118.     <script type="text/javascript">  
  119.         $(document).ready(function () {  
  120.             $("#tabs").tabs();  
  121.         });  
  122.     </script>  
  123.     <script type="text/javascript">  
  124.           
  125.         (function ($) {  
  126.             $.fn.tabs = function () {  
  127.                 var content = this.find("div");  
  128.                 var list = this.find("ul.tabs_header").find("li");  
  129.                 content.hide();  
  130.                 content.eq(0).show();  
  131.                 list.eq(0).addClass("active");  
  132.                 list.each(function (i) {  
  133.                     $(this).bind({  
  134.                         click: function () {  
  135.                             list.removeClass("active");  
  136.                             content.hide();  
  137.                             content.eq(i).css("display", "");  
  138.                             $(this).addClass("active");  
  139.                         },  
  140.                         mousemove: function () {  
  141.                             $(this).addClass("hover");  
  142.                         },  
  143.                         mouseout: function () {  
  144.                             $(this).removeClass("hover");  
  145.                         }  
  146.                     });  
  147.                 });  
  148.             }  
  149.         })(jQuery);  
  150.           
  151.     </script>  
  152. </body>  
  153. </html>  

經測試在ie6+，ie6+下都能正常使用。兼容還是很好的。

來幾張圖吧：

這是火狐8.0下的效果，圓角邊直接用樣式來定義


這是ie6.0下的效果，沒有圓角邊。

jquery ui的選項卡ui在ie6.0下是不正常的，呵呵，被我修復了這個問題。

Linux編程

jQuery 動態標簽生成插件

jQuery中的(function($){...})(jQuery)

jQuery取select標簽被選項的值

簡單的jQuery提交例子

jQuery插件應用之 --- 選項卡插件的使用

jQuery插件滑動器的使用

jQuery插件的應用之 --- 日歷

jQuery插件的實現

相關文章
  • Linux編程
  • SHELL編程
  • PERL編程
    • Copyright © Linux教程網 All Rights Reserved