Hbulider得前端基础_mui框架总结4_卡片视图&&消息框&&复选框

清疚 2022-05-17 06:26 228阅读 0赞

顺便说一下,这段时间主要是把MUI框架的控件关键代码拿出来看一下,并把每个控件主要用到的地方说一下,

并把js也拿出来看一下,控件了解清楚了,然后写个webservice,就能进行数据交互了,后面的话会做一个项目

1.卡片视图主要用于图文详解一些详情

<div class="mui-content">  
            <div class="mui-card">  
                <div class="mui-card-content">  
                    <div class="mui-card-content-inner">  
                        这是一个最简单的卡片视图控件;卡片视图通常用来显示完整独立的一段信息,比如一篇文章的预览图,作者信息,点 赞数量等  
                    </div>  
                </div>  
            </div>  
            <div class="mui-card">  
                <div class="mui-card-header">页眉</div>  
                <div class="mui-card-content">  
                    <div class="mui-card-content-inner">  
                        包含页眉页脚的卡片,页眉通常用来显示面板标题,页脚通常用来显示额外的信息或者支持的操作(比如点赞,评论)  
                    </div>  
                </div>  
                <div class="mui-card-footer">页脚</div>  
            </div>

<div class="mui-card">  
                <div class="mui-card-header mui-card-media" style="height: 40vw;background-image:url(images/timg4.jpg);"></div>  
                <div class="mui-card-content">  
                    <div class="mui-card-content-inner">  
                        <p>Posted on January 18.2016</p>  
                        <p style="color: \#333;">这里显示文章的摘要,让读者对文章有个初略的概念</p>  
                    </div>  
                </div>  
                <div class="mui-card-footer">  
                    <a class="mui-card-link">Like</a>  
                    <a class="mui-card-link">Read More</a>  
                </div>  
            </div>  
        </div>

2.消息框(主要是用于显示各种提示信息)

控件代码:

<div class="mui-content">  
            <div class="mui-content-padded" style="margin: :5px;text-align: center;">  
                <button id="alertBtn" type="button" class="mui-btn mui-btn-blue mui-btn-outlined">警告消息框</button>  
                <button id="confirmBtn" type="button" class="mui-btn mui-btn-blue mui-btn-outlined">确认消息框</button>  
                <button id="prompBtn" type="button" class="mui-btn mui-btn-blue mui-btn-outlined">输入对话框</button>  
                <button id='toastbtn' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">自动关闭对话框</button>  
                <div id="info">  
                </div>  
            </div>  
        </div>

js部分:

//mui初始化  
        mui.init(\{  
            swipeBack: true //启用右滑关闭功能  
        \});  
        var info = document.getElementById("info");  
        try  
        \{  
            document.getElementById("alertBtn").addEventListener('tap', function() \{  
                mui.alert('欢迎使用Hello MUI', 'Hello MUI', function() \{  
                    info.innerText = '你刚关闭了警告框';  
                \});  
            \});  
              
              
            document.getElementById("confirmBtn").addEventListener('tap',function()\{  
                var btnArray=\['是','否'\];  
                mui.confirm('MUI是个框架,确认?','Hello MUI',btnArray,function(e)\{  
                    if(e.index==0)\{  
                        info.innerHTML='你刚确认MUI是个好框架';  
                    \}else\{  
                        info.innerHTML='MUI没有得到你的认可,继续加油';  
                    \}  
                \});                  
            \});  
              
              
            document.getElementById("prompBtn").addEventListener('tap',function(e)\{  
                e.detail.gesture.preventDefault();//修复IOS 8.x平台存在的bug,使用plus.nativeUI.prompt会造成输入法闪一下又没了  
                var btnArray=\['确定','取消'\];  
                mui.prompt('请输入你对MUI的评语:','性能好','Hello MUI',btnArray,function(e)\{  
                if(e.index==0)  
                \{  
                    info.innerHTML='谢谢你的评语:'+e.value;      
                \}  
                else  
                \{  
                    info.innerHTML='你点了取消按钮';  
                \}  
                \})  
            \});  
              
              
            document.getElementById("toastbtn").addEventListener('tap',function()\{  
                mui.toast('欢迎体验Hello MUI');  
            \})  
              
        \}  
        catch(err)  
        \{  
            alert(err);              
        \}

3.复选框(CheckBox):用于复选多种状况的开发情形中

控件代码:

<div class="mui-content">  
            <h5 class="mui-content-padded">图标左对齐</h5>  
            <div class="mui-card">  
                <form class="mui-input-group">  
                    <div class="mui-input-row mui-checkbox mui-left">  
                        <label>Checked:false</label>  
                        <input name="checkbox" value="Item 1" type="checkbox"/>  
                    </div>  
                    <div class="mui-input-row mui-checkbox mui-left">  
                        <label>checked:true</label>  
                        <input name="checkbox" value="Item 2" type="checkbox" checked>  
                    </div>  
                    <div class="mui-input-row mui-checkbox mui-left mui-disabled">  
                        <label>disabled checkbox</label>  
                        <input name="checkbox" type="checkbox" disabled="disabled">  
                    </div>  
                </form>  
            </div>  
            <h5 class="mui-content-padded">图标右对齐</h5>  
            <div class="mui-card">  
                <form class="mui-input-group">  
                    <div class="mui-input-row mui-checkbox">  
                        <label>checked:false</label>  
                        <input name="checkbox1" value="Item 3" type="checkbox"/>  
                    </div>  
                    <div class="mui-input-row mui-checkbox">  
                        <label>checked:true</label>  
                        <input name="checkbox1" value="Item 3" type="checkbox" checked/>  
                    </div>  
                    <div class="mui-input-row mui-checkbox mui-disabled">  
                        <label>disabled checkbox</label>  
                        <input name="checkbox1" type="checkbox" disabled="disabled"/>  
                    </div>  
                </form>  
            </div>  
        </div>

js部分:

mui('.mui-input-group').on('change','input',function()\{  
        var value=this.checked?"true":"false";  
        this.previousElementSibling.innerText="checked:"+value;  
    \})