Jquery Tabs 

 1 (function ($)
 2 {
 3     // 插件名称 tab
 4     $.fn.tab = function (options)
 5     {
 6         // 默认值初始化
 7         var defaults = {
 8             // 默认起始选项
 9             index: 0,
10             // 默认延迟时间
11             delay: 100,
12             // 默认鼠标悬停
13             act: ''
14         };
15         // 合并 defaults 和 options 修改并返回 defaults
16         var set = $.extend(defaults, options);
17         // this 指通过当前选择器获取的 jQuery 对象
18         // 选项卡标签
19         var tag = $('ul.tags > li', this);
20         // 选项卡内容
21         var pane = $('div.panes > div', this);
22 
23         /* tagcur */
24         var tagcur = $('div.tagsline > div', this);
25         tagcur.width(tag.eq(set.index).width());
26         tagcur.css('left', tag.eq(set.index).position().left);
27         /* end */
28 
29         // 默认添加起始元素类名
30         tag.eq(set.index).addClass('cur');
31         // 默认显示起始元素隐藏同辈元素
32         pane.eq(set.index).show().siblings().hide();
33 
34         // 选项卡切换函数
35         function fnTab(obj)
36         {
37 
38             /* tagcur */
39             tagcur.animate({
40                 width: obj.width(),
41                 left: obj.position().left
42             }, 200);
43             /* end */
44 
45             // 添加当前元素类名删除同辈元素类名
46             obj.addClass('cur').siblings().removeClass('cur');
47             // 显示当前元素隐藏同辈元素
48             pane.eq(obj.index()).show().siblings().hide();
49         };
50 
51         // 判断鼠标单击事件
52         if (set.act == 'click')
53         {
54             // 鼠标单击事件
55             tag.click(function (e)
56             {
57                 var this_tag = $(this);
58                 // 调用选项卡切换函数
59                 fnTab(this_tag);
60                 return false;
61             });
62         } else
63         {
64             var hoverTimer;
65             // 鼠标悬停事件
66             tag.hover(function (e)
67             {
68                 var this_tag = $(this);
69                 // 指定毫秒数后调用选项卡切换函数
70                 hoverTimer = setTimeout(function (e)
71                 {
72                     fnTab(this_tag);
73                 },
74                 set.delay);
75             }, function (e)
76             {
77                 // 取消延迟执行选项卡切换函数
78                 clearTimeout(hoverTimer);
79             });
80         }
81     }
82 })(jQuery);
View Code
body {
    background-color: #FFF;
    font: 12px/21px Arial, Helvetica, sans-serif;
    margin: 3em;
}
/* jQuery Tabs CSS */
.tags {
    height: 36px;
    line-height: 36px;
    list-style-type: none;
    margin: 0;
    padding-left: 0;
    position: relative;
}
.tags li {
    cursor: pointer;
    display: inline;
    float: left;
    margin-right: 36px;
}
.tags li a {
    color: #36C;
    float: left;
    font-weight: 700;
    outline-style: none;
    text-decoration: none;
}
.tags li.cur a {
    color: #F60;
}
.tagsline {
    border-top: 1px solid #E8E8E8;
    margin-bottom: 1em;
    position: relative;
}
.tagcur {
    background-color: #F60;
    height: 2px;
    position: absolute;
    top: -1px;
}
.panes {
    border: 1px solid #E8E8E8;
    height: 5em;
    margin-bottom: 2em;
    padding: 1em;
}
View Code
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
  <link href="../Styles/tabs.css" rel="stylesheet" type="text/css" />
  <script src="../Scripts/jquery.js" type="text/javascript"></script>
  <script src="../Scripts/jquery-tabs.js" type="text/javascript"></script>
  <link href="../Styles/form.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <div id="tab">
    <ul class="tags">
      <li><a href="#">个人资料</a></li>
      <li><a href="#">修改密码</a></li>
    </ul>
    <div class="tagsline">
      <div class="tagcur">
      </div>
    </div>
    <div class="panes">
      <div>
       
       </div>
      <div>
        </div>
    </div>
  </div>
  <script type="text/javascript">
    $(function ($)
    {
      $("#tab").tab({
        index: 1,
        // 设置起始选项，默认为第一项
        delay: 200,
        // 设置延迟时间，默认为延迟 100 毫秒
        act: "click" // 设置鼠标事件，默认为鼠标悬停
      });
    });
  </script>
View Code

 

posted @ 2014-08-11 01:26  寒风、落叶  阅读(127)  评论(0)    收藏  举报
$(document).ready(function() { // 禁止右键 $(document).bind("contextmenu", function(){return false;}); // 禁止选择 $(document).bind("selectstart", function(){return false;}); // 禁止Ctrl+C 和Ctrl+A $(document).keydown(function(event) { if ((event.ctrlKey&&event.which==67) || (event.ctrlKey&&event.which==86)) { //alert("对不起,版权所有,禁止复制"); return false; } }); });