jquerymobile设计完整例子_jquerymobile例子,jquerymobile例子资源-CSDN下载

共35个文件

svn-base：9个

png：8个

html：5个

jquerymobile

完整例子

4星 · 超过85%的资源需积分: 49 117 浏览量 2014-05-11 01:54:00 上传评论 38 收藏 314KB ZIP 举报

**jQuery Mobile 设计详解** jQuery Mobile 是一个轻量级、响应式的前端框架，专为触摸设备的网页设计和开发而构建。它简化了创建移动友好的网页应用的过程，提供了丰富的组件和交互效果，使得开发者可以快速构建功能丰富的移动界面。在“jQuery Mobile 设计完整例子”中，我们将深入探讨这个框架的各个方面，包括登录页面的设计、菜单的实现以及菜单间的切换。 1. **登录页面设计** jQuery Mobile 提供了预定义的样式和布局结构，用于创建美观的登录界面。在这个例子中，我们可以看到如何利用`<form>`元素配合`<input type="text">`（用户名）和`<input type="password">`（密码）来创建输入框，再用`<button>`创建提交按钮。同时，jQuery Mobile 的数据属性如`data-role="page"`和`data-theme`可以调整页面和元素的外观。 2. **菜单系统构建** 菜单在移动应用中扮演着重要的角色。jQuery Mobile 的`<div data-role="navbar">`元素是创建固定顶部或底部导航栏的理想选择。每个导航项可以通过`<a>`标签来创建，并通过`href`属性链接到相应的页面。此外，`data-icon`属性可以添加图标，提升用户体验。 3. **页面间切换** jQuery Mobile 使用无刷新技术（AJAX）来实现页面间的平滑切换。通过设置`data-rel="next"`或`data-rel="back"`，可以实现向后或向前的页面跳转。同时，`data-transition`属性可以指定过渡动画，如滑动、淡入淡出等，以增加动态效果。 4. **触摸事件处理** 移动设备上，触摸事件是与用户交互的主要方式。jQuery Mobile 自带了对`tap`、`swipe`、`taphold`等触摸事件的支持，使得开发者可以轻松地处理用户的触摸操作。例如，通过监听`tap`事件，可以在用户轻触某项时触发相应的行为。 5. **主题和自定义样式** jQuery Mobile 提供了一套强大的主题系统，允许开发者通过简单的 CSS 类选择器改变整个应用的视觉风格。`data-theme`属性可以应用于任何元素，改变其背景色、边框和文本颜色。此外，还可以通过修改主题CSS文件进行更深度的定制。 6. **响应式布局** 为了适应不同屏幕尺寸的设备，jQuery Mobile 实现了自动响应式布局。`data-mini`和`data-inline`属性可以用于创建更紧凑的界面，而`data-grid`则可用于定义网格布局，确保元素在不同屏幕宽度下都能良好排列。 7. **表单组件** 表单在移动应用中不可或缺。jQuery Mobile 提供了多种表单组件，如滑块、开关、日期选择器等，这些组件都经过优化，适合触摸操作。通过添加特定的数据属性，可以轻松地将普通HTML表单元素转化为交互丰富的组件。总结，"jQuery Mobile 设计完整例子"提供了一个全面的实践指南，涵盖了从登录界面到复杂菜单系统的开发流程。学习这个例子，开发者可以快速掌握jQuery Mobile的核心功能，从而高效地开发出适应各种移动设备的交互式应用。无论是新手还是经验丰富的开发者，都能从中受益，提升其在移动Web开发领域的技能。

资源推荐

资源详情

资源评论

收起资源包目录

jqmobile从登陆到菜单完整例子.zip （35个子文件）

jqmobile从登陆到菜单完整例子

assets

jquery.mobile-1.0.1.min.js 82KB

jquery.js 233KB

cordova-1.5.0.js 150KB

.svn

props

format 2B

prop-base

tmp

props

prop-base

text-base

cordova-1.5.0.js.svn-base 150KB

jquery.js.svn-base 233KB

jquery.mobile-1.0.1.min.js.svn-base 82KB

entries 714B

css

jquery.mobile-1.0.1.min.css 49KB

.svn

props

format 2B

prop-base

tmp

props

prop-base

text-base

jquery.mobile-1.0.1.min.css.svn-base 49KB

entries 411B

image

gf.png 545B

icons-18-black.png 2KB

album-bb.jpg 4KB

icons-36-white.png 4KB

album-hc.jpg 13KB

icons-18-white.png 2KB

de.png 545B

album-p.jpg 8KB

ajax-loader.png 366B

icons-36-black.png 4KB

gb.png 599B

page

main4.html 2KB

main3.html 2KB

main.html 2KB

index.html 4KB

main2.html 2KB

.svn

props

format 2B

prop-base

tmp

props

prop-base

text-base

main3.html.svn-base 2KB

main4.html.svn-base 2KB

main2.html.svn-base 2KB

index.html.svn-base 3KB

main.html.svn-base 2KB

entries 997B

<!DOCTYPE html> <html> <head> <meta charset="UTF-8">  <meta http-equiv="Content-type" name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width"> <link rel="stylesheet" href="../css/jquery.mobile-1.0.1.min.css" /> <script src="../js/jquery.js"></script> <script src="../js/jquery.mobile-1.0.1.min.js"></script> <script src="../js/cordova-1.5.0.js"></script> <script type="text/javascript"> //进行登录 $('#btnLogin').live("tap",function(){ var sQuery = $("#username").val(); sQuery = "http://211.147.238.81:8088/login.aspx?UserName=" + sQuery; $.mobile.changePage('#result', { transition: "fade"}); $("#resultConftent").load("http://211.147.238.81:8088/login.aspx?username=Test"); }); //为页面添加swip 事件 $("#home").live("pageinit",function(){ //当我们向左滑动的时候,进入result页面 $('#homeContent').bind("swipeleft",function(){ alert("向左滑"); }); //当我们向右滑动的时候,回到主页 $('#homeContent').bind("swiperight",function(){ alert("向右滑"); }); }); </script> </head> <body> <div data-role="page" id="home"> <div data-role="header" data-position="fixed"> <h1>个人登录</h1> <a href="#setting" data-role="button" data-icon="gear" data-transition="slide">设置</a> </div> <div data-role="content" id="homeContent" > <label for="username">用户名：</label> <input type="text" id="username" placeholder="请输入用户名" /> <label for="userpassword">密码：</label> <input type="password" id="userpassword" placeholder="请输入密码 " /> <p></p> <input type="checkbox" id="checkbox-0" data-role="none" /> <label for="checkbox-0">记住密码</label> <input type="checkbox" id="checkbox-2" data-role="none" /> <label for="checkbox-2">自动登录</label> </div> <div data-role="footer" data-position="fixed" > <div data-role="navbar"> <ul> <li><a href="#result" data-role="button" data-icon="forward" data-transition="slide">登录提示</a></li> <li><a href="main.html" data-role="button" data-icon="arrow-r" data-transition="slide" rel="external">直接登录</a></li> </ul> </div> </div> </div> </div> <div data-role="page" id="result"> <div data-role="header"> <h1>登录提示</h1> </div> <div data-role="Content" id="resultContent"> 提示内容 </div> <div data-role="footer" data-position="fixed"> <div data-role="navbar"> <ul> <li><a href="#home" data-role="button" data-icon="refresh" data-transition="slide">重新登录</a></li> </ul> </div> </div> </div> <div data-role="page" id="setting"> <div data-role="header"> <h1>登录设置</h1> </div> <div data-role="Content" id="resultContent"> 设置内容 </div> <div data-role="footer" data-position="fixed"> <div data-role="navbar"> <ul> <li><a href="#home" data-role="button" data-icon="check" data-transition="slide">确认</a></li> <li><a href="#home" data-role="button" data-icon="refresh" data-transition="slide">返回</a></li> </ul> </div> </div> </div> </body> </html>

评论收藏

内容反馈