<!DOCTYPE html>

<html>

<head>

    <title>jQuery Mobile Demo</title>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>

    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

</head>

<body>

<div data-role="page" id="home">

    <header data-role="header">

        <h1>jQuery Mobile Demo</h1>

    </header>

    <div data-role="content">

    <div data-role="fieldcontain">

        <label for="text">文本输入框</label>

        <input type="text" name="text" id="text" value=""  />

    </div>

    <div data-role="fieldcontain">

        <label for="textarea">文本输入域</label>

        <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>

    </div>

    <div data-role="fieldcontain">

        <label for="search">搜索输入框</label>

        <input type="search" name="search" id="search" value="" />

    </div>

    <div data-role="fieldcontain">

        <fieldset data-role="controlgroup">

            <legend>单选框:</legend>

            <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" />

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

        </fieldset>

    </div>

    <div data-role="fieldcontain">

        <fieldset data-role="controlgroup">

            <legend>复选框</legend>

            <input type="checkbox" name="blue" id="effect1" class="custom" />

            <label for="effect1">效果1</label>

            <input type="checkbox" name="green" id="effect2" class="custom" />

            <label for="effect2">效果2</label>

            <input type="checkbox" name="pink" id="effect3" class="custom"  />

            <label for="effect3">效果3</label>

        </fieldset>

    </div>

    <div data-role="fieldcontain">

        <fieldset data-role="controlgroup" data-type="horizontal">

            <legend>复选框</legend>

            <input type="checkbox" name="horizon-blue" id="horizon-effect1" class="custom" />

            <label for="horizon-effect1">效果1</label>

            <input type="checkbox" name="horizon-green" id="horizon-effect2" class="custom" />

            <label for="horizon-effect2">效果2</label>

            <input type="checkbox" name="horizon-pink" id="horizon-effect3" class="custom"  />

            <label for="horizon-effect3">效果3</label>

        </fieldset>

    </div>

    <div data-role="fieldcontain">

        <label for="select-choice-1" class="select">选择列表</label>

        <select data-native-menu="false" name="select-choice-1" id="select-choice-1">

            <option value="12h">12小时</option>

            <option value="1d">一天</option>

            <option value="2d">两天</option>

            <option value="week">一周</option>

        </select>

    </div>

    <div data-role="fieldcontain">

        <label for="select-choice-2" class="select">多项选择列表</label>

        <select data-native-menu="false" multiple="multiple" name="select-choice-2" id="select-choice-2">

            <option value="12h">12小时</option>

            <option value="1d">一天</option>

            <option value="2d">两天</option>

            <option value="week">一周</option>

        </select>

    </div>

    <div data-role="fieldcontain">

        <label for="select-choice-3" class="select">分组选择列表</label>

        <select data-native-menu="false" name="select-choice-3" id="select-choice-3">

            <optgroup label="Group1">

                <option value="12h">12小时</option>

                <option value="1d">一天</option>

                <option value="2d">两天</option>

                <option value="week">一周</option>

            </optgroup>

            <optgroup label="Group2">

                <option value="1m">一个月</option>

                <option value="1q">一季度</option>

                <option value="1y">一年</option>

            </optgroup>

        </select>

    </div>

    <div data-role="fieldcontain">

        <label for="slider">开关</label>

        <select name="slider" id="slider" data-role="slider">

            <option value="off">关闭</option>

            <option value="on">开启</option>

        </select>

    </div>

    <div data-role="fieldcontain">

        <label for="slider">滑杆</label>

        <input type="range" name="slider" id="slider" value="0" min="0" max="100"  />

    </div>

    </div>

    <footer data-role="footer">

        <h2>Demo By <a href="http://kayosite.com" target="_blank" style="text-decoration: none; ">Kayo</a></h2>

    </footer>

</div>

</body>

</html>

jquery mobile demo的更多相关文章

  1. html5文章 -- 使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 基础

    这篇文章是使用 jQuery Mobile 与 HTML5 开发 Web App 系列的第二篇,在本文以及接下来的数篇文章 Kayo 将会介绍 jQuery Mobile 的组件.事件响应以及可以调用 ...

  2. [转]使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 事件详解

    在前文<使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 默认配置与事件基础>中,Kayo 对 jQuery Mobile 事件的基 ...

  3. 手机新闻网站,手持移动新闻,手机报client,jQuery Mobile手机新闻网站,手机新闻网站demo,新闻阅读器开发

    我们坐在地铁.经常拿出新浪手机查看新闻.腾讯新闻,或者看新闻,等刷微信功能.你有没有想过如何实现这些目标. 移动互联网.更活泼. 由于HTML5未来,jQuery Moblie未来. 今天我用jqm的 ...

  4. 手机新闻网站,掌上移动新闻,手机报client,jQuery Mobile手机新闻网站,手机新闻网站demo,新闻阅读器开发

    我们坐在地铁,经常来查看新浪手机新闻,腾讯新闻.或者刷微信看新闻更多功能.你有没有想过如何实现这些目标.移动互联网,更活泼. 因为HTML5到,jQuery Moblie到.今天我用jqm为了给你一个 ...

  5. jQuery Mobile入门

    转:http://www.cnblogs.com/linjiqin/archive/2011/07/17/2108896.html 简介:jQuery Mobile框架可以轻松的帮助我们实现非常好看的 ...

  6. jquery.mobile手机网页简要

    先上最终效果: 最近做了一个用手机浏览器访问的web应用,采用较流行的HTML5,为了提高开发效率节省时间决定采用现有开源框架,免去了自己做设计与兼容性. 一些比较优秀的框架:10大优秀的移动Web应 ...

  7. Jquery mobile 新手问题总汇

    1页面缩放显示问题 问题描述: 页面似乎被缩小了,屏幕太宽了. 解决办法: 在head标签内加入: <meta name="viewport" content="w ...

  8. jQuery Mobile的基本使用

    本人是软件开发的初学者,总结了一点点日常所学,记录在此,主要目的是鼓励自己坚持学习,怕有一天忘记了,还能复习曾经学过的知识点. 如有大神路过为我指点迷津,纠正改错更是感激不尽,但请不要喷我这个菜鸟!谢 ...

  9. [转载]Jquery mobile 新手问题总汇

    原文链接:http://www.wglong.com/main/artical!details?id=4 此文章将会持续更新,主要收录一些新手比较常见的问题. 欢迎 向我推荐比较典型的常见问题,我会记 ...

随机推荐

  1. 系统找不到指定文件 No installed service name 'Apache2'

    原因:系统服务中没有apache2服务 解决方法: 开始 --运行 --- 输入“CMD”出来DOS窗口---- 输入 D: 回车 再输入 cd D:/Program Files(x86)/Apach ...

  2. 使用ant运行testng的testng.xml并且使用testng-results.xsl美化结果

    先看build.xml <?xml version="1.0" encoding="UTF-8"?> <project basedir=&qu ...

  3. 元素的数据存储-jQuery.data()与.data()

    jQuery提供的存储接口 jQuery.data( element, key, value ) //静态接口,存数据 jQuery.data( element, key ) //静态接口,取数据 . ...

  4. 算法笔记_051:荷兰国旗问题（Java）

    目录 1 问题描述 2 解决方案   1 问题描述 现有n个红白蓝三种不同颜色的小球,乱序排列在一起,请通过两两交换任意两个球,使得从左至右的球依次为红球.白球.蓝球.这个问题之所以叫荷兰国旗,是因为 ...

  5. 模块化开发RequireJS之shim配置

    一.shim requirejs使用AMD规范开发,若开发过程中加载非AMD规范js,需要使用requirejs的shim进行配置. shim配置语法为: //配置文件 requirejs.confi ...

  6. android的五大布局(layout)

    Android的界面是有布局和组件协同完成的,布局好比是建筑里的框架,而组件则相当于建 筑里的砖瓦.组件按照布局的要求依次排列,就组成了用户所看见的界面.Android的五大布局分别是LinearLa ...

  7. 模拟循环单击事件实现layout中间panel全屏

    jquery提供了toggle方法 toggle() 方法切换元素的可见状态. 如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素. 语法 $(selector).toggle(spe ...

  8. linux 安装 登录 centos7

    常用资源下载 r.aminglinux.com centos7.aminglinux.com http://www.apelearn.com/study_v2/ 认识linux Debian Slac ...

  9. 深度CTR预估模型中的特征自动组合机制演化简史 zz

    众所周知,深度学习在计算机视觉.语音识别.自然语言处理等领域最先取得突破并成为主流方法.但是,深度学习为什么是在这些领域而不是其他领域最先成功呢?我想一个原因就是图像.语音.文本数据在空间和时间上具有 ...

  10. JQuery.Page.js分页插件的使用

    1.简单直接贴代码 需要引用以下样式和脚本 <link href="~/Scripts/Page/pager.css" rel="stylesheet" ...