企业信息化管理软件有哪些/网络seo关键词优化技术

很早之想就学习jquery的插件写法，一直拖到现在，今天趁着没什么工作忙，搜索些资料学习下，写了个比较简单的选项卡效果。

 

刚开始有看到一个很通俗易通的例子：alert对话框。

jquery.alertMsg.js

/**
 * [description]
 * @param  {[type]} $ [description]
 * @return {[type]}   [description]
 */
(function($){

  $.fn.alertMsg = function(options) {

    var defaults = {
      mouseEvent: 'clcik',
      msg: 'hello world'
    }
    var options = $.extend(defaults, options);
    var $this = $(this);

    $this.on(options.mouseEvent, function(e){
      alert(options.msg);
    })
  }

})(jQuery)

调用方式：

<span id="test">test</span>

$(function(){$('#test').alertMsg({mouseEvent : "click",  msg : "第一次写插件!"  });
});

 

jQuery插件结构

(function($){
    // tabs 自定义的插件名称
    $.fn.tabs = function(options) {

        // 设置默认参数
        var defaults = {
            activeClass: 'active'
            ... 
        }
        // 对象扩展
        var options = $.extend(defaults, options);

        return $(this).each(function(){
            // 编写相应实现代码
        })
    }

})(jQuery)

 

选项卡实现：

1、HTML结构

<div id="tab"><ul><li>选项1</li><li>选项2</li><li>选项3</li><li>选项4</li></ul><div id="tabCon" class="tab-con"><div>1的内容</div><div>2的内容</div><div>3的内容</div><div>4的内容</div></div>
</div>

2、jquery.tabs.js

(function($){

    $.fn.tabs = function(options) {

            var defaults = {
                Event: 'click',
                activeClass: 'active'
            }
            var options = $.extend(defaults, options);

            return $(this).each(function(){

                var $thisTab = $(this).find('ul');
                var $tabCon = $thisTab.siblings('div');

                $tabCon.find('div').each(function(){
                    $(this).hide();
                });

                $thisTab.find('li:first').addClass(options.activeClass);
                $tabCon.find('div:first').show();

                $thisTab.find('li').each(function(index){

                    $(this).on(options.Event, function(){

                        $(this).siblings().removeClass(options.activeClass);
                        $(this).addClass(options.activeClass);
                        $tabCon.find('div').eq(index).show().siblings().hide();

                    });
                    
                });
            });
        }
    
})(jQuery)

3、调用

$('#tab').tabs({
    activeClass: 'active'
});

 

小结：对jQuery插件的初识，感觉应该还要继续优化和扩展，继续学习！

 

2016-10-14补充：

jquery.tabs.js优化

;(function($, window, document, undefined){// 定义TabFun的构造函数var TabFun = function(ele, opt) {this.$element = ele,this.defaults = {Event: 'click',activeClass: 'active'},this.options = $.extend({}, this.defaults, opt);}// 定义TabFun的方法TabFun.prototype = {// 选项卡切换tab: function() {var $this = this;return $this.$element.each(function(){var $thisTab = $(this).find('ul');var $tabCon = $thisTab.siblings('div');$tabCon.find('div').each(function(){$(this).hide();});$thisTab.find('li:first').addClass($this.options.activeClass);$tabCon.find('div:first').show();$thisTab.find('li').each(function(index){$(this).on($this.options.Event, function(){$(this).siblings().removeClass($this.options.activeClass);$(this).addClass($this.options.activeClass);$tabCon.find('div').eq(index).show().siblings().hide();});});});}}$.fn.tabs = function(options) {// 创建TabFun的实体var tabFun = new TabFun(this, options);// 调用其方法return tabFun.tab();}})(jQuery, window, document)