<!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. http_load压力测试使用

    介绍:http_load以并行复用的方式运行,用以测试web服务器的吞吐量与负载.但是它不同于大多数压力测试工具,它可以以一个单一的进程运行,一般不会把客户机搞死.还可以测试HTTPS类的网站请求. ...

  2. 正确遍历删除List中的元素方法(推荐)

    遍历删除List中的元素有很多种方法,当运用不当的时候就会产生问题.下面主要看看以下几种遍历删除List中元素的形式: 1.通过增强的for循环删除符合条件的多个元素 2.通过增强的for循环删除符合 ...

  3. Redis Cluster集群的搭建

    redis集群搭建原理: redis是单线程,但是一般的作为缓存使用的话,redis足够了,因为它的读写速度太快了.   官方的一个简单测试: 测试完成了50个并发执行100000个请求. 设置和获取 ...

  4. error: could not install *smartsocket* listener: cannot bind to 127.0.0.1:5037

    问题原因:端口5037被占用 解决方案: 方式一:可以用cmd命令 C:\Users\Administrator>netstat -ano | findstr "5037" ...

  5. Vue 组件与复用

    (1)全局注册 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="U ...

  6. 剑指OFFER之二叉搜索树与双向链表（九度OJ1503）

    题目描述: 输入一棵二叉搜索树,将该二叉搜索树转换成一个排序的双向链表.要求不能创建任何新的结点,只能调整树中结点指针的指向. 输入: 输入可能包含多个测试样例.对于每个测试案例,输入的第一行为一个数 ...

  7. Java 线程池的原理与实现 （转）

        最近在学习线程池.内存控制等关于提高程序运行性能方面的编程技术,在网上看到有一哥们写得不错,故和大家一起分享. [分享]Java 线程池的原理与实现 这几天主要是狂看源程序,在弥补了一些以前知 ...

  8. Spark-Dependency

    1.Spark中採用依赖关系(Dependency)表示rdd之间的生成关系.Spark可利用Dependency计算出失效的RDD.在每一个RDD中都存在一个依赖关系的列表 private var ...

  9. How to fix Cannot change version of project facet Dynamic Web Module to 3.0 Error in Eclipse---转载

    How to fix Cannot change version of project facet Dynamic Web Module to 3.0 Error in Eclipse 原文:http ...

  10. printf函数对参数的计算顺序

    没想到啊,没想到: printf函数对参数的计算顺序是从右往左的! 我不禁想问一句,这么坑爹的事情,书里居然没有写过.还是我看书不仔细,没有找到?(回头,在自己翻翻那本c语言编程) 于是下面的程序结果 ...