標籤頁

與h5排他一樣第一個ul中的a標籤中href值一定與下面id值對應

<div>
  <!-- Nav tabs -->
  <ul class="nav nav-tabs">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>

</div>
 

禁止觸控事件

document.querySelector('.nav-tabs-father').addEventListener('touchmove',function (e) {
        e.preventDefault();
    });

Ischia外掛：區域滑動效果（子容器給大於父容器的寬度）

安裝外掛   iscroll.js

   //區域滑動
    new IScroll($('.nav-tabs-father')[0],{
        scrollX:true,
        scrollY:false
            //這個外掛會預設吧點選事件禁用,你需要手動開啟,

    });
 

工具提示（一定要初始化）

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
 

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

編寫模板

第一步：在html中匯入外掛

第二步：使用一個type="text/html"的script標籤存放模板：

<script id="test" type="text/html">
<h1>{{title}}</h1>
<ul>
    {{each list as value i}}
        <li>索引 {{i + 1}} ：{{value}}</li>
    {{/each}}
</ul>
</script>

第三步在js中通過ajax動態的傳入資料到html中

3.1通過getData防止每次呼叫訪問一次伺服器，所以進行判斷，如果有資料，就不用ajax傳輸，直接自呼叫，否則ajax傳輸並且將資料快取下來，要用window.data = data全域性變數

3.2快取資料之後渲染到頁面

通過template("id",data)這裡的id與上面html中對應

再通過jQuery  $(''").html()

 var getData = function (callback) {
                        if (window.data) {           
                            callback && callback(window.data);
                        } else {
                            $.ajax({
                                type: 'get', /*獲取方式*/
                                url: 'js/data.json', /*相對於html的相對路徑*/
                                dataType: 'json',//強制轉換後臺返回資料為json,強制轉換不成功報錯，執行error
                                data: '',   //傳輸資料
                                success: function (data) {
                                    window.data = data;    //資料快取
                                    callback && callback(window.data);
                                },
                                error:function () {
                                    console.log("資料沒找到");
                                }
                            });
                }
            };

            //渲染業務
            var render = function() {
                getData(function (data) {
                    //根據資料動態渲染，根據裝置   螢幕判斷
                    var isMobile = $(window).width() < 768 ? true : false;
                    // console.log(isMobile);
                    // 準備資料   把資料轉換為html
                    // 使用模板引擎   點，圖片
                    //新增資料
                    // artTemplate('id',data)_,模板放在html裡面不容易丟失
                    var pointHtml = template('pointTemplate', {list: data});
                    /*data為陣列所以要轉換*/
                    // console.log(pointHtml);
                    var imageHtml = template('imageTemplate', {list:data,isMobile: isMobile});
                    console.log(imageHtml);
                    $('.carousel-indicators').html(pointHtml);
                    $('.carousel-inner').html(imageHtml);
                });
            };

上面需要注意的是我們傳入的資料暫時用json代替，但是在ajax   url: 'js/data.json', /*相對於html的相對路徑*/  哪怕是js與json在同一個資料夾路徑也要把路徑寫成上面格式，相對於html，是在html引入的

在使用bootstrap時

1.拷貝原始碼的模組樣式：準確定位到所有元素的選擇器並且能保證優先順序比原始碼高
2.針對功能進行覆蓋：更改模組名稱
3.但是有一些沒有用到的選擇器 程式碼的冗餘
4. 刪除：降低程式碼量 
5. 保留：利於維護，方便產品跟新的時候不用再去修改程式碼