Buttons

JMUI提供了基础样式，使用下面的class，可以快速的建立带有样式的按钮。

Example

我知道了我知道了取消设置取消设置消息设置消息设置

HTML(点击伸缩代码)

<a class="btn btn-primary">我知道了</a>
<a class="btn btn-primary btn-disabled">我知道了</a>

<a class="btn btn-danger">取消设置</a>
<a class="btn btn-danger btn-disabled">取消设置</a>

<a class="btn btn-info">消息设置</a>
<a class="btn btn-info btn-disabled">消息设置</a>

Block Buttons

Example

立即启用退出登录编辑资料

HTML

<a class="btn btn-primary btn-block">立即启用</a>
<a class="btn btn-danger btn-block">退出登录</a>
<a class="btn btn-info btn-block">编辑资料</a>

Checkboxes

HTML

<label id="checkbox" class="checkbox checkbox_white" for="cb0" style="margin:20px 0;">
    <input id="cb0" name="cb0" type="checkbox" />
    <span class="checkbox_text">0</span>
</label>

<fieldset id="bl_checkboxlist" class="checkbox_group">
    <label class="checkbox checkbox_black" for="cb11">
        <input id="cb11" name="cb11" type="checkbox" />
        <span class="checkbox_text">1</span>
    </label>

    <label class="checkbox checkbox_black" for="cb12">
        <input id="cb12" name="cb12" type="checkbox" />
        <span class="checkbox_text">2</span>
    </label>

    <label class="checkbox checkbox_black" for="cb13">
        <input id="cb13" name="cb13" type="checkbox" />
        <span class="checkbox_text">3</span>
    </label>
</fieldset>

它还需要一些额外的js

JavaScript

//checkbox
var cb = new MUI.Checkbox({
    id:"checkbox"
});
var bl_cb = new MUI.Checkbox({
    id:"bl_checkbox"
});

var bl_cl = new MUI.CheckboxList({
    id:"bl_checkboxlist"
});
var v_cl = new MUI.CheckboxList({
    id:"v_checkboxlist"
});
var v_cl = new MUI.CheckboxList({
    id:"bl_v_checkboxlist"
});]

Radios

HTML

<label id="bl_radio" for="radio21" class="radio radio_black" style="margin:20px 0;">
    <input id="radio21" type="radio" name="radio" value="0"/>
    <span class="radio_text">0</span>
</label>

<fieldset id="radioList" class="radio_group">
    <label for="radio1" class="radio radio_white">
        <input id="radio1" type="radio" name="radio" value="1"/>
        <span class="radio_text">1</span>
    </label>

    <label for="radio2" class="radio radio_white">
        <input id="radio2" type="radio" name="radio" value="2"/>
        <span class="radio_text">2</span>
    </label>

    <label for="radio3" class="radio radio_white">
        <input id="radio3" type="radio" name="radio" value="3"/>
        <span class="radio_text">3</span>
    </label>
</fieldset>

同样的它需要少许js

JavaScript

//radio
var radio = new MUI.Radio({
    id:"radio"
});
var bl_radio = new MUI.Radio({
    id:"bl_radio"
});
var radiolist = new MUI.RadioList({
    id:"radioList"
});

var v_radiolist = new MUI.RadioList({
    id:"v_radioList"
});
var v_bl_radiolist = new MUI.RadioList({
    id:"v_bl_radioList"
});

Progress

Example

HTML

<div id="progress" class="progress" style="margin-top:20px;">
    <div class="progress_wrap">
        <span class="bar_text"></span>
        <div class="bar bar_image"></div>
    </div>
</div>
<div id="progress_g" class="progress" >
    <div class="progress_wrap">
        <span class="bar_text"></span>
        <div class="bar bar_green"></div>
    </div>
</div>
<div id="progress_b" class="progress" >
    <div class="progress_wrap">
        <span class="bar_text"></span>
        <div class="bar bar_blue"></div>
    </div>
</div>
<div id="progress_y" class="progress">
    <div class="progress_wrap">
        <span class="bar_text"></span>
        <div class="bar bar_yellow"></div>
    </div>
</div>

同样的它需要少许js

JavaScript

//progress
var p = new MUI.Progress({
    id:"progress",
percent:30
});
var p_g = new MUI.Progress({
    id:"progress_g",
percent:60
});
var p_b = new MUI.Progress({
    id:"progress_b",
percent:90
});
var p_y = new MUI.Progress({
    id:"progress_y",
    percent:100
});

Text Input

在移动上的文本输入框总会带来麻烦，我们提供自增高的input可以帮助你完成实际的项目需要，同时帮你减少在移动上遇到的坑。

Example

HTML

<p>
    <input type="text" class="input input_white" placeholder="text input" style="margin-top:20px;"></input>
    <textarea id="textarea" class="input input_white" placeholder="textarea" style="margin-top:10px;"></textarea>
</p>
<p>
    <div class="input_group" style="margin-top:10px;">
        <input type="text" class="input input_white" placeholder="text input"></input>
        <input type="text" class="input input_white" placeholder="text input"></input>
        <input type="text" class="input input_white" placeholder="text input"></input>
    </div>
</p>

自增高input需要额外的js

JavaScript

var autoGrowTextArea = new MUI.AutoGrowTextarea({
    id:"autoGrowTextArea"
});

Toggle Switch

Example

on off

HTML

<div id="toggleSwitch" class="toggle_switch" style="display:block;margin-top:20px;">
    <div class="toggle_wrap">
        <div class="toggle_text">
            <span class="toggle_text_blue">on</span>
            <span class="toggle_text_white">off</span>
        </div>
        <a class="toggle_handler toggle_handler_white"></a>
    </div>
</div>
<div id="bl_toggleSwitch" class="toggle_switch" style="display:block;margin-top:30px;">
    <div class="toggle_wrap">
        <div class="toggle_text">
            <span class="toggle_text_blue">on</span>
            <span class="toggle_text_black">off</span>
        </div>
        <a class="toggle_handler toggle_handler_black"></a>
    </div>
</div>

同样的它需要少许js

JavaScript

//toggleSwitch
var ts = new MUI.ToggleSwitch({
    id:"toggleSwitch"
});
var bl_ts = new MUI.ToggleSwitch({
    id:"bl_toggleSwitch"
});
var b_ts = new MUI.ToggleSwitch({
    id:"b_toggleSwitch"
});

Image Switch

Example

HTML

<div id='image_slider' class='imagechange' style="margin-top:20px;">
    <div class="wrap">
        <div>
            <img src="http://www.cnblogs.com/images/cnblogs_com/Cson/290336/t_3a.jpg">
        </div>
        <div>
            <img src="http://www.cnblogs.com/images/cnblogs_com/Cson/290336/t_436d106e37b424ba42169473.jpg">
        </div>
        <div>
            <img src="http://www.cnblogs.com/images/cnblogs_com/Cson/290336/t_6a.jpg">
        </div>
        <div>
            <img src="http://www.cnblogs.com/images/cnblogs_com/Cson/290336/t_10a.jpg">
        </div>
        <div>
            <img src="http://www.cnblogs.com/images/cnblogs_com/Cson/290336/t_1a.jpg">
        </div>
    </div>
    <ul class="btnsWrap">
    </ul>
</div>

同样的它需要少许js

JavaScript

//imagechange
var ic = new MUI.ImageChange({
    id:"image_slider",
    isAutoChange:true,
    autoChangeTime:3000,
    canSwipe:true
});

Select

Example

HTML

<div id="g_menuSelector" class="select select_green" style="margin-top:20px;">
    <span class="select_text"></span>
    <select>
        <option>option1</option>
        <option>option2</option>
    </select>
</div>

同样的它需要少许js

JavaScript

var g_sel = new MUI.Select({
    id:"g_menuSelector"
});

Slider

Example

HTML

<div id="slider" class="slider slider_white" style="margin-top:20px;">
    <input type="range" />
    <a class="slider_handler"></a>
</div>

<div id="v_slider" class="slider slider_white vertical" style="float:left;">
    <input type="range" />
    <a class="slider_handler"></a>
</div>

同样的它需要少许js

JavaScript

var sl = new MUI.Slider({
    id:"slider"
});

var v_sl = new MUI.Slider({
    id:"v_slider",
    vertical:true
});

Dialog

Dialog我们做到尽量模拟原生态的移动弹出窗口形式

Example

click me to hide

HTML

<input id="none" type="button" value="none effect" class="dialogbtn">
<input id="fade" type="button" value="fade effect" class="dialogbtn">
<input id="pop" type="button" value="pop effect" class="dialogbtn">

<div class="row" style="height:0;">
    <div class="mask" style="z-index: 1000;"></div>

    <div id="dialog" class="dialog" style="z-index: 1001;margin:0;left:23%;top:-300px;">
        <div class="header">
            <h4>Dialog Header</h4>
        </div>
        <div class="content">
            <p style = "line-height:80px;text-align:center;font-size:36px;color:#333;cursor:pointer">
            click me to hide
            </p>
        </div>
    </div>
</div>

JavaScript

//dialog
var currentEffect,
    currentDialogFlg;

var dialog = new MUI.Dialog({
    id:"dialog"
});
dialog.elem.onclick = function(){
    dialog.hide(currentEffect);
    currentDialogFlg = false;
}

$E.on($D.id("none"),"click",function(){
    currentEffect = "none";
    dialog.show("none");
    currentDialogFlg = true;
});
$E.on($D.id("fade"),"click",function(){
    currentEffect = "fade";
    dialog.show("fade");
    currentDialogFlg = true;
});
$E.on($D.id("pop"),"click",function(){
    currentEffect = "pop";
    dialog.show("pop");
    currentDialogFlg = true;
});

Example

header

content

footer

HTML

<div class="toolbar_header header_black">
    <h1 style="color:white;">header</h1>
</div>
<p>content</p>
<p>content</p>
<p>content</p>
<div class="toolbar_footer footer_black">
    <h4 style="color:white;">footer</h4>
</div>

List and Group List

ListItemA
ListItemB
ListItemC

Group1
Group2

HTML

<ul id="list1" class="list list_white conner_round_vertical_group" style="margin-top:30px;">
    <li class="list_item">
    <a  class="list_text">ListItemA</a>
    </li>
    <li class="list_item">
    <a  class="list_text">ListItemB</a>
    </li>
    <li class="list_item">
    <a  class="list_text">ListItemC</a>
    </li>
</ul>

<ul id="groupList" class="group_list" style="margin-top:20px;">
    <li class="list_group">
    <div class="list_group_title list_group_blue_title">
        <h4>Group1</h4>
    </div>
    <div class="list_group_body">
        <ul class="list list_white">
            <li class="list_item">
            <a  class="list_text">ListItemA</a>
            </li>
            <li class="list_item">
            <a  class="list_text">ListItemB</a>
            </li>
            <li class="list_item">
            <a  class="list_text">ListItemC</a>
            </li>
        </ul>
    </div>
    </li>
    <li class="list_group">
    <div class="list_group_title list_group_blue_title">
        <h4>Group2</h4>
    </div>
    <div class="list_group_body">
        <ul class="list list_white">
            <li class="list_item">
            <a  class="list_text">ListItemA</a>
            </li>
            <li class="list_item">
            <a  class="list_text">ListItemB</a>
            </li>
            <li class="list_item">
            <a  class="list_text">ListItemC</a>
            </li>
        </ul>
    </div>
    </li>
</ul>

JavaScript

//list
var list1 = new MUI.List({
    id:"list1"
});

var groupList = new MUI.GroupList({
    id:"groupList"
});

Tab

Example

head_1
head_2
head_3
head_4

tab-body-1
tab-body-2
tab-body-3
tab-body-4

HTML

<div id="a_tab" class="tab">
    <ul class="tab_head">
        <li class="active">head_1</li>
        <li>head_2</li>
        <li>head_3</li>
        <li>head_4</li>
    </ul>
    <ul class="tab_body">
        <li>
            <div>tab-body-1</div>
        </li>
        <li>
            <div>tab-body-2</div>
        </li>

        <li>
            <div>tab-body-3</div>
        </li>
        <li>
            <div>tab-body-4</div>
        </li>
    </ul>
</div>

JavaScript

var tb2 = new MUI.Tab({
    id:"a_tab",
    animate:"true"
});

拖动切换

在完善中Demo，请点击 Demo页

手势判断

在完善中Demo，请点击Demo页

Buttons

Example

Block Buttons

Example

Checkboxes

Example

Radios

Example

Progress

Example

Text Input

Example

Toggle Switch

Example

Image Switch

Example

Select

Example

Slider

Example

Dialog

Example

Dialog Header

ToolBar

Example

header

footer

List and Group List

Example

Group1

Group2

Tab

Example

拖动切换

手势判断