相关代码:

<!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>

主攻ASP.NET MVC4.0之重生:Jquery Mobile 表单元素的更多相关文章

  1. 主攻ASP.NET MVC4.0之重生:Jquery Mobile 列表

    代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title ...

  2. 主攻ASP.NET MVC4.0之重生:Jquery Mobile 按钮+对话框使用

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 主攻ASP.NET MVC4.0之重生:Jquery Mobile 面板

    左滑动面板效果: 右滑动面板效果: @{ ViewBag.Title = "JQuery Mobile Web Page"; } <!DOCTYPE html> < ...

  4. 主攻ASP.NET MVC4.0之重生:ASP.NET MVC使用JSONP

    原文:主攻ASP.NET MVC4.0之重生:ASP.NET MVC使用JSONP 原文地址 http://www.codeguru.com/csharp/.net/net_asp/using-jso ...

  5. 主攻ASP.NET MVC4.0之重生:Asp.Net MVC WebApi OData

    1.新建MVC项目,安装OData Install-Package Microsoft.AspNet.WebApi.OData -Version 4.0.0 2.新建WebAPI Controller ...

  6. 主攻ASP.NET MVC4.0之重生:ASP.NET MVC Web API

    UserController代码: using GignSoft.Models; using System; using System.Collections.Generic; using Syste ...

  7. 主攻ASP.NET MVC4.0之重生:CheckBoxListHelper和RadioBoxListHelper的使用

    在项目中新建Helpers文件夹,创建CheckBoxListHelper和RadioBoxListHelper类. CheckBoxListHelper代码 using System; using ...

  8. 主攻ASP.NET MVC4.0之重生:MVC Controller修改Controller.tt模版,自动添加版本注释信息

    第一步找到MVC 4.0 CodeTemplates 一般路径在:C:\Program Files (x86)\Microsoft Visual Studio 11.0\Common7\IDE\Ite ...

  9. 主攻ASP.NET MVC4.0之重生:上下滑动屏幕动态加载数据

                @{ ViewBag.Title = "Index"; } <!DOCTYPE html> <html> <head> ...

随机推荐

  1. 第一百六十九节，jQuery，基础事件

    jQuery,基础事件 学习要点: 1.绑定事件 2.简写事件 3.复合事件 JavaScript 有一个非常重要的功能,就是事件驱动.当页面完全加载后,用户通过鼠标 或键盘触发页面中绑定事件的元素即 ...

  2. MySQL的下载及安装

    前言:不仅要知其然,还要知所以然 MySQL数据库作为关系型数据库中的佼佼者,因其体积小,速度快,成本低,不仅受到了市场的极大追捧,也受到了广大程序员的青睐.接下来,就给大家说一下,MySQL的下载和 ...

  3. Observable观察者模式的使用

    今天我们公司封装的类中没有加上Observable观察者模式,但是很多地方需要用到Observable观察者模式 接下来就向大家介绍一下我的使用吧! 在介绍之前我们写了一个方法 public clas ...

  4. Android-NDK编译:cocos2d-x

    看了下 cocos2d-x 3.0 alpha1 几个关于android的脚本 cocos2d-x\tools\project-creator\create_project.py cocos2d-x\ ...

  5. PHPFastCGI进程管理器PHP

    PHP-FPM是一个PHPFastCGI进程管理器,是只用于PHP的.      PHP-FPM其实是PHP源代码的一个补丁,旨在将FastCGI进程管理整合进PHP包中.必须将它patch到你的PH ...

  6. iOS学习笔记（十二）——iOS国际化

    开发的移动应用更希望获取更多用户,走向世界,这就需要应用国际化,国际化其实就是多语言.这篇文章介绍Xcode4.5以后的国际化,包括应用名国际化和应用内容国际化.如果是Xcode4.5之前版本请参考. ...

  7. Time-series Storage Layer Time Series Databases 时间序列

    w 关于时间序列数据库的思考-CSDN.NET  http://www.csdn.net/article/2015-07-13/2825192  存储和处理时间序列数据(“Time Series Da ...

  8. 【转】【Spring实战】Spring注解配置工作原理源码解析

    一.背景知识 在[Spring实战]Spring容器初始化完成后执行初始化数据方法一文中说要分析其实现原理,于是就从源码中寻找答案,看源码容易跑偏,因此应当有个主线,或者带着问题.目标去看,这样才能最 ...

  9. MySQL中Cardinality值的介绍

    1)         什么是Cardinality 不是所有的查询条件出现的列都需要添加索引.对于什么时候添加B+树索引.一般的经验是,在访问表中很少一部分时使用B+树索引才有意义.对于性别字段.地区 ...

  10. 内置函数： filter 和 map

    内置函数———filter和map filter filter() 函数用于过滤序列,过滤掉不符合条件的元素,返回由符合条件元素组成的新列表.接收两个参数,第一个为函数,第二个为序列,序列的每个元素作 ...