zoukankan      html  css  js  c++  java
  • jQuery插件制作


    模板:
    (function($){
    $.fn.plugins=function(options){


    var defaults = {

    }
    var options = $.extend(defaults,options);
    this.each(function(){

    })
    }
    return this;
    })(jQuery);


    例子:做一个tab标签切换插件
    <div class="tab">
    <ul class="tabnav">
    <li class="current">html</li>
    <li>css</li>
    <li>js</li>
    </ul>
    <div class="tabcontent">
    <div style="display: block">html</div>
    <div>css</div>
    <div>js</div>
    </div>
    </div>
    <style>
    *{padding: 0;margin: 0}
    .tabnav li{float: left; 150px;height: 26px;line-height: 26px;text-align: center;margin-right: 3px;border: 1px solid blue;border-bottom: none;list-style: none;cursor: pointer}
    .tabcontent{clear:both}
    .tabcontent div{border: 1px solid blue;display: none; 500px;height:200px }
    .tabnav li.current{background: blue;color: white;font-weight: bold}
    <script>
    $.fn.tab=function(options){


    var defaults = {
    currentClass:"current",
    eventType:"click",
    tabNav:".tabnav>li",
    tabContent:".tabcontent>div"
    }
    var options = $.extend(defaults,options);
    this.each(function(){
    var _this = $(this);
    _this.find(options.tabNav).bind(options.eventType,function(){
    $(this).addClass(options.currentClass).siblings().removeClass(options.currentClass)
    var index = $(this).index();
    _this.find(options.tabContent).eq(index).show().siblings().hide()
    })
    })
    return this;
    }

    })(jQuery);
  • 相关阅读:
    elasticsearch如何设计索引
    LinkedList 的实现原理
    聊聊elasticsearch7.8的模板和动态映射
    elasticsearch7.8权限控制和规划
    cloudera manager server迁移
    2020年终总结
    工作两年半的一次复盘
    聊聊数据结构和算法
    AutoMapper源码解析
    [源码解析] 并行分布式框架 Celery 之 worker 启动 (2)
  • 原文地址:https://www.cnblogs.com/bhan/p/5401970.html
Copyright © 2011-2022 走看看