<!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. 【原创】Android自定义适配器的使用方法

    比如说我们已经得到了数据,想在一个listview或者在其他的控件中显示的,并且我们显示想要自己设计样式来显示的话就要用到自定义适配器了,下面让我们结合代码讲一下具体的使用方法: 代码会有注释的哦: ...

  2. Mybatis使用Redis二级缓存

    在Mybatis中允许开发者自定义自己的缓存,本文将使用Redis作为Mybatis的二级缓存.在Mybatis中定义二级缓存,需要如下配置: 1. MyBatis支持二级缓存的总开关:全局配置变量参 ...

  3. iOS_Objective-C測试

    1. iOS中程序正常载入UIViewControlle时,下面四个方法哪个最先运行? A.viewVillAppear B.viewDidLoad C.viewDidAppear D.viewWil ...

  4. iOS NSFileManager对沙盒文件及目录添加删除操作

    iOS 使用 NSFileManager对沙盒里面的文件和目录,增加,修改,删除操作: - (void)viewDidLoad { [super viewDidLoad]; self.title = ...

  5. IPhone打包工具脚本

    (后面就是代码了,我就不翻译了.) #!/usr/bin/perl use File::Copy; my $installPath = $ARGV[]; #the name that displays ...

  6. Linux相关面试题&答案

    Linux相关面试题&答案 Linux面试题&答案 假设apache日志格式为:118.78.199.98 – - [09/Jan/2010:00:59:59 +0800] " ...

  7. lodash merge mergeWith使用

    1.作用 递归合并来源对象的自身和继承的可枚举属性到目标对象. 2.示例 <!DOCTYPE html> <html lang="zh"> <head ...

  8. Android4.4 SystemUI加入Dialog弹窗

    此弹窗为开机SystemUI的显示弹窗: 首先.在SystemUI的源代码文件夹加入源代码类文件,文件夹为frameworks/base/packages/SystemUI/src/com/andro ...

  9. 一个漂亮而强大的自定义view

    代码地址如下:http://www.demodashi.com/demo/13502.html 简介 主要提供一个漂亮而强大的自定义SeekBar,进度变化由提示牌 (sign)展示,具有强大的属性设 ...

  10. iOS 移动端生成工具开发

    代码地址如下:http://www.demodashi.com/demo/11284.html 一.准备工作 编译环境 xcode 用于生成冗余架构代码, 实现生成零耦合架构 二.程序实现 上个月的一 ...