扩展 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 () {

                    }
                });
            })

 

原文地址:https://www.cnblogs.com/hhj3645/p/8807434.html

时间: 2024-10-30 00:18:34

扩展 jq 对象方法的相关文章

jquery extend扩展方法(类方法和对象方法)

一.扩展jquery类方法 /** * 扩展jquery类方法(相当于类的静态方法$.methodName(param)) */ $.extend({ con:function(value){ console.log(value) } }) //类方法调用 $.con('作者是包戬作者是包戬作者是包戬作者是包戬作者是包戬作者是包戬'); 二.扩展jquery对象方法 /** * 扩展jquery对象方法(相当于类的静态方法$('#id').methodName(param)) * 通过id/cl

jQuery源码06-jQuery = function(){};给JQ对象,添加一些方法和属性,extend : JQ的继承方法,jQuery.extend()

/*! * Includes Sizzle.js 选择器,独立的库 * http://sizzlejs.com/ */ (function( window, undefined ) { //"use strict"; var // rootjQuery = jQuery(document) = $();压缩有用 rootjQuery, // dom是否加载完 readyList, // core_strundefined == 'undefined' core_strundefined

js中String常用方法详解及String对象方法扩展

一.JavaScript 中 slice .substr 和 substring的区别: 1: String.slice(start,end): 一个新的字符串.包括字符串 stringObject 从 start 开始(包括 start)到 end 结束(不包括 end)为止的所有字符. 2: String.substring(start,end) 这个就有点特别了,它是先从start,end里找出一个较小的值. 然后从字符串的开始位置算起,截取较小值位置和较大值位置之间的 字符串,截取出来的

jq对象才能使用jq方法,$(&quot;.a&quot;).eq(0) 和 $(”.a“)[0]

<a class="a"></a> <a class="a"></a> <a class="a"></a> $('.a')  // 选择了3个a,都是jq对象(可以用jq的属性.方法) $('.a').eq(1) // 选择了第二个a,是jq对象(不可以使用dom属性方法,可以用jq的属性.方法) $('.a')[1]  // 选择了第二个a,是dom对象(可以使用dom属性

js中使用prototype扩展对象方法

//---------------------对象 //1. var HomeContrl = function(){ this.foo = 'bar'; //对象方法 this.intro = function(){ alert(this.foo); } } //原型方法,扩展原来对象的方法 HomeContrl.prototype.printr = function() { alert(this.foo); } var obj = new HomeContrl(); var obj2 = n

jQuery中的$.extend方法来扩展JSON对象及合并,方便调用对象方法

$.extend方法可以扩展JSON对象,用一个或多个其他对象来扩展一个对象,返回被扩展的对象. 例一 合并 settings 和 options,修改并返回 settings var settings = { validate: false, limit: 5, name: "foo" };var options = { validate: true, name: "bar" };jQuery.extend(settings, options); 结果 setti

利用jQuery对插件进行扩展时,方法$.extend()、$.fn.extend()区别与联系

  利用JQ开发插件的方法: 1.jQuery.extend(); 2.jQuery.fn.extend(); 3.通过$.widget()应用jQuery UI的部件工厂方式创建. 由于第三种方式通常用于开发比较高级的jQuery的部件,开发难度较大,所以第一种和第二种方式用的更为广泛,下面主要对前两种方式的区别和联系以及使用的方法做一些介绍. 简要的说明一下: jQuery是一个封装的非常好的类,$(“#btn”)就相当于创建了一个jQuery的实例. 1.方法jQuery.fn .exte

Jq对象与dom对象的互相转换!

JQ对象转化成dom对象 var a=$('div'); var b=a[0];//dom对象 转化成dom对象以后就可以使用dom方法了 dom对象转化成jq对象 var a=document.getElmentById('div1'); var b=$(a);//jquery 对象 转化成jquery对象之后,可以使用jquery的方法.

Javascript使用函数apply扩展环境对象

Javascript使用函数apply扩展环境对象 通过实例对象作为参数传入调用构造函数对象的apply方法,以使实例对象作为环境对象在作为一个普通函数的构造函数中执行,构造函数的属性会覆盖到实例对象上,从而实现实例对象的属性扩展. 1.函数对象的apply和call传入参数     var tag = "global";      function say(){          for(var args = "", i = 0; i < arguments