JQ选项卡(面向对象)

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>JQ选项卡</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="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></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>
    <script type="text/javascript">
        /**
            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.oInput = null;
            this.oDiv = null;
            this.isNow = 0;
            this.settings = { //默认参数
                event: "click",
                delay: 0
            };
        };

        Tab.prototype.init = function(oParent, opt) {
            $.extend(true, 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 time = null;
            this.aInput.on(this.settings.event, function() {
                var _this = this;
                if(This.settings.event == "mouseover" && This.settings.delay) {
                    time = setTimeout(function() {
                        show(_this);
                    }, This.settings.delay);
                } else {
                    show(_this);
                }
            }).mouseout(function() {
                clearTimeout(time);
            });

            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>

</html>

原文地址:https://www.cnblogs.com/loewe0202/p/8667381.html

时间: 2024-11-03 03:47:41

JQ选项卡(面向对象)的相关文章

选项卡面向对象练习

面向对象的选项卡 原则 :先写出普通的写法,然后改成面向对象写法 . 普通方法变型: 尽量不要出现函数嵌套函数 可以有全局变量 把onload中不是赋值的语句放到单独函数中 改成面向对象: 全局变量就是属性 函数就是方法 Onload中创建对象 改this指向问题 下面是普通代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

简易选项卡面向对象加事件委托方式实现

选项卡,都不陌生,今天把之前的代码翻出来重写了下.不多说了,直接上代码 <script> function Tab(){ this.init.apply(this,arguments); } Tab.prototype = { /* 初始化方法 获取html元素(视图),并绑定事件 */ init:function(){ this.tab = document.getElementById('tab'); this.tabs = tab.getElementsByTagName('li');

jq 选项卡

<!doctype html> <html> <head> <meta charset="utf-8"> <style> ul,li{ list-style-type:none; } li{ width:50px; height:30px; background:white; border:1px solid #CCC; display:inline; padding:8px; cursor:pointer; } div{ w

组件开发之选项卡-1

1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script> 8

JQuery基础三

JQ选项卡实列<style> #div1 div{ width:200px; height:200px; border:1px red solid; display:none;} .active{ background:red;} </style> <script type="text/javascript" src="jquery-1.10.1.min.js"></script> <script> $(f

面向对象选项卡组件

离校实习前端工作一个月,第一次用面向对象写的点击切换选项卡组件,点击左右按钮分别切换不同的选项 基于JQ的一个组件 //创建构造函数function ShowNews(selector){ this.i=0; this.num=$(selector).length;}//添加切换方法ShowNews.prototype.show=function(selector,nextbtn,prevbtn){ var _this=this;//下一张$(nextbtn).click(function(){

面向对象-选项卡

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>面向对象-选项卡</title> 6 <style type="text/css"> 7 * { margin:0; padding:0; } 8 li { list-style: none; } 9 a { text-decoration:no

JS实现选项卡切换——原生与JQ

原生 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Conte

面向对象的tab选项卡实现

利用最基础的面向对象的思想,实现tab选项卡效果: 效果截图: HTML代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>面向对象的tab选项卡实现</title> <link rel="stylesheet" href="tab.css"> &l