基于JQ的选项卡组件开发

最新推荐文章于 2022-06-21 20:05:35 发布
xyphf_和派孔明
最新推荐文章于 2022-06-21 20:05:35 发布
阅读量454
点赞数
分类专栏： JavaScript面向对象
JavaScript面向对象专栏收录该内容
20 篇文章
订阅专栏
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JQ的选项卡组件DEMO</title>
<style>
#div1 div,#div2 div,#div3 div,#div4 div{ width:200px; height:200px; border:1px #000 solid; display:none;}
.active{ background:red;}
</style>
<script src="jquery-1.10.2.min.js"></script>
<script>

/**
    title : 基于JQ的选项卡组件

    Options : event   delay

    Methods : nowSel()   getContent()

    Events : beforeClick  afterClick

*/

//jQ中的主动触发 : trigger()

$(function(){
    //创建对象
    var t1 = new Tab();
    //父级 配置参数
    t1.init('div1',{});

    var t2 = new Tab();
    t2.init('div2',{
        event : 'mouseover'
    });

    var t3 = new Tab();
    t3.init('div3',{
        event : 'mouseover',
        delay : 200
    });

    var t4 = new Tab();
    t4.init('div4',{});
    t4.nowSel(2);

    $('#input1').click(function(){

        alert( t4.getContent() );

    });

    $(t4).on('beforeClick',function(){
        alert( t4.getContent() );
    });

    $(t4).on('afterClick',function(){
        alert( t4.getContent() );
    });

});

function Tab(){
    //属性
    this.oParent = null;
    this.aInput = null;
    this.aDiv = null;
    this.iNow = 0;
    //默认参数
    this.settings = {  //默认参数
        event : 'click', //默认点击
        delay : 0
    };
}
                            //父级 配置参数
Tab.prototype.init = function(oParent , opt){
            // 默认参数 配置参数
    $.extend( this.settings , opt );
    //获取父级及父级下的元素
    this.oParent = $('#'+oParent);
    this.aInput = this.oParent.find('input');
    this.aDiv = this.oParent.find('div');
    //调用选项卡切换的方法
    this.change();

};
//选项卡切换的方法
Tab.prototype.change = function(){

    var This = this;
    var timer = null;

    this.aInput.on(this.settings.event,function(){

        var _this = this;

        if( This.settings.event == 'mouseover' && This.settings.delay ){

            timer = setTimeout(function(){
                show(_this);
            },This.settings.delay);

        }
        else{
            show(this);
        }

    }).mouseout(function(){
        clearTimeout(timer);
    });

    function show(obj){

        $(This).trigger('beforeClick');

        This.aInput.attr('class','');
        This.aDiv.css('display','none');

        $(obj).attr('class','active');

        This.aDiv.eq( $(obj).index() ).css('display','block');

        This.iNow = $(obj).index();

        $(This).trigger('afterClick');

    }

};

Tab.prototype.nowSel = function(index){

    this.aInput.attr('class','');
    this.aDiv.css('display','none');

    this.aInput.eq(index).attr('class','active');
    this.aDiv.eq(index).css('display','block');

    this.iNow = index;

};

Tab.prototype.getContent = function(){

    return this.aDiv.eq(this.iNow).html();

};


</script>
</head>

<body>
<div id="div1">
    <input class="active" type="button" value="1">
    <input type="button" value="2">
    <input type="button" value="3">
    <div style="display:block">111111</div>
    <div>222222</div>
    <div>333333</div>
</div>

<div id="div2">
    <input class="active" type="button" value="1">
    <input type="button" value="2">
    <input type="button" value="3">
    <div style="display:block">111111</div>
    <div>222222</div>
    <div>333333</div>
</div>

<div id="div3">
    <input class="active" type="button" value="1">
    <input type="button" value="2">
    <input type="button" value="3">
    <div style="display:block">111111</div>
    <div>222222</div>
    <div>333333</div>
</div>

<div id="div4">
    <input class="active" type="button" value="1">
    <input type="button" value="2">
    <input type="button" value="3">
    <div style="display:block">111111</div>
    <div>222222</div>
    <div>333333</div>
</div>
<input type="button" value="点击" id="input1">
</body>
</html>