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

顺便说一下,这段时间主要是把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;
    })