标签页
与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引入的
扫描二维码关注公众号，回复：
3956330 查看本文章
在使用bootstrap时
1.拷贝源码的模块样式：准确定位到所有元素的选择器并且能保证优先级比源码高 2.针对功能进行覆盖：更改模块名称 3.但是有一些没有用到的选择器 代码的冗余 4. 删除：降低代码量 5. 保留：利于维护，方便产品跟新的时候不用再去修改代码