在开发B/S 项目过程中,根据主界面设计要求,需要做一个类似VS 左边工具栏样式的菜单导航栏,在网上搜索无果后,于是决定自已做一个。

   由于前台用JQuery开发, 想到网上很多人用JQuery做插件,开发起来很方便。于是呼,我也照猫画虎地瞎做一个,限本人文采水平一般,只能贴代码共享。

效果图:

 

代码:

 1      /* 
 2 * toolsTags 0.1 
 3 * Copyright (c) 2014 www.xacf.com YeHui  叶辉
 4 * Date: 2014-8-4 
 5 * JQuery 插件 支持JQuery 1.3.2 和1.10.2
 6 * 仿VS 左侧工具导航栏样式的菜单工具栏插件。
 7 */
 8            var toolsTag = {
 9             toolsTags: [
10                 { title: "导航1", cative: 1 },
11                 { title: "导航2", cative: 0 },
12                 { title: "导航3", cative: 0 }
13             ]
14         };
15         (function ($) {
16             var ver = $.fn.jquery;
17             $.fn.toolsTags = function (options) {
18                 var defaults = {
19                     data: toolsTag
20                 }, options = $.extend(defaults, options),
21                   tags = [],
22                   contents = [],
23                   tagName = "#tag",
24                   contentName = "#toolsContent",
25                   activeToolsIndex = 0;
26 
27                 var uld = $('
    ', { 28 id: "toolsTags" 29 }).appendTo("#tools_layout").addClass("t_toolsTags"); 30 if (ver === "1.3.2") 31 uld.attr("id", "toolsTags"); 32 33 if (options.data.toolsTags && $.isArray(options.data.toolsTags)) { 34 $.each(options.data.toolsTags, function (i, val) { 35 var lid = $('
  • ', { 36 id: "tag" + i, 37 html: val.title, 38 tabIndex: i 39 }).appendTo("#toolsTags"); 40 41 var divD = $('
    ', { 42 id: "toolsContent" + i 43 }).appendTo("#tools_layout").addClass("t_toolsContent"); 44 45 tags.push(tagName + i); 46 contents.push(contentName + i); 47 48 if (ver === "1.3.2") { 49 lid.attr("id", "tag" + i).html(val.title); 50 lid.attr("tabIndex", i); 51 divD.attr("id", "toolsContent" + i); 52 } 53 54 if (val.cative === 1) { 55 $("#tag" + i).addClass("i_active"); 56 $("#toolsContent" + i).addClass("t_contentActive"); 57 } 58 }); 59 }; 60 $.each(tags, function (i, val) { 61 62 $(val).click(function (e) { 63 tags_SetActive(); 64 var index = e.target.tabIndex; 65 66 $(tags[index]).addClass("i_active"); 67 $(contents[index]).addClass("t_contentActive"); 68 activeToolsIndex = index; 69 }); 70 71 $(val).mouseover(function (e) { 72 $.each(tags, function (i, val) { 73 $(tags[i]).removeClass("i_active"); 74 }); 75 var index = e.target.tabIndex; 76 $(tags[index]).addClass("i_active"); 77 }); 78 $(val).mouseout(function (e) { 79 $.each(tags, function (i, val) { 80 $(tags[i]).removeClass("i_active"); 81 }); 82 $(tags[activeToolsIndex]).addClass("i_active"); 83 }); 84 }); 85 86 function tags_SetActive() { 87 $.each(tags, function (i, val) { 88 $(tags[i]).removeClass("i_active"); 89 }); 90 $.each(contents, function (i, val) { 91 $(contents[i]).removeClass("t_contentActive"); 92 }); 93 } 94 }; 95 })(jQuery);

 HTML

  

 CSS 样式表

   html, body, div, p, h1, h2, h3, h4, h5, h6, dl, dt, dd, ul, ol, li, caption, th, td, img, form, fieldset, legend, input, label, button, textarea {
            margin: 0;
            padding: 0;
        }

        html, body {
            font-family: Arial,SimSun;
            font-size: 14px;
            font: normal 12px/14px SimSun,arial;
        }

        ul {
            list-style: none;
        }

        #tools_layout {
            width: 260px;
            margin: 0 auto;
        }

        .t_toolsTags {
            position: absolute;
            left: 0;
            z-index: 9;
            border-right: 2px solid #3BB1A3;
            background-color: #3BB1A9;
            width: 25px;
            height: 100%;
        }

            .t_toolsTags li {
                width: 100%;
                _min-height: 100px;
                height: auto;
                padding-top: 10px;
                padding-bottom: 10px;
                line-height: 120%;
                text-align: center;
                cursor: pointer;
                margin-bottom: 2px;
                font-family: SimSun;
                font-size: 14px;
            }

                .t_toolsTags li,
                .t_toolsTags li.i_active {
                    margin-left: 0px;
                    padding-left: 2px;
                }

            .t_toolsTags li {
                background-color: #218175;
            }

                .t_toolsTags li.i_active {
                    background-color: #dcf8fa;
                }

        .t_toolsContent {
            left: 0;
            margin-left: 27px;
            height: 100%;
            border-right: 2px solid #00ff21;
            width: 180px;
            background-color: #dcf8fa;
            position: absolute;
            display: none;
            padding-left: 5px;
        }

        .t_contentActive {
            display: block;
        }

        .hrtest {
            height: 5px;
            width: 100%;
            border-top: 1px solid red;
            border-left: none;
            border-right: none;
            border-bottom: none;
        }