<!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>Jquery Mobile Web Page</title>

     <link href="~/Content/css/themes/default/jquery.mobile.structure-1.4.0-beta.1.min.css" rel="stylesheet" />

     <link href="~/Content/css/themes/default/jquery.mobile-1.4.0-beta.1.min.css" rel="stylesheet" />

     <script src="~/Content/js/jquery.js"></script>

     <script src="~/Content/js/jquery.mobile-1.4.0-beta.1.js"></script>

 </head>

 <body>

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

         <h1>对话框效果</h1>

         <div data-role="content">

             <ul data-role="listview">

                 <li><a href="#dialog" data-rel="dialog" data-transition="pop">默认是 pop 效果</a></li>

                 <li><a href="#dialog" data-rel="dialog" data-transition="slide">slide 效果</a></li>

                 <li><a href="#dialog" data-rel="dialog" data-transition="fade">fade 效果</a></li>

                 <li><a href="#dialog" data-rel="dialog" data-transition="flip">flip 效果</a></li>

                 <li><a href="#dialog" data-rel="dialog" data-transition="turn">turn 效果</a></li>

                 <li><a href="#dialog" data-rel="dialog" data-transition="flow">flow 效果</a></li>

                 <li><a href="#dialog" data-rel="dialog" data-transition="slidefade">slidefade 效果</a></li>

                 <li><a href="#dialog" data-rel="dialog" data-transition="slideup">slideup 效果</a></li>

                 <li><a href="#dialog" data-rel="dialog" data-transition="slidedown">slidedown 效果</a></li>

                 <li><a href="#dialog" data-rel="dialog" data-transition="none">none 效果</a></li>

             </ul>

         </div>

         <h1>按钮效果</h1>

         <button>普通按钮</button>

         <input value="Input" type="button" />

         <input value="提交" type="submit" />

         <input value="重置" type="reset" />

         <a href="default" data-role="button">超链接标签按钮</a>

         <a href="default" data-role="button" data-inline="true">内联按钮</a>

         <br />

         <a href="default" data-role="button" data-theme="a" data-inline="true">A</a>

         <a href="default" data-role="button" data-theme="b" data-inline="true">B</a>

         <br />

         <a href="default" data-role="button" data-mini="true">Data-Mini</a>

         <a href="default" data-role="button" data-mini="true" data-inline="true">小内联按钮</a>

         <br />

         <p><strong>Bars</strong> - data-icon="bars"</p>

         <a href="default" data-role="button" data-icon="bars" data-mini="true" data-inline="true">按钮</a>

         <p><strong>Edit</strong> - data-icon="edit"</p>

         <a href="default" data-role="button" data-icon="edit" data-mini="true" data-inline="true">按钮</a>

         <p><strong>Left arrow</strong> - data-icon="arrow-l"</p>

         <a href="default" data-role="button" data-icon="arrow-l" data-mini="true" data-inline="true">按钮</a>

         <p><strong>Right arrow</strong> - data-icon="arrow-r"</p>

         <a href="default" data-role="button" data-icon="arrow-r" data-mini="true" data-inline="true">按钮</a>

         <p><strong>Up arrow</strong> - data-icon="arrow-u"</p>

         <a href="default" data-role="button" data-icon="arrow-u" data-mini="true" data-inline="true">按钮</a>

         <p><strong>Down arrow</strong> - data-icon="arrow-d"</p>

         <a href="default" data-role="button" data-icon="arrow-d" data-mini="true" data-inline="true">按钮</a>

         <p><strong>Delete</strong> - data-icon="delete"</p>

         <a href="default" data-role="button" data-icon="delete" data-mini="true" data-inline="true">按钮</a>

         <p><strong>Plus</strong> - data-icon="plus"</p>

         <a href="default" data-role="button" data-icon="plus" data-mini="true" data-inline="true">按钮</a>

         <p><strong>Minus</strong> - data-icon="minus"</p>

         <a href="default" data-role="button" data-icon="minus" data-mini="true" data-inline="true">按钮</a>

         <p><strong>Check</strong> - data-icon="check"</p>

         <a href="default" data-role="button" data-icon="check" data-mini="true" data-inline="true">按钮</a>

         <p><strong>Gear</strong> - data-icon="gear"</p>

         <a href="default" data-role="button" data-icon="gear" data-mini="true" data-inline="true">按钮</a>

         <p><strong>Refresh</strong> - data-icon="refresh"</p>

         <a href="default" data-role="button" data-icon="refresh" data-mini="true" data-inline="true">按钮</a>

         <p><strong>Forward</strong> - data-icon="forward"</p>

         <a href="default" data-role="button" data-icon="forward" data-mini="true" data-inline="true">按钮</a>

         <p><strong>Back</strong> - data-icon="back"</p>

         <a href="default" data-role="button" data-icon="back" data-mini="true" data-inline="true">按钮</a>

         <p><strong>Grid</strong> - data-icon="grid"</p>

         <a href="default" data-role="button" data-icon="grid" data-mini="true" data-inline="true">按钮</a>

         <p><strong>Star</strong> - data-icon="star"</p>

         <a href="default" data-role="button" data-icon="star" data-mini="true" data-inline="true">按钮</a>

         <p><strong>Alert</strong> - data-icon="alert"</p>

         <a href="default" data-role="button" data-icon="alert" data-mini="true" data-inline="true">按钮</a>

         <p><strong>Info</strong> - data-icon="info"</p>

         <a href="default" data-role="button" data-icon="info" data-mini="true" data-inline="true">按钮</a>

         <p><strong>Home</strong> - data-icon="home"</p>

         <a href="default" data-role="button" data-icon="home" data-mini="true" data-inline="true">按钮</a>

         <p><strong>Search</strong> - data-icon="search"</p>

         <a href="default" data-role="button" data-icon="search" data-mini="true" data-inline="true">按钮</a>

         <br />

         <a href="#" data-role="button" data-icon="bars" data-iconpos="notext" data-theme="b" data-inline="true">Bars</a>

         <a href="#" data-role="button" data-icon="edit" data-iconpos="notext" data-theme="b" data-inline="true">Edit</a>

         <a href="#" data-role="button" data-icon="arrow-l" data-iconpos="notext" data-theme="b" data-inline="true">Arrow left</a>

         <a href="#" data-role="button" data-icon="arrow-r" data-iconpos="notext" data-theme="b" data-inline="true">Arrow right</a>

         <a href="#" data-role="button" data-icon="arrow-u" data-iconpos="notext" data-theme="b" data-inline="true">Arrow up</a>

         <a href="#" data-role="button" data-icon="arrow-d" data-iconpos="notext" data-theme="b" data-inline="true">Arrow down</a>

         <a href="#" data-role="button" data-icon="delete" data-iconpos="notext" data-theme="b" data-inline="true">Delete</a>

         <a href="#" data-role="button" data-icon="plus" data-iconpos="notext" data-theme="b" data-inline="true">Plus</a>

         <a href="#" data-role="button" data-icon="minus" data-iconpos="notext" data-theme="b" data-inline="true">Minus</a>

         <a href="#" data-role="button" data-icon="check" data-iconpos="notext" data-theme="b" data-inline="true">Check</a>

         <a href="#" data-role="button" data-icon="gear" data-iconpos="notext" data-theme="b" data-inline="true">Gear</a>

         <a href="#" data-role="button" data-icon="refresh" data-iconpos="notext" data-theme="b" data-inline="true">Refresh</a>

         <a href="#" data-role="button" data-icon="forward" data-iconpos="notext" data-theme="b" data-inline="true">Forward</a>

         <a href="#" data-role="button" data-icon="back" data-iconpos="notext" data-theme="b" data-inline="true">Back</a>

         <a href="#" data-role="button" data-icon="grid" data-iconpos="notext" data-theme="b" data-inline="true">Grid</a>

         <a href="#" data-role="button" data-icon="alert" data-iconpos="notext" data-theme="b" data-inline="true">Alert</a>

         <a href="#" data-role="button" data-icon="info" data-iconpos="notext" data-theme="b" data-inline="true">Info</a>

         <a href="#" data-role="button" data-icon="home" data-iconpos="notext" data-theme="b" data-inline="true">Home</a>

         <a href="#" data-role="button" data-icon="search" data-iconpos="notext" data-theme="b" data-inline="true">Search</a>

         <br />

         <a href="default" data-role="button" data-icon="arrow-l" data-iconpos="left" data-mini="true" data-inline="true">上一页</a>

         <a href="default" data-role="button" data-icon="arrow-r" data-iconpos="right" data-mini="true" data-inline="true">下一页</a>

         <br />

         <a href="default" data-role="button" data-icon="arrow-u" data-iconpos="top" data-mini="true">返回顶部</a>

         <a href="default" data-role="button" data-icon="arrow-d" data-iconpos="bottom" data-mini="true">查看更多</a>

         <br />

         垂直按钮组

         <div data-role="controlgroup">

             <a href="#" data-role="button">按钮I</a>

             <a href="#" data-role="button">按钮II</a>

             <a href="#" data-role="button">按钮III</a>

         </div>

         水平按钮组

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

             <a href="#" data-role="button">按钮I</a>

             <a href="#" data-role="button">按钮II</a>

             <a href="#" data-role="button">按钮III</a>

         </div>

         迷你水平按钮组

         <div data-role="controlgroup" data-type="horizontal" data-mini="true">

             <a href="#" data-role="button">按钮I</a>

             <a href="#" data-role="button">按钮II</a>

             <a href="#" data-role="button">按钮III</a>

         </div>

         <br />

         <a href="#" class="ui-btn ui-state-disabled">UI禁用按钮</a>

         <button disabled="">禁用按钮</button>

     </div>

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

         <div data-role="header">

             <h1>用于对话框效果测试</h1>

         </div>

         <div data-role="content">

             用于内容效果测试

         </div>

         <div data-role="footer">

             <h4>Asp.Net Mvc 4.0 +JqueryMobile 1.4.0-beta 1</h4>

         </div>

     </div>

 </body>

 </html>

主攻ASP.NET MVC4.0之重生:Jquery Mobile 按钮+对话框使用的更多相关文章

  1. 主攻ASP.NET MVC4.0之重生:Jquery Mobile 列表

    代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title ...

  2. 主攻ASP.NET MVC4.0之重生:Jquery Mobile 表单元素

    相关代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit ...

  3. 主攻ASP.NET MVC4.0之重生:Jquery Mobile 面板

    左滑动面板效果: 右滑动面板效果: @{ ViewBag.Title = "JQuery Mobile Web Page"; } <!DOCTYPE html> < ...

  4. 主攻ASP.NET MVC4.0之重生:ASP.NET MVC使用JSONP

    原文:主攻ASP.NET MVC4.0之重生:ASP.NET MVC使用JSONP 原文地址 http://www.codeguru.com/csharp/.net/net_asp/using-jso ...

  5. 主攻ASP.NET MVC4.0之重生:Asp.Net MVC WebApi OData

    1.新建MVC项目,安装OData Install-Package Microsoft.AspNet.WebApi.OData -Version 4.0.0 2.新建WebAPI Controller ...

  6. 主攻ASP.NET MVC4.0之重生:ASP.NET MVC Web API

    UserController代码: using GignSoft.Models; using System; using System.Collections.Generic; using Syste ...

  7. 主攻ASP.NET MVC4.0之重生:CheckBoxListHelper和RadioBoxListHelper的使用

    在项目中新建Helpers文件夹,创建CheckBoxListHelper和RadioBoxListHelper类. CheckBoxListHelper代码 using System; using ...

  8. 主攻ASP.NET MVC4.0之重生:MVC Controller修改Controller.tt模版,自动添加版本注释信息

    第一步找到MVC 4.0 CodeTemplates 一般路径在:C:\Program Files (x86)\Microsoft Visual Studio 11.0\Common7\IDE\Ite ...

  9. 主攻ASP.NET MVC4.0之重生:上下滑动屏幕动态加载数据

                @{ ViewBag.Title = "Index"; } <!DOCTYPE html> <html> <head> ...

随机推荐

  1. Javascript间歇调用和超时调用

    间歇调用:每隔指定的时间就执行一次代码 超时调用:在指定的时间过后执行代码  HTML Code  12345678910111213141516171819   <!DOCTYPE html& ...

  2. scrapy初体验 - 安装遇到的坑及第一个范例

    scrapy,python开发的一个快速,高层次的屏幕抓取和web抓取框架,用于抓取web站点并从页面中提取结构化的数据.scrapy用途广泛,可以用于数据挖掘.监测和自动化测试.scrapy的安装稍 ...

  3. flask session 使用默认配置修改session不生效问题

    flask session相关 使用flask 默认sessio是存储在浏览器的cookie中,当请求返回时会将session写在cooKie中,但是在写的时候,默认并不是每次都重新写入 比如下例子 ...

  4. 如何解决mac下MAMP不能重启apache server的问题

    第一步:检查问题  在终端输入:sudo /Applications/MAMP/Library/bin/apachectl start  终端会提示你那个目录下的那个文件出现了什么问题 第二步:逐一排 ...

  5. nginx访问css js 图片等静态资源，报404或无法定向访问到

    配置完nginx,把php的项目放上去后,发现css,js和图片全部访问不到,一直重定向到根目录执行index.php,郁闷的在网上查了半天,原来不同后缀名的文件访问时都要在nginx.conf中声明 ...

  6. Linux命令之split

    split用来将大文件分割成小文件.有时文件越来越大,传送这些文件时,首先将其分割可能更容易. 使用vi或其他工具诸如sort时,如果文件对于工作缓冲区太大,也会存在一些问题. 因此有时没有选择余地, ...

  7. iOS面试题--Model层--沙盒的目录结构是怎么样的？各自一般用于什么场合？

    沙盒的目录结构是怎么样的?各自一般用于什么场合? 一.iOS沙盒机制 iOS的应用只能访问为该应用创建的区域,不可访问其他区域,应用的其他非代码文件都存在此目录下,包括图片,属性文件plist,bun ...

  8. TP数据查询

    [数据查询] select()是数据模型的一个指定方法,可以获得数据表的数据信息 返回一个二维数组信息,当前数据表的全部数据信息 $obj = D();  创建对象 $obj -> select ...

  9. windows下在Eclipse中启动的tomcat没有乱码，单独部署到tomcat下乱码解决方案

    今天遇到了一个很奇怪的问题,在Eclipse中调试,运行项目一切正常,项目的所有编码都是统一的UTF-8.但是在单独部署到tomcat上的时候出现了中文乱码. 解决方案 第一步:确保项目,jsp页面, ...

  10. Quality of service

    w https://en.wikipedia.org/wiki/Quality_of_service Quality of service (QoS) is the overall performan ...