Simple JQuery Plugin Tab/簡易的jq tab外掛

MillionChen發表於2017-11-20
jQueryPlugin

###html:Simple JQuery Plugin Tab

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Simple JQuery Plugin Tab</title>
    <!--IMPORT init resetCSS-->
    <link rel="stylesheet" href="css/reset.min.css">
    <link rel="stylesheet" href="css/tab.css">
</head>
<body>
<div class="tabBox">
    <ul class="tab clearfix">
        <li>新聞</li>
        <li>電影</li>
        <li>動漫</li>
    </ul>
    <div class="con">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
    <div class="con">
        <ul>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
        </ul>
    </div>
    <div class="con">
        <ul>
            <li>11</li>
            <li>12</li>
            <li>13</li>
            <li>14</li>
            <li>15</li>
        </ul>
    </div>
</div>

<div class="tabBox">
    <ul class="tab clearfix">
        <li>新聞</li>
        <li>電影</li>
        <li>動漫</li>
    </ul>
    <div class="con">
        1
    </div>
    <div class="con">
        2
    </div>
    <div class="con">
        3
    </div>
</div>

<div class="tabBox">
    <ul class="tab clearfix">
        <li>新聞</li>
        <li>電影</li>
        <li>動漫</li>
        <li>科技</li>
    </ul>
    <div class="con">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
    <div class="con">
        <ul>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
        </ul>
    </div>
    <div class="con">
        <ul>
            <li>11</li>
            <li>12</li>
            <li>13</li>
            <li>14</li>
            <li>15</li>
        </ul>
    </div>
    <div class="con">
        <ul>
            <li>16</li>
            <li>17</li>
            <li>18</li>
            <li>19</li>
            <li>20</li>
        </ul>
    </div>
</div>

<!--IMPORT jquery-1.11.3.min.js-->
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/tab.js"></script>
<script>
    //
    $('.tabBox').each(function (index) {
        if (index === 0) {
            $(this).pluginTab({
                eventType: 'mouseover'
            });
        }

        if (index === 1) {
            $(this).pluginTab({
                initIndex: 1
            });
        }

        if (index === 2) {
            $(this).pluginTab({
                initIndex: 2,
                eventType: 'mouseover'
            });
        }
    });
</script>
</body>
</html>複製程式碼

###css :tab.css

.tabBox {
    margin: 20px auto;
    width: 500px;
    font-size: 14px;
}

.tabBox .tab {
    position: relative;
    top: 1px;
}

.tabBox .tab li {
    float: left;
    margin-right: 15px;
    padding: 0 15px;
    height: 35px;
    line-height: 35px;
    border: 1px solid #999;
    background: #EEE;
    cursor: pointer;
}

.tabBox .tab li.select {
    background: #FFF;
    border-bottom-color: #FFF;
}

.tabBox .con {
    display: none;
    padding: 10px;
    height: 150px;
    border: 1px solid #999;
}

.tabBox .con li {
    line-height: 29px;
    border-bottom: 1px dashed #CCC;
}

.tabBox .con.select {
    display: block;
}複製程式碼

####Javascript

/*//擴充套件jq原型方法 | Extend  JQ prototype method
 * 1)設定預設引數 | Set default paramete
 * 2)獲取操作元素 | Get the dom element
 * 3)定義方法 | Define the mothod
 * 4)使用者改變預設引數 | User setting parameters
 * 5)顯示預設元素 |Whether the user sets the parameters
 * 6)繫結事件 | bindEevnt
 *
 * */
(function ($) {
    var pluginTab = function pluginTab(options) {
        //1:Set default paramete
        var _default = {
            index: 0,
            eventType: 'click'
        }

        //2:Get the dom element
        var tagBox = this, tabList = tagBox.find('.tab>li'), tabContainer = tagBox.children('.con');

        //3:Define the mothod
        var change = function change(index) {
            tabList.eq(index).addClass('select').siblings().removeClass('select');
            tabContainer.eq(index).addClass('select').siblings().removeClass('select');
        }

        //4: Whether the user sets the parameters
        options && $.each(options, function (key, value) {
            if (options.hasOwnProperty(key)) {
                _default[key] = value;

            }
        })

        //5)Show default element
        change(_default.index);

        //6: bindEevnt
        tabList.on(_default.eventType, function () {
            var $index = $(this).index();
            change($index);
        });
    }
    $.fn.extend({
        pluginTab: pluginTab
    })
})(jQuery)複製程式碼

Default parameter

{
index: 0,//預設顯示內容
eventType: 'click'//預設事件型別
}

相關文章