zoukankan      html  css  js  c++  java
  • 扩展 jq 对象方法

     //扩展Jquery对象方法
        $.fn.extend({
            //proTree树结构
            amTree: function (opts) {
                var Tree = function (element, opts) {
                    this.element = element;
                    //json数组
                    this.JSONArr = opts.arr;
                    //没有下级时的图标
                    this.simIcon = opts.simIcon || "icon iconfont icon-qrcode";
                    //树展开时图标
                    this.mouIconOpen = opts.mouIconOpen || "icon iconfont icon-reduce";
                    //树折叠时图标
                    this.mouIconClose = opts.mouIconClose || "icon iconfont icon-zengjia-copy-copy";
                    //回调函数
                    this.callback = opts.callback || function () { };
                    //默认展开的级数
                    this.openLevel = opts.openLevel || 0;
                    this.rootID = opts.rootID || "00000000-0000-0000-0000-000000000000"
                    //初始化
                    this.init();
                }
                //初始化事件
                Tree.prototype.init = function () {
                    //事件
                    this.JSONTreeArr = this.proJSON(this.JSONArr, this.rootID);
                    this.treeHTML = this.proHTML(this.JSONTreeArr, 0);
                    this.element.append(this.treeHTML);
                    this.bindEvent();
                }
                //生成树形JSON数据
                Tree.prototype.proJSON = function (oldArr, pid) {
                    var newArr = [];
                    var self = this;
                    $.map(oldArr, function (item) {
                        if (item.pid == pid) {
                            var obj = {
                                id: item.id,
                                name: item.name
                            }
                            var child = self.proJSON(oldArr, item.id);
                            if (child.length > 0) {
                                obj.child = child
                            }
                            newArr.push(obj)
                        }
    
                    })
                    return newArr;                
                };
                //生成树形HTML
                Tree.prototype.proHTML = function (arr, lv) {
                    var self = this;
                    var ulHtml = "<ul class='treeUl tree' " + ((lv <= self.openLevel) ? "" : "style='display:none;'") + ">";
                    $.map(arr, function (item) {
                        var lihtml = "<li>";
                        if (item.child && item.child.length > 0) {
                            var currLv = lv + 1;
                            lihtml += "<i ischek='" + ((lv < self.openLevel) ? "true" : "false") + "' class='" + ((lv < self.openLevel) ? self.mouIconOpen : self.mouIconClose) + "' style='font-size:16px;' ></i>" +
                                "<span id='" + item.id + "' title='" + item.name + "'>" + item.name + "</span>"
                            var _ul = self.proHTML(item.child, currLv);
                            lihtml += _ul + "</li>";
                        } else {
                            lihtml += "<i class='" + self.simIcon +" "+ "lay-bg" + "'></i>" +
                                "<span id='" + item.id + "' title='" + item.name + "'>" + item.name + "</span>";
                        }
                        ulHtml += lihtml;
                    })
                    ulHtml += "</ul>";
                    return ulHtml;
                }
                Tree.prototype.bindEvent = function () {
                    var self = this;
                    this.element.find(".treeUl li i").click(function () {
                        var ischek = $(this).attr("ischek");
                        if (ischek == 'true') {
                            var treeUl = $(this).closest("li").children(".treeUl");
                            $(this).removeClass(self.mouIconOpen).addClass(self.mouIconClose)
                            treeUl.hide();
                            $(this).attr("ischek", 'false');
                        } else if (ischek == 'false') {
                            var treeUl = $(this).closest("li").children(".treeUl");
                            treeUl.show();
                            $(this).removeClass(self.mouIconClose).addClass(self.mouIconOpen)
                            $(this).attr("ischek", 'true')
                        }
                    });
    
                    this.element.find(".treeUl li span").click(function () {
                        var id = $(this).attr("id");
                        var name = $(this).text();
                        self.element.find(".treeUl li span").removeClass("curr");
                        $(this).addClass("curr");
                        self.callback(id, name)
                    })
                }
                return new Tree($(this), opts)
            }
        });




    // 选项卡
    $.fn.extend({ myList:
    function(opts){ var List = function (element, opts) { this.element = element; // 按钮数组 this.btnArr = opts.btnArr; // 内容数组 this.contentArr = opts.contentArr; // 事件 this.oEvent = opts.oEvent || "click"; // 回调函数 this.callback = opts.callback || function () {} this.init(); } List.prototype.init = function () { this.listHtml = this.proHtml(this.btnArr,this.contentArr); this.element.append(this.listHtml); this.bindEvent(this.oEvent); } List.prototype.proHtml = function (btnArr,contentArr) { var olHtml = "<ol class = 'clearfix'>"; for (var i in btnArr){ var btnHtml = "<li>" + btnArr[i] + "</li>" olHtml += btnHtml; } olHtml += "</ol>"; var listHtml = olHtml; var ulHtml = "<ul class = 'clearfix'>"; for (var i in contentArr){ var conHtml = "<li>" + contentArr[i] + "</li>" ulHtml += conHtml; } ulHtml += "</ul>"; listHtml += ulHtml; return listHtml; } List.prototype.bindEvent = function (oEvent) { var self = this; self.element.find("ul li").eq(0).css("display","block"); if (oEvent == 'click'){ self.element.find("ol li").click(function () { self.element.find("ul li").eq($(this).index()).show().siblings().hide(); self.callback(); }) } if (oEvent == 'hover'){ self.element.find("ol li").hover(function () { self.element.find("ul li").eq($(this).index()).show().siblings().hide(); self.callback(); }) } } return new List($(this),opts); } }) $(function() { $(".list").myList({ btnArr: ["选项1","选项2","选项3"], contentArr: ["内容一","内容二","内容三"], oEvent: "hover" }); $(".tfboys").myList({ btnArr: ["王俊凯","王源","易烊千玺"], contentArr: ["王俊凯有驾照了","源源很刚","千玺酷酷哒"], callback: function () { } }); })
    
    
    
     
  • 相关阅读:
    leetcode5 Longest Palindromic Substring
    leetcode17 Letter Combinations of a Phone Number
    leetcode13 Roman to Integer
    leetcode14 Longest Common Prefix
    leetcode20 Valid Parentheses
    leetcode392 Is Subsequence
    leetcode121 Best Time to Buy and Sell Stock
    leetcode198 House Robber
    leetcode746 Min Cost Climbing Stairs
    tomcat下使用druid配置jnid数据源
  • 原文地址:https://www.cnblogs.com/hhj3645/p/8807434.html
Copyright © 2011-2022 走看看