<!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. ZT：没有谁的成功是横空出世

    这世上,没有谁的成功是横空出世. 你看到的胸有成竹,是别人犯过错后的顿悟: 你看到的举重若轻,是别人跌过跤后的自省: 你看到的闪亮光环,是一个人咬牙走了很久的夜路,才为自己点亮的一盏灯. 你以为自己输 ...

  2. Node.js aitaotu图片批量下载Node.js爬虫1.00版

    即使是https网页,解析的方式也不是一致的,需要多试试. 代码: //====================================================== // aitaot ...

  3. 自开发实现Quartz Web管理

    网上能找到的QuartzWeb管理的资料都是使用的一个国外人写的Quartz WebApp的东东.功能也非常全面. 可是作为自己的应用其有用不了那么多功能,一般我们仅仅要能够定义一个job,指定一个C ...

  4. Gamescom2014:中国游戏公司37.com进军西方海外市场

    在2014年的德国科隆国际游戏展上.Xsolla曾与37.com聊天.我们讨论了中国公司眼下进军西方市场的战略,谈到营销的最有效方法.游戏货币化,并讨论在欧洲和土耳其的网页游戏的前景. 37wan 能 ...

  5. 算法笔记_069:Floyd算法简单介绍（Java）

    目录 1 问题描述 2 解决方案 2.1 使用Floyd算法得到最短距离示例 2.2 具体编码   1 问题描述 何为Floyd算法? Floyd算法功能:给定一个加权连通图,求取从每一个顶点到其它所 ...

  6. 使用PHP和GZip压缩网站JS/CSS文件加速网站访问速度

    使用PHP和GZip压缩网站JS/CSS文件加速网站访问速度 一些泛WEB 2.0网站为了追求用户体验,可能会大量使用CSS和JS文件.这就导致在服务器带宽一定的情况下,多用户并发访问速度变慢.如何加 ...

  7. 滚动锁定 scroll lock 键有什么用？

    滚动锁定 scroll lock 键有什么用? 中文名称:滚动锁定键  按下此键后在Excel等按上.下键滚动时,会锁定光标而滚动页面:如果放开此键,则按上.下键时会滚动光标而不滚动页面.      ...

  8. java写的小脚本，用来受mDNS消息

    太ugly了,但是可以工作,抓了包下来,用前面DNS message structure做了下比较. 代码如下: import java.net.DatagramPacket; import java ...

  9. Excel 时间格式相减

    https://jingyan.baidu.com/article/3065b3b6e8b9dabecff8a4d6.html datedif函数是excel的隐藏函数,主要用于计算日期之差,不是四舍 ...

  10. python selenium--常用函数3

    ActionChains类鼠标操作的常用方法: 引入ActionChains类:from selenium.webdriver.common.action_chains import ActionCh ...