<!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. Tomcat启动报错：java.net.BindException: Cannot assign requested address: JVM_Bind

    Tomcat启动报错:java.net.BindException: Cannot assign requested address: JVM_Bind Tomcat Cannot assign re ...

  2. 关于天津中软国际ETC培训中心的见与闻

    半个月的时间转眼即逝,在中软国际天津ETC的实训的两个星期就这样过去了,在中软国际天津站的这段时间也收获了非常多.明确了非常多,了解了很多关于社会就业的知识以及关于软件培训的一些事情.尽管我的了解可能 ...

  3. 【Pyhton 数据分析】通过gensim进行文本相似度分析

    环境描述 Python环境:Python 3.6.1 系统版本:windows7 64bit 文件描述 一共有三个文件,分别是:file_01.txt.file_02.txt.file_03.txt ...

  4. Android自己定义之流式布局

    流式布局,优点就是父类布局能够自己主动的推断子孩子是不是须要换行,什么时候须要换行,能够做到网页版的标签的效果. 今天就是简单的做了自己定义的流式布局. 详细效果: 原理: 事实上非常easy,Mea ...

  5. VMware Workstation Pro v14.0下载及永久激活密钥

    VMware Workstation Pro v14.0 更新日志: 1.新版支持在Windows 10 创意者更新版上运行并且支持创建和运行创意者更新版虚拟机: 2.新版新增对Ubuntu 17.0 ...

  6. gitlab8.0 一键安装 经过自己测试 发送邮件部分最难搞 国内没有说明白的

    邮件发送部分,弄了一天终于弄好啦,FQ过去查的资料,奶奶的无语 Gitlab搭建步骤 一:操作系统环境 CentOS: 6.5 –x86-64 二:安装方式 一种是自定义安装,一种是一键安装 三:自定 ...

  7. Memcached 测试

    Memcached set 命令用于将 value(数据值) 存储在指定的 key(键) 中. 如果set的key已经存在,该命令可以更新该key所对应的原来的数据,也就是实现更新的作用. 语法: s ...

  8. C#代码覆盖率 -vsinstr和OpenCover

    最近接触的项目涉及到C#开发的应用,测试过程中我们需要去分析C#的代码覆盖率,问了一些人,在网上也搜了一些,零碎的找到很多资料,但是都不是很完整,实际使用的过程中还是走了不少弯路.到现在为止,有两种可 ...

  9. mysql-shell的安装和使用

    mysql-shell是一个高级的mysql命令行工具.它直接两种模式(交互式&批处理式)三种语言(javascript\python\sql) 1.下载地址 https://dev.mysq ...

  10. 双线机房双网卡双ip 路由设置

    做互联网网站,最头疼的事情之一就是电信和网通的互联互不通了,为了能够让北方网通和南方电信用户都可以快速的访问网站,解决办法就是托管 到双线机房.双线机房有两类,一类是通过BGP技术实现互联互通,服务器 ...