Mui框架一 快捷鍵+基礎知識點

1.折疊面板--mAccordion

2.數字角標—mBadges

<h5>有底色</h5>
<span class="mui-badge">灰色</span>
<span class="mui-badge mui-badge-primary">藍色</span>
<span class="mui-badge mui-badge-success">綠色</span>
<span class="mui-badge mui-badge-warning">棕色</span>
<span class="mui-badge mui-badge-danger">紅色</span>
<span class="mui-badge mui-badge-purple">紫色</span>
<h5>無底色（使用父元素背景色）顏色同上</h5>
<span class="mui-badge mui-badge-inverted">1</span>
<span class="mui-badge mui-badge-primary mui-badge-inverted">2</span>
<span class="mui-badge mui-badge-success mui-badge-inverted">3</span>
<span class="mui-badge mui-badge-warning mui-badge-inverted">4</span>
<span class="mui-badge mui-badge-danger mui-badge-inverted">5</span>
<span class="mui-badge mui-badge-royal mui-badge-inverted">6</span>

3.按鈕—mButton(mButton-blue/red/green/yellow/purple/)

<h5>有底色按鈕：</h5>
<button class="mui-btn">默認</button>
<div class="mui-btn mui-btn-primary">藍色</div>
<span class="mui-btn mui-btn-success">綠色</span>
<button class="mui-btn mui-btn-warning">黃色</button>
<button class="mui-btn mui-btn-danger">紅色</button>
<button class="mui-btn mui-btn-royal">紫色</button>
<h5>無底色按鈕（使用父元素的背景色）：</h5>    
<button class="mui-btn mui-btn-outlined">默認</button>
<button class="mui-btn mui-btn-primary mui-btn-outlined">操作</button>
<button class="mui-btn mui-btn-success mui-btn-outlined">成功</button>
<button class="mui-btn mui-btn-warning mui-btn-outlined">警告</button>
<button class="mui-btn mui-btn-danger mui-btn-outlined">危險</button>
<button class="mui-btn mui-btn-royal mui-btn-outlined">高貴</button>
<h5>鏈接按鈕：</h5>    
<button class="mui-btn mui-btn-link">添加</button>
<h5>默認input標簽樣式：</h5>    
<input type="button" value="type=button" />
<input type="reset" value="type=reset" />
<input type="submit" value="type=submit" />
<h5>默認button標簽樣式：</h5>    
<button>按鈕</button>

4.復選框—mCheckbox

<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>Checkbox</label>
            <input name="checkbox" type="checkbox" >
        </div>
        <div class="mui-input-row mui-checkbox mui-left">
            <label>Checkbox</label>
            <input name="checkbox" type="checkbox" checked>
        </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>Checkbox</label>
            <input name="checkbox1" type="checkbox" >
        </div>
        <div class="mui-input-row mui-checkbox">
            <label>Checkbox</label>
            <input name="checkbox1" type="checkbox" checked>
        </div>
    </form>
</div>

5.圖片輪播—mGallery(mGallery-table圖文表格)

<div class="mui-slider">
    <div class="mui-slider-group">
        <div class="mui-slider-item">
            <a href="#">
                <img src="http://placehold.it/200x100">
                <p class="mui-slider-title">文字說明1</p>
            </a>
        </div>
        <div class="mui-slider-item">
            <a href="#">
                <img src="http://placehold.it/200x100">
                <p class="mui-slider-title">文字說明2</p>
            </a>
        </div>
    </div>
    <div class="mui-slider-indicator">
        <div class="mui-indicator mui-active"></div>
        <div class="mui-indicator"></div>
    </div>
</div>

<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="http://placehold.it/400x300">
            <div class="mui-media-body">文字說明1</div>
        </a>
    </li>
    <li class="mui-table-view-cell mui-media mui-col-xs-6">
        <a href="#">
            <img class="mui-media-object" src="http://placehold.it/400x300">
            <div class="mui-media-body">文字說明2</div>
        </a>
    </li>
</ul>

6.九宮格—mGrid

<div class="mui-card">
    <ul class="mui-table-view mui-grid-view mui-grid-9">
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
            <a href="#">
                <span class="mui-icon mui-icon-home"></span>
                <div class="mui-media-body">Home</div>
            </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
            <a href="#">
                <span class="mui-icon mui-icon-email"><span class="mui-badge mui-badge-red">5</span></span>
                <div class="mui-media-body">Email</div>
            </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
            <a href="#">
                <span class="mui-icon mui-icon-chatbubble"></span>
                <div class="mui-media-body">Chat</div>
            </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
            <a href="#">
                <span class="mui-icon mui-icon-location"></span>
                <div class="mui-media-body">Location</div>
            </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
            <a href="#">
                <span class="mui-icon mui-icon-search"></span>
                <div class="mui-media-body">Search</div>
            </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
            <a href="#">
                <span class="mui-icon mui-icon-phone"></span>
                <div class="mui-media-body">Phone</div>
            </a>
        </li>
    </ul>
</div>

7.列表—mList(mList-Media圖文列表)

<div class="mui-card">
    <ul class="mui-table-view">
        <li class="mui-table-view-cell">
            <a class="mui-navigate-right">
                Item 1
            </a>
        </li>
        <li class="mui-table-view-cell">
            <a class="mui-navigate-right">
                Item 2
            </a>
        </li>
        <li class="mui-table-view-cell">
            <a class="mui-navigate-right">
                Item 3
            </a>
        </li>
    </ul>
</div>

<ul class="mui-table-view">
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">
            <img class="mui-media-object mui-pull-left" src="img/hbuilder.png">
            <div class="mui-media-body">
                主標題
                <p class='mui-ellipsis'>這里是摘要</p>
            </div>
        </a>
    </li>
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">
            <img class="mui-media-object mui-pull-left" src="img/hbuilder.png">
            <div class="mui-media-body">
                主標題
                <p class='mui-ellipsis'>這里是摘要</p>
            </div>
        </a>
    </li>
</ul>

8.分頁—mPagination

<h5 class="mui-content-padded">分頁(默認尺寸)</h5>
<div class="mui-content-padded">
    <ul class="mui-pagination">
        <li class="mui-previous mui-disabled">
            <a href="#">
                &laquo;
            </a>
        </li>
        <li class="mui-active">
            <a href="#">
                1
            </a>
        </li>
        <li>
            <a href="#">
                2
            </a>
        </li>
        <li>
            <a href="#">
                3
            </a>
        </li>
        <li>
            <a href="#">
                4
            </a>
        </li>
        <li>
            <a href="#">
                5
            </a>
        </li>
        <li class="mui-next">
            <a href="#">
                &raquo;
            </a>
        </li>
    </ul>
</div>
<h5 class="mui-content-padded">分頁(大尺寸)</h5>
<div class="mui-content-padded">
    <ul class="mui-pagination mui-pagination-lg">
        <li class="mui-previous">
            <a href="#">
                &laquo;
            </a>
        </li>
        <li>
            <a href="#">
                1
            </a>
        </li>
        <li>
            <a href="#">
                2
            </a>
        </li>
        <li>
            <a href="#">
                3
            </a>
        </li>
        <li>
            <a href="#">
                4
            </a>
        </li>
        <li class="mui-active">
            <a href="#">
                5
            </a>
        </li>
        <li class="mui-next mui-disabled">
            <a href="#">
                &raquo;
            </a>
        </li>
    </ul>
</div>
<h5 class="mui-content-padded">分頁(小尺寸)</h5>
<div class="mui-content-padded">
    <ul class="mui-pagination mui-pagination-sm">
        <li class="mui-previous">
            <a href="#">
                &laquo;
            </a>
        </li>
        <li>
            <a href="#">
                1
            </a>
        </li>
        <li>
            <a href="#">
                2
            </a>
        </li>
        <li class="mui-active">
            <a href="#">
                3
            </a>
        </li>
        <li>
            <a href="#">
                4
            </a>
        </li>
        <li>
            <a href="#">
                5
            </a>
        </li>
        <li class="mui-next">
            <a href="#">
                &raquo;
            </a>
        </li>
    </ul>
</div>
<h5 class="mui-content-padded">翻頁(默認)</h5>
<div class="mui-content-padded">
    <ul class="mui-pager">
        <li>
            <a href="#">
                上一頁
            </a>
        </li>
        <li>
            <a href="#">
                下一頁
            </a>
        </li>
    </ul>
</div>
<h5 class="mui-content-padded">翻頁(對齊)</h5>
<div class="mui-content-padded">
    <ul class="mui-pager">
        <li class="mui-previous">
            <a href="#">
                上一頁
            </a>
        </li>
        <li class="mui-next">
            <a href="#">
                下一頁
            </a>
        </li>
    </ul>
</div>
<h5 class="mui-content-padded">翻頁(禁用)</h5>
<div class="mui-content-padded">
    <ul class="mui-pager">
        <li class="mui-disabled">
            <span> 上一頁 </span>
        </li>
        <li>
            <a href="#">
                下一頁
            </a>
        </li>
    </ul>
</div>

9.滑塊—mRange

<h5 style='margin-top:35px;'>label+輸入框+滑塊：</h5> 
<div class="mui-input-row mui-input-range field-contain">
    <div style="float:left">
        <label >滑塊：</label>
        <input type="text" id='field-range-input' value='60'>
    </div>
    <div style="margin-left:121px;">
        <input type="range" id='field-range' value="60" min="0" max="100" />
    </div>
</div>   
<h5>label+滑塊：<span id='inline-range-val'>20</span></h5> 
<div class="mui-input-row mui-input-range">
    <label>滑塊：</label>
    <input type="range" id='inline-range' value="20" min="0" max="100" >
</div>

<h5>整行滑塊：<span id='block-range-val'>50</span></h5>   
<div class="mui-input-row mui-input-range">
    <input type="range" id='block-range' value="50" min="0" max="100" >
</div>

10.開關—mSwitch

<div class="mui-content">
    <div class="mui-content-padded">
        <ul class="mui-table-view">
            <li class="mui-table-view-cell">
                <span></span>
                <div class="mui-switch mui-active">
                    <div class="mui-switch-handle"></div>
                </div>
            </li>
            <li class="mui-table-view-cell">
                <span></span>
                <div class="mui-switch">
                    <div class="mui-switch-handle"></div>
                </div>
            </li>
            <li class="mui-table-view-cell">
                <span></span>
                <div class="mui-switch mui-switch-mini mui-active ">
                    <div class="mui-switch-handle"></div>
                </div>
            </li>
            <li class="mui-table-view-cell">
                <span></span>
                <div class="mui-switch mui-switch-mini">
                    <div class="mui-switch-handle"></div>
                </div>
            </li>
            <li class="mui-table-view-cell">
                <span></span>
                <div class="mui-switch mui-switch-blue mui-active">
                    <div class="mui-switch-handle"></div>
                </div>
            </li>
            <li class="mui-table-view-cell">
                <span></span>
                <div class="mui-switch mui-switch-blue">
                    <div class="mui-switch-handle"></div>
                </div>
            </li>
            <li class="mui-table-view-cell">
                <span></span>
                <div class="mui-switch mui-switch-blue mui-switch-mini mui-active">
                    <div class="mui-switch-handle"></div>
                </div>
            </li>
            <li class="mui-table-view-cell">
                <span></span>
                <div class="mui-switch mui-switch-blue mui-switch-mini">
                    <div class="mui-switch-handle"></div>
                </div>
            </li>
        </ul>
    </div>
</div>

mui('.mui-content .mui-switch').each(function() {//循環所有toggle
    //toggle.classList.contains('mui-active') 可識別該toggle的開關狀態
    this.parentNode.querySelector('span').innerText = '狀態：' + (this.classList.contains('mui-active') ? 'true' : 'false');
    /**
     * toggle 事件監聽
     */
    this.addEventListener('toggle', function(event) {
        //event.detail.isActive 可直接獲取當前狀態
        this.parentNode.querySelector('span').innerText = '狀態：' + (event.detail.isActive ? 'true' : 'false');
    });
});

11.選項卡—mTab

<nav class="mui-bar mui-bar-tab">
    <a class="mui-tab-item mui-active">
        <span class="mui-icon mui-icon-home"></span>
        <span class="mui-tab-label">首頁</span>
    </a>
    <a class="mui-tab-item">
        <span class="mui-icon mui-icon-phone"></span>
        <span class="mui-tab-label">電話</span>
    </a>
    <a class="mui-tab-item">
        <span class="mui-icon mui-icon-email"></span>
        <span class="mui-tab-label">郵件</span>
    </a>
    <a class="mui-tab-item">
        <span class="mui-icon mui-icon-gear"></span>
        <span class="mui-tab-label">設置</span>
    </a>
</nav>