欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

bootstrap标签页与模板引擎

程序员文章站 2022-06-08 20:37:51
bootstrap标签页与模板引擎 与h5排他一样第一个ul中的a标签中href值一定与下面id值对应 home profile messages settings 禁止触摸事件 document....

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