主攻ASP.NET MVC4.0之重生:Jquery Mobile 表单元素
相关代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Jquery Mobile Web Page</title> <link href="~/Content/css/themes/default/jquery.mobile.structure-1.4.0-beta.1.min.css" rel="stylesheet" /> <link href="~/Content/css/themes/default/jquery.mobile-1.4.0-beta.1.min.css" rel="stylesheet" /> <script src="~/Content/js/jquery.js"></script> <script src="~/Content/js/jquery.mobile-1.4.0-beta.1.js"></script> </head> <body> <div data-role="page" id="page"> <h1>Form效果</h1> <div data-role="content"> <input type="text" name="name" id="basic" value="" /> <label for="number-pattern">HTML5 特性 只输入数字 使用pattern:</label> <input type="number" name="number" pattern="[0-9]*" id="number-pattern" value=""> <label for="file">文件上传:</label> <input type="file" name="file" id="file" value=""> <label for="password">密码:</label><span style="color: red">autocomplete="off"</span> <input type="password" name="password" id="password" value="" autocomplete="off"> <label for="textinput-hide">预文本:</label><span style="color: red"> placeholder="初始显示内容"</span> <input type="text" name="textinput-hide" id="textinput-hide" placeholder="初始显示内容" value=""> <div data-role="fieldcontain"> <label for="textinput-disabled">只读/禁用:</label> <input disabled="disabled" type="text" name="textinput-disabled" id="textinput-disabled" placeholder="不可修改内容" value=""> </div> <div data-role="fieldcontain"> <form> <label for="userid">帐号</label> <input type="text" name="userid" id="userid" placeholder="请输入账号" value="" /> <label for="passwordtwo">密码</label> <input type="password" name="passwordtwo" id="passwordtwo" placeholder="请输入密码" value="" /> <input type="submit" name="submit" id="submit" value="提交" data-inline="true" /> <input type="reset" name="reset" id="reset" value="清空" data-inline="true" /> </form> </div> <div data-role="fieldcontain"> <label for="select-native-fc">选择框:</label> <select name="select-native-fc" id="select-native-fc"> <option value="small">选择1</option> <option value="medium">选择2</option> <option value="large">选择3</option> </select> </div> <label for="textarea">多行文本:</label> <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea> 搜索:</label> <input type="search" name="password" id="search" value="" placeholder="关键词"> <label for="slider">滑块:</label> <input type="range" name="slider" id="slider" value="50" min="0" max="100"> <label for="slider-fill">fill滑块:</label><span style="color: red">data-highlight="true"</span> <input type="range" name="slider-fill" id="slider-fill" value="60" min="0" max="1000" step="50" data-highlight="true"> <label for="slider-fill-mini">迷你填充滑块 track theme:</label> <input type="range" name="slider-fill-mini" id="slider-fill-mini" value="40" min="0" max="100" data-mini="true" data-highlight="true" data-theme="b" data-track-theme="b"> <div data-role="rangeslider"> <label for="range-1a">组滑块:</label> <input type="range" name="range-1a" id="range-1a" min="0" max="100" value="40"> <label for="range-1b">Rangeslider:</label> <input type="range" name="range-1b" id="range-1b" min="0" max="100" value="80"> </div> <div data-role="rangeslider" data-mini="true" data-theme="b" data-track-theme="b"> <label for="range-2a">迷你组滑块:</label> <input type="range" name="range-2a" id="range-2a" min="0" max="100" value="40"> <label for="range-2b">Mini rangeslider:</label> <input type="range" name="range-2b" id="range-2b" min="0" max="100" value="80"> </div> <label for="slider2">NO开关:</label> <select name="slider2" id="slider2" data-role="slider"> <option value="off">关</option> <option value="on">开</option> </select> <label for="slider-flip-m">迷你NO开关:</label> <select name="slider-flip-m" id="slider-flip-m" data-role="slider" data-mini="true"> <option value="off">关</option> <option value="on" selected="">开</option> </select> <fieldset data-role="controlgroup"> <legend>复选框:</legend> <input type="checkbox" name="checkbox-1a" id="checkbox-1a" checked=""> <label for="checkbox-1a">篮球</label> <input type="checkbox" name="checkbox-2a" id="checkbox-2a"> <label for="checkbox-2a">足球</label> <input type="checkbox" name="checkbox-3a" id="checkbox-3a"> <label for="checkbox-3a">羽毛球</label> <input type="checkbox" name="checkbox-4a" id="checkbox-4a"> <label for="checkbox-4a">兵乓球</label> </fieldset> <fieldset data-role="controlgroup" data-mini="true" data-type="horizontal"> <legend>水平显示复选框:</legend> <input type="checkbox" name="checkbox-1a" id="checkbox-1a" checked=""> <label for="checkbox-1a">篮球</label> <input type="checkbox" name="checkbox-2a" id="checkbox-2a"> <label for="checkbox-2a">足球</label> <input type="checkbox" name="checkbox-3a" id="checkbox-3a"> <label for="checkbox-3a">羽毛球</label> <input type="checkbox" name="checkbox-4a" id="checkbox-4a"> <label for="checkbox-4a">兵乓球</label> </fieldset> <fieldset data-role="controlgroup"> <legend>单选按钮:</legend> <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked"> <label for="radio-choice-1">美国</label> <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2"> <label for="radio-choice-2">中国</label> <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3"> <label for="radio-choice-3">日本</label> <input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4"> <label for="radio-choice-4">台湾</label> </fieldset> <fieldset data-role="controlgroup" data-mini="true"> <legend>迷你单选按钮:</legend> <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked"> <label for="radio-choice-1">美国</label> <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2"> <label for="radio-choice-2">中国</label> <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3"> <label for="radio-choice-3">日本</label> <input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4"> <label for="radio-choice-4">台湾</label> </fieldset> <fieldset data-role="controlgroup" data-mini="true" data-type="horizontal"> <legend>迷你单选按钮:</legend> <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked"> <label for="radio-choice-1">美国</label> <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2"> <label for="radio-choice-2">中国</label> <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3"> <label for="radio-choice-3">日本</label> <input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4"> <label for="radio-choice-4">台湾</label> </fieldset> <label for="select-choice-1" class="select">下拉选择框</label> <select name="select-choice-1" id="select-choice-1"> <option value="standard">美国</option> <option value="rush">中国</option> <option value="express">日本</option> <option value="overnight">台湾</option> </select> <label for="select-choice-1" class="select">下拉选择框</label> <select name="select-choice-1" id="select-choice-1" data-mini="true" data-inline="true"> <option value="standard">美国</option> <option value="rush">中国</option> <option value="express">日本</option> <option value="overnight">台湾</option> </select> <label for="select-choice-a" class="select">弹框选择:</label> <select name="select-choice-a" id="select-choice-a" data-native-menu="false"> <option value="standard">美国</option> <option value="rush">中国</option> <option value="express">日本</option> <option value="overnight">台湾</option> <option value="overnight">香港</option> </select> <label for="select-choice-8" class="select">多选择下拉框:</label> <select name="select-choice-8" id="select-choice-8" multiple="multiple" data-native-menu="false" data-icon="grid" data-iconpos="left"> <option>关闭</option> <optgroup label="中国"> <option value="standard" selected="">香港</option> <option value="rush">台湾</option> </optgroup> <optgroup label="美国"> <option value="firstOvernight">日本</option> <option value="expressSaver">菲律宾</option> </optgroup> </select> </div> </div> <div data-role="page" id="dialog"> <div data-role="header"> <h1>用于对话框效果测试</h1> </div> <div data-role="content"> 用于内容效果测试 </div> <div data-role="footer"> <h4>Asp.Net Mvc 4.0 +JqueryMobile 1.4.0-beta 1</h4> </div> </div> </body> </html>