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);
  • 相关阅读:
    vue2.0 动画
    I. 对缓存进行处理
    G. 【案例】Ajax实现无刷新分页效果
    H. Ajax对XML信息的接收与处理
    F. 异步同步请求
    D. 接收服务器端返回的信息
    E. 请求GET和POST的不同
    C. 发起对服务器的请求
    B. 创建Ajax对象
    A. AJAX介绍
  • 原文地址:https://www.cnblogs.com/bhan/p/5401970.html
Copyright © 2011-2022 走看看