From d64ea8a7d8541bb4f49a209e104204e60e1d8f4e Mon Sep 17 00:00:00 2001
From: billyang <2319103827@qq.com>
Date: Mon, 11 May 2015 20:35:38 +0800
Subject: [PATCH] a

---
 package/tab/code/2319103827/2/index.html  | 67 +++++++++++++++++
 package/tab/code/2319103827/2/index2.html | 76 ++++++++++++++++++++
 package/tab/code/2319103827/2/index3.html | 78 ++++++++++++++++++++
 package/tab/code/2319103827/2/index4.html | 81 +++++++++++++++++++++
 package/tab/code/2319103827/2/index5.html | 87 +++++++++++++++++++++++
 5 files changed, 389 insertions(+)
 create mode 100644 package/tab/code/2319103827/2/index.html
 create mode 100644 package/tab/code/2319103827/2/index2.html
 create mode 100644 package/tab/code/2319103827/2/index3.html
 create mode 100644 package/tab/code/2319103827/2/index4.html
 create mode 100644 package/tab/code/2319103827/2/index5.html
diff --git a/package/tab/code/2319103827/2/index.html b/package/tab/code/2319103827/2/index.html
new file mode 100644
index 0000000..5c70210
--- /dev/null
+++ b/package/tab/code/2319103827/2/index.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Tab 选项卡（第一阶段） By 2319103827</title>
+    <style>
+span {
+    padding: 1em;
+    border: 1px solid green;
+    cursor: pointer;
+}
+.on{
+    color:red;
+}
+hr{
+    margin-top: 1em;
+    height:0;
+    border:none;
+    border-bottom:1px solid #DDD;
+}
+.show {
+    display: block;
+    background-color: pink;
+}
+div{
+    display: none;
+    border:1px solid #ABCDEF;
+    padding:1em;
+}
+    </style>
+</head>
+<body>
+    <h1>
+        Tab 选项卡（第一阶段） By 2319103827
+    </h1>
+
+    <span class="on">1</span>
+    <span>2</span>
+    <span>3</span>
+    <hr>
+    <div class="show"></div>
+    <div>b</div>
+    <div>c</div>
+    <script src="../../../../../static/jquery/1.11.2/jquery.js"></script>
+    <script>
+$(function () {
+    $('span').on('click', function () {
+        var $this = $(this)
+        var index = $this.index('span')
+        $('.on').removeClass('on')
+        $this.addClass('on')
+        $('.show').removeClass('show')
+        $('div').eq(index).addClass('show')
+
+
+        var index = $this.index('span')
+        $('div').eq(index).text(index+1)
+    })
+})
+    </script>
+
+    
+    <p>
+        <a href="https://github.com/nimojs/learn-js">learn-js</a>: 一个 JavaScript 互助学习的项目。接受组件开发的挑战，提交代码让他人评论你的代码以提高。
+    </p>
+</body>
+</html>
\ No newline at end of file
diff --git a/package/tab/code/2319103827/2/index2.html b/package/tab/code/2319103827/2/index2.html
new file mode 100644
index 0000000..fd5362e
--- /dev/null
+++ b/package/tab/code/2319103827/2/index2.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Tab 选项卡（第一阶段） By 2319103827</title>
+    <style>
+.newtab span {
+    padding: 1em;
+    border: 1px solid green;
+    cursor: pointer;
+}
+.on{
+    color:red;
+}
+hr{
+    margin-top: 1em;
+    height:0;
+    border:none;
+    border-bottom:1px solid #DDD;
+}
+
+.newtab div{
+    display: none;
+    border:1px solid #ABCDEF;
+    padding:1em;
+}
+.newtab .show {
+    display: block;
+    background-color: pink;
+}
+    </style>
+</head>
+<body>
+    <h1>
+        Tab 选项卡（第一阶段） By 2319103827
+    </h1>
+    <div class="newtab">
+        <span class="on triggers">1</span>
+        <span class="triggers">2</span>
+        <span class="triggers">3</span>
+    <hr>
+        <div class="show contents">a</div>
+        <div class="contents">b</div>
+        <div class="contents">c</div>
+    </div>
+    <script src="../../../../../static/jquery/1.11.2/jquery.js"></script>
+    <script type="text/javascript">
+    $(function(){
+        var tab = function(obj){
+            $(obj.triggers).click(function(){
+                var $this = $(this)
+                var index = $this.index(obj.triggers)
+                $('.on').removeClass('on')
+                $this.addClass('on')
+                $('.show').removeClass('show')
+                $(obj.contents).eq(index).addClass('show')
+
+
+                var index = $this.index(obj.triggers)
+                $(obj.contents).eq(index).text(index+1)
+            })
+        }
+        tab({
+            element: '.newtab',
+            triggers: '.triggers',
+            contents: '.contents'
+        })
+    })
+    </script>
+
+    
+    <p>
+        <a href="https://github.com/nimojs/learn-js">learn-js</a>: 一个 JavaScript 互助学习的项目。接受组件开发的挑战，提交代码让他人评论你的代码以提高。
+    </p>
+</body>
+</html>
\ No newline at end of file
diff --git a/package/tab/code/2319103827/2/index3.html b/package/tab/code/2319103827/2/index3.html
new file mode 100644
index 0000000..5eecd59
--- /dev/null
+++ b/package/tab/code/2319103827/2/index3.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Tab 选项卡（第一阶段） By 2319103827</title>
+    <style>
+.newtab span {
+    padding: 1em;
+    border: 1px solid green;
+    cursor: pointer;
+}
+.ui-tab-active{
+    background-color:red;
+}
+hr{
+    margin-top: 1em;
+    height:0;
+    border:none;
+    border-bottom:1px solid #DDD;
+}
+
+.newtab div{
+    display: none;
+    border:1px solid #ABCDEF;
+    padding:1em;
+}
+.newtab .show {
+    display: block;
+    background-color: pink;
+}
+    </style>
+</head>
+<body>
+    <h1>
+        Tab 选项卡（第一阶段） By 2319103827
+    </h1>
+    <div class="newtab">
+        <span class="triggers">1</span>
+        <span class="triggers">2</span>
+        <span class="triggers">3</span>
+    <hr>
+        <div class="contents">a</div>
+        <div class="contents">b</div>
+        <div class="contents">c</div>
+    </div>
+    <script src="../../../../../static/jquery/1.11.2/jquery.js"></script>
+    <script type="text/javascript">
+    $(function(){
+        var tab = function(obj){
+            var index;
+            (obj.activeIndex == null) ? index = 0 : index = obj.activeIndex
+            $(obj.triggers).eq(index).addClass(obj.activeTriggerClass)
+            $(obj.contents).eq(index).addClass('show')
+            $(obj.triggers).click(function(){
+                var $this = $(this)
+                var index = $this.index(obj.triggers)
+                $('.ui-tab-active').removeClass(obj.activeTriggerClass)
+                $this.addClass(obj.activeTriggerClass)
+                $('.show').removeClass('show')
+                $(obj.contents).eq(index).addClass('show')
+            })
+        }
+        tab({
+            element: '.newtab',
+            triggers: '.triggers',
+            contents: '.contents',
+            // activeIndex: 0
+            activeTriggerClass: 'ui-tab-active'
+        })
+    })
+    </script>
+
+    
+    <p>
+        <a href="https://github.com/nimojs/learn-js">learn-js</a>: 一个 JavaScript 互助学习的项目。接受组件开发的挑战，提交代码让他人评论你的代码以提高。
+    </p>
+</body>
+</html>
\ No newline at end of file
diff --git a/package/tab/code/2319103827/2/index4.html b/package/tab/code/2319103827/2/index4.html
new file mode 100644
index 0000000..0b0715e
--- /dev/null
+++ b/package/tab/code/2319103827/2/index4.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Tab 选项卡（第一阶段） By 2319103827</title>
+    <style>
+.newtab span {
+    padding: 1em;
+    border: 1px solid green;
+    cursor: pointer;
+}
+.ui-tab-active{
+    background-color:red;
+}
+hr{
+    margin-top: 1em;
+    height:0;
+    border:none;
+    border-bottom:1px solid #DDD;
+}
+
+.newtab div{
+    display: none;
+    border:1px solid #ABCDEF;
+    padding:1em;
+}
+.newtab .show {
+    display: block;
+    background-color: pink;
+}
+    </style>
+</head>
+<body>
+    <h1>
+        Tab 选项卡（第一阶段） By 2319103827
+    </h1>
+    <div class="newtab">
+        <span class="triggers">1</span>
+        <span class="triggers">2</span>
+        <span class="triggers">3</span>
+    <hr>
+        <div class="contents">a</div>
+        <div class="contents">b</div>
+        <div class="contents">c</div>
+    </div>
+    <script src="../../../../../static/jquery/1.11.2/jquery.js"></script>
+    <script type="text/javascript">
+    $(function(){
+        var tab = function(obj){
+            var index;
+            var triggerType;
+            (obj.activeIndex == null) ? index = 0 : index = obj.activeIndex;
+            (obj.triggerType === "hover") ? triggerType = 'mouseover' : triggerType = 'click';
+            $(obj.triggers).eq(index).addClass(obj.activeTriggerClass)
+            $(obj.contents).eq(index).addClass('show')
+            $(obj.triggers).on(triggerType,function(){
+                var $this = $(this)
+                var index = $this.index(obj.triggers)
+                $('.ui-tab-active').removeClass(obj.activeTriggerClass)
+                $this.addClass(obj.activeTriggerClass)
+                $('.show').removeClass('show')
+                $(obj.contents).eq(index).addClass('show')
+            })
+        }
+        tab({
+            element: '.newtab',
+            triggers: '.triggers',
+            contents: '.contents',
+            // activeIndex: 0,
+            activeTriggerClass: 'ui-tab-active',
+            triggerType: 'hover'
+        })
+    })
+    </script>
+
+    
+    <p>
+        <a href="https://github.com/nimojs/learn-js">learn-js</a>: 一个 JavaScript 互助学习的项目。接受组件开发的挑战，提交代码让他人评论你的代码以提高。
+    </p>
+</body>
+</html>
\ No newline at end of file
diff --git a/package/tab/code/2319103827/2/index5.html b/package/tab/code/2319103827/2/index5.html
new file mode 100644
index 0000000..bd087be
--- /dev/null
+++ b/package/tab/code/2319103827/2/index5.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Tab 选项卡（第一阶段） By 2319103827</title>
+    <style>
+.newtab span {
+    padding: 1em;
+    border: 1px solid green;
+    cursor: pointer;
+}
+.ui-tab-active{
+    background-color:red;
+}
+hr{
+    margin-top: 1em;
+    height:0;
+    border:none;
+    border-bottom:1px solid #DDD;
+}
+
+.newtab div{
+    display: none;
+    border:1px solid #ABCDEF;
+    padding:1em;
+}
+.newtab .show {
+    display: block;
+    background-color: pink;
+}
+    </style>
+</head>
+<body>
+    <h1>
+        Tab 选项卡（第一阶段） By 2319103827
+    </h1>
+    <div class="newtab">
+        <span class="triggers">1</span>
+        <span class="triggers">2</span>
+        <span class="triggers">3</span>
+    <hr>
+        <div class="contents">a</div>
+        <div class="contents">b</div>
+        <div class="contents">c</div>
+    </div>
+    <script src="../../../../../static/jquery/1.11.2/jquery.js"></script>
+    <script type="text/javascript">
+    $(function(){
+        var tab = function(obj){
+            var index;
+            var triggerType;
+            (obj.activeIndex == null) ? index = 0 : index = obj.activeIndex;
+            (obj.triggerType === "hover") ? triggerType = 'mouseover' : triggerType = 'click';
+            $(obj.triggers).eq(index).addClass(obj.activeTriggerClass)
+            $(obj.contents).eq(index).addClass('show')
+            $(obj.triggers).on(triggerType,function(){
+                var $this = $(this)
+                console.log($(obj.contents).eq(index))
+                var index = $this.index(obj.triggers)
+                $('.ui-tab-active').removeClass(obj.activeTriggerClass)
+                $this.addClass(obj.activeTriggerClass)
+                $('.show').removeClass('show')
+                $(obj.contents).eq(index).addClass('show')
+                obj.onSwitch(index, $(obj.triggers).length)
+            })
+        }
+        tab({
+            element: '.newtab',
+            triggers: '.triggers',
+            contents: '.contents',
+            activeIndex: 0,
+            activeTriggerClass: 'ui-tab-active',
+            triggerType: 'click',
+            onSwitch: function (index, count) {
+                var html = "当前是第" + (index+1) + "显示,总共有" + count + "页面"
+                console.log(html)
+            }
+        })
+    })
+    </script>
+
+    
+    <p>
+        <a href="https://github.com/nimojs/learn-js">learn-js</a>: 一个 JavaScript 互助学习的项目。接受组件开发的挑战，提交代码让他人评论你的代码以提高。
+    </p>
+</body>
+</html>
\ No newline at end of file
