myMenu version 1.0 build 2

因为我这人太懒惰,能copy的代码尽量不写出来导致开发速度是很快,但是离开网络,或是换工作去面试的话就尴尬了..

so我还是选择了web前端,废话不多说,只是为了记录自己的生活和开发才选择cnblog.

正题:

做成插件呢,这次只是测试用的,当然效果不错,只是换了个其他的样式呀,类名啊就不好使了.

这次仅是为了测试,没有变动CSS和类名:

<script type="text/javascript">
        /*var myMenuCss = "<style>body{background-color:blue;}</style>";
        $(function () {
            $("head").append(myMenuCss);
        });


        var ary = { "首页": "首页", "首页": "首页", "首页": "首页" };
        var ary = [ ["首页", "http://"],["首页", "http://"],["首页", "http://"] ];*/

        (function ($) {
            $.fn.myMenu2 = function (menus, index) {
                var begin = "<div id=\"root\">"
                          + "<div id=\"header\">"
                          + "<div id=\"menu\">"
                          + "<ul>";

                var end = "</ul>"
                        + "</div>"
                        + "</div>"
                        + "</div>";

                var content = "<li><a href=\"{url}\"><span>{text}</span></a></li>";
                var content2 = "<li class=\"menu-current\"><a href=\"{url}\"><span>{text}</span></a></li>";

                var temp = "";
                for (var menu in menus) {
                    //for (var m in menus[menu]) {
                    if (index == menu) {
                        temp += content2.replace("{text}", menus[menu][0]).replace("{url}", menus[menu][1]) + "\n";
                    } else {
                        temp += content.replace("{text}", menus[menu][0]).replace("{url}", menus[menu][1]) + "\n";
                    } 
                    //}
                }
                var html = begin + temp + end;
                return this.append(html);
            }

        })(jQuery);
//使用
        $(function () {
            $("body").myMenu2([["首页", "http://"], ["首页", "http://"], ["首页", "http://"]],1);
        });
    </script>

注释都没改就直接干上来了,不过没事,不期待别人看文章,只是为自己记录下.

效果: