主攻ASP.NET MVC4.0之重生:Jquery Mobile 按钮+对话框使用
<!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 按钮+对话框使用的更多相关文章
- 主攻ASP.NET MVC4.0之重生:Jquery Mobile 列表
代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title ...
- 主攻ASP.NET MVC4.0之重生:Jquery Mobile 表单元素
相关代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit ...
- 主攻ASP.NET MVC4.0之重生:Jquery Mobile 面板
左滑动面板效果: 右滑动面板效果: @{ ViewBag.Title = "JQuery Mobile Web Page"; } <!DOCTYPE html> < ...
- 主攻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 ...
- 主攻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 ...
- 主攻ASP.NET MVC4.0之重生:ASP.NET MVC Web API
UserController代码: using GignSoft.Models; using System; using System.Collections.Generic; using Syste ...
- 主攻ASP.NET MVC4.0之重生:CheckBoxListHelper和RadioBoxListHelper的使用
在项目中新建Helpers文件夹,创建CheckBoxListHelper和RadioBoxListHelper类. CheckBoxListHelper代码 using System; using ...
- 主攻ASP.NET MVC4.0之重生:MVC Controller修改Controller.tt模版,自动添加版本注释信息
第一步找到MVC 4.0 CodeTemplates 一般路径在:C:\Program Files (x86)\Microsoft Visual Studio 11.0\Common7\IDE\Ite ...
- 主攻ASP.NET MVC4.0之重生:上下滑动屏幕动态加载数据
@{ ViewBag.Title = "Index"; } <!DOCTYPE html> <html> <head> ...
随机推荐
- 嵌入式开发之赛灵思 xilinx Zynq芯片简介---Zynq-7000 EPP (XC7Z010 and XC7Z020）
(1)企业简介 作为DSP 和视频应用领域的头号 FPGA 供应商,赛灵思致力于通过其目标设计平台提供业内领先的 DSP 开发工具.方法.IP 和技术支持.赛灵思面向 DSP 的目标设计平台将这些元素 ...
- NetCore 中 EFcore的DbFirst和CodeFirst混合 使用注意
NetCore 最近很火热.笔者想把自己以前的旧项目迁移到NetCore平台. 先用EFcore的DBFirst根据数据库创建实体类,然后加入数据库版本控制功能也就是EFcore的CodeFirst部 ...
- python静态网页爬虫之xpath
常用语句: 1.starts-with(@属性名称,属性字符相同部分)使用情形: 以相同的字符开头 <div id = 'test-1'>需要的内容1</div> <di ...
- Laravel 5.1 Blade模板引擎
为什么要使用blade 它是干什么用的? blade模板引擎使我们写HTML页面的地方,使用它是因为它能给我们提供很多的遍历,减少代码的重复率 提高开发效率.我们写blade的路径是 resource ...
- html5离线缓存使用
html5 离线缓存使用以及注意事项 1.index.html中加入离线缓存的声明文件 如:<!DOCTYPE html><html manifest="test.appc ...
- poj1742
Coins Time Limit: 3000MS Memory Limit: 30000K Total Submissions: 33998 Accepted: 11554 Descripti ...
- 【转】哈希(Hash)与加密(Encrypt)的基本原理、区别及工程应用
0.摘要 今天看到吉日嘎拉的一篇关于管理软件中信息加密和安全的文章,感觉非常有实际意义.文中作者从实践经验出发,讨论了信息管理软件中如何通过哈希和加密进行数据保护.但是从文章评论中也可以看出很多朋友对 ...
- [mysql]清除单表大量数据方法（需保留部分数据）
大半夜的在删除线上的日志数据,需要清理的大概有1亿八千万条...任务艰巨. 毕业前没学过数据库,所以对于如何清理大量数据还真一时不知道该怎么办才好.刚开始确实想过对表进行重命名的方式来处理,不过当时因 ...
- Django分发控制器urls--白话聊Django系列
开始前,先上一张图,让理解Django内部的处理流程,从图中我们可以知道Django内部使用MTV架构,那今天讲的第一个部分就是控制器,在Tornado框架中叫做路由系统,负责把url映射到相应的处理 ...
- js验证表单大全1
附加:js验证radio是否选择 <script language="javascript"> function checkform(obj) { for(i=0;i& ...