Hbulider得前端基础_mui框架总结2_H5模式actionsheet

最新推荐文章于 2018-12-28 10:55:36 发布

奇点码农

最新推荐文章于 2018-12-28 10:55:36 发布

阅读量368

点赞数

分类专栏： App移动开发-Hbulider

本文链接：https://blog.csdn.net/cdc8596/article/details/81395940

版权

App移动开发-Hbulider 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

今天主要是讲解ActionSheet的源码

<body>

1.标题部分
       <header class="mui-bar mui-bar-nav">
           <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
           <h1 class="mui-title">H5模式actionSheet</h1>
       </header>

2.构造整体,展示各模块
       <nav class="mui-bar mui-bar-tab">
           <a class="mui-tab-item" href="#delete">
               <span class="mui-icon mui-icon-trash"></span>
           </a>
           <a class="mui-tab-item" href="#"></a>
           <a class="mui-tab-item" href="#"></a>
           <a class="mui-tab-item" href="#forward">
               <span class="mui-icon mui-icon-undo"></span>
           </a>
       </nav>

3.各个模块的空间描写,以及各模块取消的功能
       <div class="mui-content">
           <div class="mui-content-padded">   
               <p>
                   <a href="#picture" class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined">打开actionsheet</a>
               </p>
               <p id="info"></p>
           </div>
       </div>
       <div id="delete" class="mui-popover mui-popover-action mui-popover-bottom">
           <ul class="mui-table-view">
               <li class="mui-table-view-cell">
                   <a href="#" style="color: #000000;">删除信息</a>
               </li>
           </ul>
           <ul class="mui-table-view">
               <li class="mui-table-view-cell">
                   <a href="#delete"><b>取消</b></a>
               </li>
           </ul>
       </div>
       <div id="forward" class="mui-popover mui-popover-action mui-popover-bottom">
           <ul class="mui-table-view">
               <li class="mui-table-view-cell">
                   <a href="#">回复</a>
               </li>
               <li class="mui-table-view-cell">
                   <a href="#">转发</a>
               </li>
               <li class="mui-table-view-cell">
                   <a href="#">打印</a>
               </li>
           </ul>
           <ul class="mui-table-view">
               <li class="mui-table-view-cell">
                   <a href="#forward"><b>取消</b></a>
               </li>
           </ul>
       </div>
       <div id="picture" class="mui-popover mui-popover-action mui-popover-bottom">
           <ul class="mui-table-view">
               <li class="mui-table-view-cell">
                   <a href="#">拍照或者录像</a>
               </li>
               <li class="mui-table-view-cell">
                   <a href="#">选取现有的</a>
               </li>
           </ul>
           <ul class="mui-table-view">
               <li class="mui-table-view-cell">
                   <a href="#picture"><b>取消</b></a>
               </li>
           </ul>
       </div>
   </body>