用Jquery 仿VS 样式的 导航栏插件

 

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

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

效果图：

 

代码：

     /* 
* toolsTags 0.1 
* Copyright (c) 2014 www.xacf.com YeHui  叶辉
* Date: 2014-8-4 
* JQuery 插件 支持JQuery 1.3.2 和1.10.2
* 仿VS 左侧工具导航栏样式的菜单工具栏插件。
*/
           var toolsTag = {
            toolsTags: [
                { title: "导航1", cative: 1 },
                { title: "导航2", cative: 0 },
                { title: "导航3", cative: 0 }
            ]
        };
        (function ($) {
            var ver = $.fn.jquery;
            $.fn.toolsTags = function (options) {
                var defaults = {
                    data: toolsTag
                }, options = $.extend(defaults, options),
                  tags = [],
                  contents = [],
                  tagName = "#tag",
                  contentName = "#toolsContent",
                  activeToolsIndex = 0;

                var uld = $('<ul />', {
                    id: "toolsTags"
                }).appendTo("#tools_layout").addClass("t_toolsTags");
                if (ver === "1.3.2")
                    uld.attr("id", "toolsTags");

                if (options.data.toolsTags && $.isArray(options.data.toolsTags)) {
                    $.each(options.data.toolsTags, function (i, val) {
                        var lid = $('<li />', {
                            id: "tag" + i,
                            html: val.title,
                            tabIndex: i
                        }).appendTo("#toolsTags");

                        var divD = $('<div />', {
                            id: "toolsContent" + i
                        }).appendTo("#tools_layout").addClass("t_toolsContent");

                        tags.push(tagName + i);
                        contents.push(contentName + i);

                        if (ver === "1.3.2") {
                            lid.attr("id", "tag" + i).html(val.title);
                            lid.attr("tabIndex", i);
                            divD.attr("id", "toolsContent" + i);
                        }

                        if (val.cative === 1) {
                            $("#tag" + i).addClass("i_active");
                            $("#toolsContent" + i).addClass("t_contentActive");
                        }
                    });
                };
                $.each(tags, function (i, val) {

                    $(val).click(function (e) {
                        tags_SetActive();
                        var index = e.target.tabIndex;

                        $(tags[index]).addClass("i_active");
                        $(contents[index]).addClass("t_contentActive");
                        activeToolsIndex = index;
                    });

                    $(val).mouseover(function (e) {
                        $.each(tags, function (i, val) {
                            $(tags[i]).removeClass("i_active");
                        });
                        var index = e.target.tabIndex;
                        $(tags[index]).addClass("i_active");
                    });
                    $(val).mouseout(function (e) {
                        $.each(tags, function (i, val) {
                            $(tags[i]).removeClass("i_active");
                        });
                        $(tags[activeToolsIndex]).addClass("i_active");
                    });
                });

                function tags_SetActive() {
                    $.each(tags, function (i, val) {
                        $(tags[i]).removeClass("i_active");
                    });
                    $.each(contents, function (i, val) {
                        $(contents[i]).removeClass("t_contentActive");
                    });
                }
            };
        })(jQuery);

 HTML

  <div id="tools_layout">
        </div>

        <script type="text/javascript">

            $().toolsTags();
            $("#toolsContent1").html("导航栏二中的菜单项");
        </script>

 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;
        }