bootstrap标签页与模板引擎
bootstrap标签页与模板引擎
与h5排他一样第一个ul中的a标签中href值一定与下面id值对应
home
profile
messages
settings
禁止触摸事件
document.queryselector('.nav-tabs-father').addeventlistener('touchmove',function (e) {
e.preventdefault();
});
ischia插件：区域滑动效果(子容器给大于父容器的宽度)
安装插件 iscroll.js
//区域滑动
new iscroll($('.nav-tabs-father')[0],{
scrollx:true,
scrolly:false
//这个插件会默认吧点击事件禁用,你需要手动开启,
});
工具提示(一定要初始化)
tooltip on lefttooltip on toptooltip on bottomtooltip on right
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
编写模板
第一步：在html中导入插件
第二步：使用一个type="text/html"的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. 保留：利于维护，方便产品跟新的时候不用再去修改代码