bootstrap标签页与模板引擎

标签页

与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. 保留：利于维护，方便产品跟新的时候不用再去修改代码