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

淩亂°似流年 2022-05-17 01:04 181阅读 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>