微金所案例总结——Bootstrap应用&模板引擎的使用

自定义字体图标(@font-face)

@font-face {
    
    
   /*申明字体名称*/
   font-family: 'wjs';
   /*引入字体文件*/
   src:
       url(lib/fonts/MiFie-Web-Font.svg) format('svg'),
       url(lib/fonts/MiFie-Web-Font.eot) format('embedded-opentype'),
       url(lib/fonts/MiFie-Web-Font.ttf) format('truetype'),
       url(lib/fonts/MiFie-Web-Font.woff) format('woff');
}
.font::before{
    
    
   font-family: 'wjs';
   content: "\e90e";
   font-size: 30px;
   color: #4e6ef2;
}

/*<span class="font"></span>*/

Vertical-align复习

值	描述
baseline	默认。元素放置在父元素的基线上
sub	垂直对齐文本的下标
supper	垂直对齐文本的上标
top	元素的顶端与行中最高元素的顶端对齐
text-top	元素的顶端与父元素字体的顶端对齐
middle	把此元素放在父元素的中部
bottom	元素的顶端与行中最低元素的顶端对齐
text-bottom	元素的底端与行中最低元素的底端对齐
inherit	从父元素继承vertical-align属性的值，任何版本的IE浏览器都不支持inherit
%	使用 “line-height” 属性的百分比值来排列此元素。允许使用负值。

例：logo与name中线对齐

.wjs_nav .wjs_icon_logo{
    
    
    font-size: 50px;
    color:#e92322;
    vertical-align: middle;
}
.wjs_nav .wjs_icon_name{
    
    
    font-size: 36px;
    color: #333;
    vertical-align: middle;
}

模板引擎动态添加轮播图

需求分析

1.获取轮播图数据 ajax
2.根据数据动态渲染，分别适配移动端和PC端
2.1准备数据
2.2把数据转换成html格式的字符串（动态创建元素，字符串拼接，模板引擎【artTemplate】）
2.3把字符串渲染到页面当中
3.测试功能  页面尺寸发生改变重新渲染
4、移动端手势切换

ui框架&模板引擎

类型	框架
ui框架	boostrap，妹子UI，Jquery，easyUI,jqueryMobile,mui,framework7…
关于移动端的UI框架	boostrap,jqueryMobile,mui,framework7…
模板引擎	artTemplate,handlebars,mustache,baiduTemplate,velocity(淘宝),underscore (Awesomes->前端库->模板引擎)

转JSON格式数据

获取轮播图数据（ajax）

• 数据准备

[
  {
    
    
    "pcUrl": "../images/slide_01_2000x410.jpg",
    "mUrl": "../images/slide_01_640x340.jpg"
  },
  {
    
    
    "pcUrl": "../images/slide_02_2000x410.jpg",
    "mUrl": "../images/slide_02_640x340.jpg"
  },
  {
    
    
    "pcUrl": "../images/slide_03_2000x410.jpg",
    "mUrl": "../images/slide_03_640x340.jpg"
  },
  {
    
    
    "pcUrl": "../images/slide_04_2000x410.jpg",
    "mUrl": "../images/slide_04_640x340.jpg"
  }
]

• 获取数据

$.ajax({
    
    
    type: 'get',
    url: 'js/data.json', /*路径从index.html出发*/
    /*强制转换后台返回的数据为json对象*/
    /*强制转换不成功程序报错，不会执行success，执行error回调*/
    dataType: 'json',
    data: '',
    success: function (data) {
    
    
        ...
    }
});

根据数据动态渲染

2.1 准备数据
2.2 把数据转换成html格式的字符串
2.3 html静态内容——>动态

/*点容器*/
var pointHtml=template('pointTemplate',{
    
    list:data});/*pointTemplate是点容器的id*/

/*图片容器*/
var imageHtml=template('imageTemplate',{
    
    list:data,isM:isMobile}); /*isMobile用于区分pc端和移动端，isMobile=$(window).width()<768*/

/*2.3 把字符渲染到页面当中*/
$('.carousel-indicators').html(pointHtml);
$('.carousel-inner').html(imageHtml);/*页面中的点容器*/

打印pointHtml如下：

模板引擎在html中的使用（注意text/template）

<!--点-->
<ol class="carousel-indicators">

</ol>
<!--图片-->
<div class="carousel-inner" role="listbox">

</div>

<script type="text/template" id="pointTemplate">
    <% for(var i=0;i<list.length;i++){
    
     %>
        <li data-target="#carousel-example-generic" data-slide-to="<%=i%>" class="<%=i==0?'active':''%>"></li>
    <% } %>
</script>

<!--图片-->
<script type="text/template" id="imageTemplate">
    <% for(var i=0;i<list.length;i++){
    
     %>
        <div class="item <%=i==0?'active':''%>">
            <!--按需加载图片-->
            <% if(isM){
    
     %>
                <a href="#" class="m_imgBox hidden-lg hidden-md hidden-sm"><img src="<%=list[i].mUrl%>" alt=""></a>
            <% }else{
    
     %>
                <a href="#" style="background-image: url('<%=list[i].pcUrl%>')" class="pc_imgBox hidden-xs"></a>
            <% } %>
        </div>
    <% } %>
</script>

注意：模板引擎内不能使用全局变量

  <!--<% console.log(list); %>-->

Bootstrap carousel模板

测试功能 resize-页面尺寸发生改变

$(window).on('resize',function () {
    
    
    render();
    /*trigger——>通过js主动触发某个事件——>完成页面初始化*/
}).trigger('resize');

移动端手势切换

• 结合通过touch事件判断是否发生滑动

startX=e.originalEvent.touches[0].clientX;/*originalEvent代表js原生事件*/

$('.carousel').carousel('next');/*下一张*/
$('.carousel').carousel('prev');/*上一张*/

var startX=0;
var distanceX=0;
var isMove=false;


/*originalEvent代表js原生事件*/
$('.wjs_banner').on('touchstart',function (e) {
    
    
    startX=e.originalEvent.touches[0].clientX;
}).on('touchmove',function (e) {
    
    
    var moveX=e.originalEvent.touches[0].clientX;
    distanceX=moveX-startX;
    isMove=true;
}).on('touchend',function (e) {
    
    
    /*距离足够50px 并且有滑动*/
    if(isMove&&Math.abs(distanceX)>50){
    
    
        /*手势*/
        /*左滑手势*/
        if(distanceX<0){
    
    
            /*左滑*/
            $('.carousel').carousel('next');
        }else{
    
    
            /*右滑*/
            $('.carousel').carousel('prev');
        }
    }
    distanceX=0;
    startX=0;
    isMove=false;
});

动态设置元素宽度（解决换行问题）&IScroll实现区域滑动

var initMobileTab=function () {
    
    
    /*1、解决换行问题*/
    
    /* width()  内容
	* innerWidth() 内容+内边距
	* outerWidth() 内容+内边距+边框
	* outerWidth(true) 内容+内边距+边框+外边距
	* */
    var width=0;
    var $navbar=$('.navbar-parent .nav-tabs');
    $navbar.find('li').each(function (i,item) {
    
    
        width+=$(this).outerWidth(true);
    })
    $navbar.width(width);
    $('.navbar-parent').css('overflow','hidden');
    
    /*自己实现滑动效果或者使用iscroll*/
    /*new IScroll(dom,{})   要将$('.navbar-parent')转换成js对象*/
    $('.navbar-parent')[0].addEventListener('touchmove',function (e) {
    
    
        e.preventDefault();
    });

    new IScroll($('.navbar-parent')[0],{
    
    
        scrollX:true,
        scrollY:false
    });
}

优化（做数据缓存）

• 问题：页面大小每改变一次，便要重新获取一次data
• 解决方法：第一次获取到data之后便做缓存，页面更改后直接拿缓存数据 (window.data=data;)

    /*做数据缓存*/
    var getData=function (callback) {
    
    
        /*缓存了数据*/
        if(window.data){
    
    
            callback&&callback(window.data);
        }else {
    
    
            /*1、获取轮播图数据  ajax*/
            $.ajax({
    
    
                type: 'get',
                url: 'js/data.json', /*路径从index.html出发*/
                /*强制转换后台返回的数据为json对象*/
                /*强制转换不成功程序报错，不会执行success，执行error回调*/
                dataType: 'json',
                data: '',
                success: function (data) {
    
    
                    window.data = data;
                    callback && callback(window.data);
                }
            });
        }
    }

Bootstrap工具提示（要初始化）

<span class="left" data-toggle="tooltip" data-placement="bottom" title="lime"></span>
<span class="right" data-toggle="tooltip" data-placement="top" title="lightskyblue"></span>