zoukankan      html  css  js  c++  java
  • MUI组件

    1、cardview(卡片视图)

    使用mui-card类即可生成一个卡片容器,卡片视图主要有页眉、内容区、页脚三部分组成,结构如下:

    <div class="mui-card">
    	<!--页眉,放置标题-->
    	<div class="mui-card-header">页眉</div>
    	<!--内容区-->
    	<div class="mui-card-content">内容区</div>
    	<!--页脚,放置补充信息或支持的操作-->
    	<div class="mui-card-footer">页脚</div>
    </div>

    卡片页眉及内容区,均支持放置图片; 页眉放置图片的话,需要在.mui-card-header节点上增加.mui-card-media类,然后设置一张图片做背景图即可,代码如下:

    <div class="mui-card-header mui-card-media" style="height:40vw;background-image:url(../images/cbd.jpg)"></div>

    若希望在页眉放置更丰富的信息,比如头像、主标题、副标题,则需使用.mui-media-body类,示例代码如下:

    <div class="mui-card-header mui-card-media">
    	<img src="../images/logo.png" />
    	<div class="mui-media-body">
    		小M
    		<p>发表于 2016-06-30 15:30</p>
    	</div>
    
    </div>

    2、
    图片轮播

    图片轮播继承自slide插件,因此其DOM结构、事件均和slide插件相同;

    
    

    DOM结构

    默认不支持循环播放,DOM结构如下:
    <div class="mui-slider">
      <div class="mui-slider-group">
        <div class="mui-slider-item"><a href="#"><img src="1.jpg" /></a></div>
        <div class="mui-slider-item"><a href="#"><img src="2.jpg" /></a></div>
        <div class="mui-slider-item"><a href="#"><img src="3.jpg" /></a></div>
        <div class="mui-slider-item"><a href="#"><img src="4.jpg" /></a></div>
      </div>
    </div>
    
    

    假设当前图片轮播中有1、2、3、4四张图片,从第1张图片起,依次向左滑动切换图片,当切换到第4张图片时,继续向左滑动,接下来会有两种效果:

    
    
    • 支持循环:左滑,直接切换到第1张图片;
    • 不支持循环:左滑,无反应,继续显示第4张图片,用户若要显示第1张图片,必须连续向右滑动切换到第1张图片;
    当显示第1张图片时,继续右滑是否显示第4张图片,是同样问题;这个问题的实现需要通过.mui-slider-loop类及DOM节点来控制;
    
    

    若要支持循环,则需要在.mui-slider-group节点上增加.mui-slider-loop类,同时需要重复增加2张图片,图片顺序变为:4、1、2、3、4、1,代码示例如下:

    
    
    <div class="mui-slider">
      <div class="mui-slider-group mui-slider-loop">
        <!--支持循环,需要重复图片节点-->
        <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="4.jpg" /></a></div>
        <div class="mui-slider-item"><a href="#"><img src="1.jpg" /></a></div>
        <div class="mui-slider-item"><a href="#"><img src="2.jpg" /></a></div>
        <div class="mui-slider-item"><a href="#"><img src="3.jpg" /></a></div>
        <div class="mui-slider-item"><a href="#"><img src="4.jpg" /></a></div>
        <!--支持循环,需要重复图片节点-->
        <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="1.jpg" /></a></div>
      </div>
    </div>
    
    

    JS Method

    
    

    mui框架内置了图片轮播插件,通过该插件封装的JS API,用户可以设定是否自动轮播及轮播周期,如下为代码示例:

    
    
    //获得slider插件对象
    var gallery = mui('.mui-slider');
    gallery.slider({
      interval:5000//自动轮播周期,若为0则不自动播放,默认为0;
    });
    
    

    因此若希望图片轮播不要自动播放,而是用户手动滑动才切换,只需要通过如上方法,将interval参数设为0即可。

    
    

    若要跳转到第x张图片,则可以使用图片轮播插件的gotoItem方法,例如:

    
    
    //获得slider插件对象
    var gallery = mui('.mui-slider');
    gallery.slider().gotoItem(index);//跳转到第index张图片,index从0开始;
    
    

    注意:mui框架会默认初始化当前页面的图片轮播组件;若轮播组件内容为js动态生成时(比如通过ajax动态获取的营销信息),则需要在动态生成完整DOM (包含mui-slider下所有DOM结构) 后,手动调用图片轮播的初始化方法;代码如下:

    
    
    //获得slider插件对象
    var gallery = mui('.mui-slider');
    gallery.slider({
      interval:5000//自动轮播周期,若为0则不自动播放,默认为0;
    });
     


  • 相关阅读:
    dotnet core 获取 MacAddress 地址方法
    dotnet core 获取 MacAddress 地址方法
    dotnet core 发布只带必要的依赖文件
    dotnet core 发布只带必要的依赖文件
    Developing Universal Windows Apps 开发UWA应用 问答
    Developing Universal Windows Apps 开发UWA应用 问答
    cmd 如何跨驱动器移动文件夹
    cmd 如何跨驱动器移动文件夹
    C++ 驱动开发 error LNK2019
    C++ 驱动开发 error LNK2019
  • 原文地址:https://www.cnblogs.com/zhangxiaona/p/6854051.html
Copyright © 2011-2022 走看看