当前位置： 移动技术网 > IT编程>网页制作>CSS > bootstrap标签页与模板引擎

bootstrap标签页与模板引擎

2018年11月25日  | 移动技术网IT编程  | 我要评论

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网