mui的使用

mui的部分使用

0.真机运行时所有文件名不能有中文名。

1.折叠面板关键：mui-collapse配合mui-collapse-content可以起到折叠作用

<ul class="mui-table-view"> 
        <li class="mui-table-view-cell mui-collapse">
            <a class="mui-navigate-right" href="#">面板1</a>
            <div class="mui-collapse-content">
                <p>面板1子内容</p>
            </div>
        </li>
    </ul>

2.操作表关键：采用锚点的形式出现或隐藏，所以要有href指向要展示的内容的id。取消按钮亦是如此。mui-popover mui-popover-bottom mui-popover-action这三个样式必须有。取消和其他操作各自用两个ul包裹。

<a href="#sheet1"></a>              <!--重点-->
<div id="sheet1" class="mui-popover mui-popover-bottom mui-popover-action ">
    <!-- 可选择菜单 -->
    <ul class="mui-table-view">
      <li class="mui-table-view-cell">
        <a href="#">菜单1</a>
      </li>
      <li class="mui-table-view-cell">
        <a href="#">菜单2</a>
      </li>
    </ul>
    <!-- 取消菜单 -->
    <ul class="mui-table-view">
      <li class="mui-table-view-cell">
        <a href="#sheet1"><b>取消</b></a>         <!--重点-->
      </li>
    </ul>
</div>

3.原生操作表：

4.广告位投放：

5.ajax:

6.角标：看源文件

7.云端支付：

8.选项卡切换：a要有mui-control-item样式并且有href属性指向要打开的div。要打开的div必须有mui-control-content样式且id名为href所指向的名字。一开始展示的div要有mui-active属性才能展示出来

9.导航的制作：na标签必须mui-bar-tab样式a标签必须有mui-tab-item样式。如果想要只显示视频详情和视频问答并且相隔两个a标签距离，可以把总体统计和学习成员字体删除，但是a标签要保留。

<nav class="mui-bar-tab">
                    <a class="mui-tab-item mui-active">
                        视频详情
                    </a>
                    <a class="mui-tab-item">
                        总体统计
                    </a>
                    <a class="mui-tab-item">
                        学习成员
                    </a>
                    <a class="mui-tab-item">
                        视频问答
                    </a>
                </nav>

10.侧滑栏的制作（菜单栏和主页面一起动）

<!-- 侧滑导航根容器 -->
        <div class="mui-off-canvas-wrap mui-draggable">
            <!--侧滑菜单部分-->
            <aside id="offCanvasSide" class="mui-off-canvas-left">
            </aside>

            <!--主界面部分-->
            <div class="mui-inner-wrap">
                <header class="mui-bar mui-bar-nav">
                    <a href="#offCanvasSide" class="">a</a>
                    <h1 class="mui-title">div模式右滑菜单</h1>
                </header>
                <div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
                </div>
                <!-- off-canvas backdrop --><!--蒙版遮罩-->
                <div class="mui-off-canvas-backdrop"></div>
            </div>
        </div>

11.弹出菜单 a要指向弹出的div的id。 div要有被指向的id，且有mui-popover样式。

<a href="#topPopover">大厦法定</a>
    <div id="topPopover" class="mui-popover">

    </div>

12.图文表格：图片在上文字在下 有mui-grid-view和mui-col-xs-6样式

<ul class="mui-table-view mui-grid-view">
                <li class="mui-table-view-cell mui-media mui-col-xs-6">
                    <a href="#">
                        <img class="mui-media-object" src="../images/shuijiao.jpg">
                        <div class="mui-media-body">幸福就是可以一起睡觉</div></a></li>
                <li class="mui-table-view-cell mui-media mui-col-xs-6">
                    <a href="#">
                        <img class="mui-media-object" src="../images/muwu.jpg">
                        <div class="mui-media-body">想要一间这样的木屋，静静的喝咖啡</div></a></li>

            </ul>