Jquery Mobile 小结
第一次做一个移动站点，当时纠结选Jquery Mobile还是Zepto，Zepto相对于JM更加轻巧，语法上面也很相似，但考虑到时间问题和JM自带了很多组件（Bootstrap惯出来的），还是选择了JM。JM主要通过data-role来定义页面控件，比如定义一个page，<div data-role="page"></div> 以及data-xx属性来对控件进行修饰。比如定义一个mini的button：<a data-role='button' data-mini='true' >Button</a> ，而不是全部用的样式。官网文档有详细的使用说明，我下面只介绍下我常用的控件和遇到的一些问题。
一、基本布局
先引用：
<link href="/Mobile/js/jquery.mobile-1.4.5/jquery.mobile-1.4.5.css" rel="stylesheet" />
<script src="/Mobile/js/jquery.mobile-1.4.5/jquery.min.js"></script>
<script src="/Mobile/js/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>
1.page: 每个页面同时只会显示一个page元素。可以通过a标签来进行切换显示。一个比较完整的page还包括Header、Footer和导航条。中间部分是content。我的基本的page是这样的：
<body>
<section data-role="page" id="page" >
<uc1:Header ID="header" runat="server" />
<div data-role="content">
<nav:Nav ID="header1" runat="server" />
<div data-role="collapsibleset">
<asp:Repeater ID="rptCategories" runat="server">
<ItemTemplate>
<div data-role="collapsible" data-iconpos="right" data-collapsed="false">
<h4><%#Eval("Title")%></h4>
<article>
<%#Eval("Conten")%>
</article>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
</div>
<uc2:footer ID="footer1" runat="server" />
</section>
</body>
Header和Footer做成用户控件，用Repeater显示内容。
Header：
<div id="header" >
<div class="logo">
<a href="/Mobile/Index.aspx" data-ajax="false" class="ui-link">
<img src="/Mobile/Images/logo.png" alt="" width="175" height="35" /></a>
</div>
<div class="tel">
<a href="tel:4000-999-001" class="ui-link ">Tel:4000-999-001</a>
</div>
</div>
<header data-role="header" class="ui-bar-g" id="mainheader">
<div id="usernav" data-role="controlgroup" data-type="horizontal">
<a href="#" class="ui-btn ui-corner-all">北京</a>
<%=IsLoginHtml %>
</div>
</header>
Footer:
<footer data-role="footer" id="userfooter" class="ui-bar-g" >
<div data-role="controlgroup" data-type="horizontal">
<%=IsLoginHtml %>
</div>
<%-- <a href="#page" data-icon="arrow-u" style="float: right" data-ajax="false" >Top</a>--%>
</footer>
<div id="header" class="">
<div class="logo">
<a href="/Mobile/Index.aspx" data-ajax="false" class="ui-link">
<img src="/Mobile/Images/logo.png" alt="" width="175" height="35" /></a>
</div>
<div class="tel">
<a href="tel:4000-999-001" class="ui-link ">Tel:4000-999-001</a>
</div>
<%--<a href="#" class="ui-btn ui-icon-phone ui-btn-icon-notext fr" ></a>--%>
</div>
<div class="text-center">
<p>Copyright © 2014-2018 bjleju.com All Rights Reserved <a data-ajax="false" href="../../index.aspx">电脑版</a></p>
</div>
2.navbar，因为是移动端，JM限制data-grid一行最多五个button，太多了确实文字都显示不全。data-grid="c" 对应4个元素，data-grid="d" 对应5个元素。
<div data-role="navbar" data-grid="c">
<ul>
<li><a href="/Mobile/Homemaking/Index.aspx" data-ajax="false" data-role="button">家政</a>
</li>
<li><a href="/Mobile/Clean/Index.aspx" data-ajax="false" data-role="button">保洁</a></li>
<li><a href="/Mobile/Train/Index.aspx" data-ajax="false" data-role="button">培训</a></li>
<li><a href="/Mobile/Shop/Index.aspx" data-ajax="false" data-role="button">商城</a></li>
</ul>
</div>
a标签可以不加data-role='button',默认data-ajax="true",这里要说明的是，data-ajax='true'的时候，页面跳转会出现加载动画，但不会加载下一个页面中的独有样式，脚本也可能会不执行。这个问题层让我困扰了一阵，页面跳转之后要要刷新一下，有的样式才加载上来，好奇怪，原来是data-ajax的问题，如果几个页面都公用一个样式文件，这样跳转的时候就不必设置data-ajax属性。
添加class="ui-btn-active" 可以高亮：
3.ListView。 列表项是一个用的比较多的控件，还涉及到分页。分页后台用的是AspNetPager
分页：
pager.FldName = "Id";
pager.TblName = "Ydr_Leju_Houkee";
pager.StrGetFields = "*"; pager.PageSize = PSize;
if (page < )
{
pager.PageIndex = ;
}
else
{
pager.PageIndex = page;
}
pager.DoCount = ;
pager.OrderType = ;
pager.StrWhere = strWhere;
int totalCount = pbll.GetCount(pager.TblName, strWhere); string NewNum = "";
string ChannelType = "t";
DataTable dt = pbll.GetAllList(pager).Tables[];
string _returnStr = string.Empty;
_returnStr = "{\"result\" :\"1\"," +
"\"returnval\" :\"操作成功\"," +
"\"newnum\" :" + NewNum + "," +
"\"returmodule\" :\"" + ChannelType + "\"," +
"\"pagebar\" :\"" + PageBar.GetPageBar(, "js", , totalCount, PSize, page, "javascript:ajaxList(<#page#>);") + "\"," +
dtHelp.DT2JSON(dt, (PSize * (page - ))) +
"}";
dt.Clear();
dt.Dispose();
return _returnStr;
前端用了模板填充
<ul id="ajaxList" data-role="listview" data-filter="true" data-inset="true">
</ul> <div id="ajaxPageBar" class="pages">
</div>
<textarea class="template" id="tplList" style="display: none">
{#foreach $T.table as record}
<li class="ui-li-has-thumb"><a href="/Mobile/Homemaking/Detail.aspx?id={$T.record.id}" data-ajax="false" class="ui-btn ui-btn-icon-right ui-icon-carat-r" >
<img src="/Upload/Houkee-Upload/{$T.record.photo}" alt="" />
<h2>{$T.record.name}</h2>
<p>{$T.record.currentaddr} {$T.record.age} 工作经验：{$T.record.bhours}</p>
</a>
</li> {#/for}
</textarea> <script>
var pagesize = ;
function ajaxList(currentpage) {
var age = "不限";
var bhours = "不限";
var stype = "不限";
var queryStr = "&age=" + age + "&bhours=" + bhours + "&stype=" + stype + "&page=" + currentpage + "&pagesize=" + pagesize;
$.ajax({
type: "get",
dataType: "json",
data: queryStr,
url: "ajax.aspx?oper=ajaxGetList",
error: function (XmlHttpRequest, textStatus, errorThrown) { alert(XmlHttpRequest.responseText); },
success: function (d) {
switch (d.result) {
case '-1':
top.JumboTCMS.Alert(d.returnval, "", "top.location.href='index.aspx';");
break;
case '':
top.JumboTCMS.Alert(d.returnval, "");
break;
case '':
$("#ajaxList").setTemplateElement("tplList", null, { filter_data: true });
$("#ajaxList").processTemplate(d);
//ActiveCoolTable();
$("#ajaxPageBar").html(d.pagebar);
break;
}
}
});
}
ajaxList();
</script>
data-filter="true" 会出现搜索框。让用户对内容进行检索。
5.ui-grid 类似于bootstrap的栅格布局。但最多一行只会5个元素。
<div class="ui-grid-b">
<div class="ui-block-a">
<a href="/Mobile/Homemaking/FindAunt.aspx" data-mini="true" data-ajax="false" data-icon="user" data-theme="g" data-role="button">找阿姨</a>
</div>
<div class="ui-block-b">
<a href="/Mobile/Homemaking/FindJob.aspx" data-mini="true" data-ajax="false" data-icon="search" data-theme="g" data-role="button">找工作</a>
</div>
<div class="ui-block-c">
<a href="/Mobile/Join/Index.aspx" data-mini="true" data-ajax="false" data-icon="plus" data-theme="g" data-role="button">加盟</a>
</div>
</div>
data-icon 指示图标，默认位置是在文字左边。全部的icon ，通过设置data-iconpos为right，left，top，bottom 来控制icon的位置。添加样式ui-btn-icon-notext 可以只显示图标。
但如果Grid是多行就按顺序写ui-block-a ---ui-block-d
<div class="ui-grid-a">
<div class="ui-block-a">
<div class="exquisitebox">
<div class="einfo">
<div>沙发</div>
<p>高端典雅</p>
</div>
<div class="eimg">
<a data-ajax="false" href="/Mobile/Shop/Products.aspx">
<img src="/Mobile/Images/shafa.png" /></a>
</div>
</div>
</div>
<div class="ui-block-b">
<div class="exquisitebox">
<div class="einfo">
<div>床</div>
<p>舒适精选</p>
</div>
<div class="eimg">
<a data-ajax="false" href="/Mobile/Shop/Products.aspx">
<img src="/Mobile/Images/bad.png" /></a>
</div>
</div>
</div>
<div class="ui-block-a">
<div class="exquisitebox">
<div class="einfo">
<div>衣柜</div>
<p>珍藏美丽</p>
</div>
<div class="eimg">
<a data-ajax="false" href="/Mobile/Shop/Products.aspx">
<img src="/Mobile/Images/yigui.png" /></a>
</div>
</div>
</div>
<div class="ui-block-b">
<div class="exquisitebox">
<div class="einfo">
<div>餐桌</div>
<p>舒适空间</p>
</div>
<div class="eimg">
<a data-ajax="false" href="/Mobile/Shop/Products.aspx">
<img src="/Mobile/Images/canzhuo.png" /></a>
</div>
</div>
</div>
<div class="ui-block-a">
<div class="exquisitebox">
<div class="einfo">
<div>茶几</div>
<p>精品上市</p>
</div>
<div class="eimg">
<a data-ajax="false" href="/Mobile/Shop/Products.aspx">
<img src="/Mobile/Images/chaji.png" /></a>
</div>
</div>
</div>
<div class="ui-block-b">
<div class="exquisitebox">
<div class="einfo">
<div>书柜</div>
<p>蕴藏瀚海</p>
</div>
<div class="eimg">
<a data-ajax="false" href="/Mobile/Shop/Products.aspx">
<img src="/Mobile/Images/shugui.png" /></a>
</div>
</div>
</div>
</div>
6.collapsibleset 可折叠框是一个collapsibleset包含多个collapsible
<div data-role="collapsibleset">
<asp:Repeater ID="rptCategories" runat="server">
<ItemTemplate>
<div data-role="collapsible" data-iconpos="right" data-collapsed="false">
<h4><%#Eval("Title")%></h4>
<article>
<%#Eval("Conten")%>
</article>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
7.panel，panel主要是做侧边栏。
<div data-role="page">
<header data-role="header">
<h1>乐居商城</h1>
<a href="#left-panel" data-icon="bars" data-iconpos="notext" data-shadow="false" data-iconshadow="false">Menu</a>
<a href="#right-panel" data-icon="gear" data-iconpos="notext">Add</a>
</header>
<!-- /header -->
<div role="main" class="ui-content"> <!-- /content -->
<div data-role="panel" id="left-panel" data-position="left" data-position-fixed="true" data-display="overlay">
<ul data-role="listview">
<li data-icon="delete"><a href="#" data-rel="close">关闭</a></li>
<li data-icon="back"><a href="/Mobile/Index.aspx" data-rel="back">首页</a></li>
<li data-role="list-divider">卧室</li>
<li><a>床</a></li>
<li><a>床垫</a></li>
<li><a>衣柜</a></li>
<li data-role="list-divider">客厅</li>
<li><a>沙发</a></li>
<li><a>茶几</a></li>
<li><a>电视柜</a></li>
<li data-role="list-divider">更多</li>
<li data-role="collapsible" data-inset="false" data-iconpos="right">
<h3>餐厅</h3>
<ul data-role="listview">
<li><a>餐桌</a></li>
<li><a>餐椅</a></li>
<li><a>电视柜</a></li>
</ul>
</li>
<li data-role="collapsible" data-inset="false" data-iconpos="right">
<h3>办公家具</h3>
<ul data-role="listview">
<li><a>办公桌</a></li>
<li><a>办公柜</a></li>
<li><a>办公椅</a></li>
</ul>
</li>
<!-- /collapsible -->
</ul>
</div>
<!-- /panel -->
<div data-role="panel" data-position="right" data-position-fixed="true" data-display="overlay" data-theme="a" id="right-panel">
<form class="userform" id="login_form" >
<h2>用户登录</h2>
<label for="name">用户名:</label>
<input type="text" name="name" id="name" value="" data-clear-btn="true" data-mini="true" />
<label for="password">密码:</label>
<input type="password" name="password" id="password" value="" data-clear-btn="true" autocomplete="off" data-mini="true" />
<div class="ui-grid-a">
<div class="ui-block-a"><a href="#" id="logbt" class="ui-btn ui-shadow ui-corner-all ui-btn-b ui-mini">登录</a></div>
</div>
</form>
<ul data-role="listview" id="catlist">
<li data-icon="delete"><a href="#" data-rel="close">关闭</a></li>
<li id="dname" data-role="list-divider"><%=CurrentUserName() %></li>
<li><a data-ajax="false" href="../Account/Orders.aspx">我的订单</a></li>
<li><a data-ajax="false" href="../Account/Comments.aspx">我的评价</a></li>
<li><a data-ajax="false" href="../Account/Comments.aspx">我的收藏</a></li>
<li><a data-ajax="false" href="../Account/Orders.aspx">我的订单</a></li>
<!-- /collapsible -->
</ul> </div>
</div>
<!-- /panel -->
<uc2:footer ID="footer" runat="server" />
</div>
有overlay，reveal，push三种过渡动画选择。
8.popup 这个主要用来做提示框：
<div data-role="popup" id="info" ></div>
$("#info").popup("open");
//...
$("#info").popup("close");
<div data-role="popup" id="checkpop" data-theme="a" data-overlay-theme="b" class="ui-content" style="max-width: 340px; padding-bottom: 2em;">
<h3>确定删除</h3>
<p>你确定要移除<span id="targetname"></span>？</p>
<a href="#" id="delete" data-rel="back" class="ui-shadow ui-btn ui-corner-all ui-icon-check ui-btn-icon-left ui-btn-inline ui-mini">确定</a>
<a href="#" data-rel="back" class="ui-shadow ui-btn ui-corner-all ui-btn-inline ui-mini">取消</a>
</div>
二、自定义主题。
JM自带了两种主题， 推荐大家一个设置JM theme的网站 http://themeroller.jquerymobile.com，可以先导入样式文件再添加新的样式。
另外也可以只配置某些控件的样式，比较默认样式下很多都可以复用的。我这里就自定义了bar和button 的样式 g。
.ui-bar-g {
border: 1px solid #fff /*{a-bar-border}*/;
background-color: #E0177F /*{a-bar-background-color}*/;
color: #fff /*{a-bar-color}*/;
font-weight: normal;
line-height: 22px;
background-image: -webkit-gradient(linear, left top, left bottom, from( #f83b9c /*{a-bar-background-start}*/), to( #E0177F /*{a-bar-background-end}*/));
background-image: -webkit-linear-gradient( #f83b9c /*{a-bar-background-start}*/, #E0177F /*{a-bar-background-end}*/);
background-image: -moz-linear-gradient( #f83b9c /*{a-bar-background-start}*/, #E0177F /*{a-bar-background-end}*/);
background-image: -ms-linear-gradient( #f83b9c /*{a-bar-background-start}*/, #E0177F /*{a-bar-background-end}*/);
background-image: -o-linear-gradient( #f83b9c /*{a-bar-background-start}*/, #E0177F /*{a-bar-background-end}*/);
background-image: linear-gradient( #f83b9c /*{a-bar-background-start}*/, #E0177F /*{a-bar-background-end}*/);
}
.ui-bar-g h1{ color: white;font-size: larger!important}
.ui-body-g,.ui-btn,input, .ui-body-g input, .ui-body-g select, .ui-body-g textarea, .ui-body-g button, .ui-bar-g, .ui-bar-g input, .ui-bar-g select, .ui-bar-g textarea, .ui-bar-g button {
font-family:Microsoft JhengHei, "宋体",Helvetica, Arial, sans-serif /*{global-font-family}*/;
}
.ui-btn-g {
background-color: #E0177F /*{a-bar-background-color}*/;
font-weight: normal;color: white !important;text-shadow: none !important;
background-image: -webkit-gradient(linear, left top, left bottom, from( #f83b9c /*{a-bar-background-start}*/), to( #E0177F /*{a-bar-background-end}*/));
background-image: -webkit-linear-gradient( #f83b9c /*{a-bar-background-start}*/, #E0177F /*{a-bar-background-end}*/);
background-image: -moz-linear-gradient( #f83b9c /*{a-bar-background-start}*/, #E0177F /*{a-bar-background-end}*/);
background-image: -ms-linear-gradient( #f83b9c /*{a-bar-background-start}*/, #E0177F /*{a-bar-background-end}*/);
background-image: -o-linear-gradient( #f83b9c /*{a-bar-background-start}*/, #E0177F /*{a-bar-background-end}*/);
background-image: linear-gradient( #f83b9c /*{a-bar-background-start}*/, #E0177F /*{a-bar-background-end}*/);
}
.ui-btn-g:hover {
background-image: linear-gradient( #f83b9c /*{a-bar-background-start}*/, #cd1273 /*{a-bar-background-end}*/);
}
使用时，设置data-theme='g' 即可。
<input type="button" data-theme="g" data-icon="heart" id="attention" value="关注此人" />
三、Slider
适合移动端的slider，我使用的是swipeSlide.
<div class="slide" id="WSCSlideWrapper">
<ul>
<li>
<a href="#">
<img src="/Mobile/Images/s1.jpg" alt="" />
</a>
</li>
<li>
<a href="#">
<img src="/Mobile/Images/s2.jpg" alt="" />
</a>
</li>
<li>
<a href="#">
<img src="/Mobile/Images/s3.jpg" alt="" />
</a>
</li>
<li>
<a href="#">
<img src="/Upload/Slideshow_Upload/3.jpg" />
</a>
</li>
</ul>
<div class="dot">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
$(document).ready(function () {
$('#WSCSlideWrapper').swipeSlide({
continuousScroll: true,
speed: 4000,
transitionType: 'cubic-bezier(0.22, 0.69, 0.72, 0.88)',
callback: function (i) {
$('.dot').children().eq(i).addClass('cur').siblings().removeClass('cur');
}
});
});
小结：第一次做移动端项目，JM的这些组件确实节省了不少开发时间，另外就是不用去考虑ie的那些问题了；有些做法还是pc端的思路，继续优化；后面再尝试下别的框架；最后希望本文对你有帮助，另有不当之处欢迎指正。
移动解决方案大集合：https://github.com/stoneniqiu/mobileSolutions
Jquery Mobile 小结的更多相关文章
- Jquery mobile 新手问题总汇
1页面缩放显示问题 问题描述: 页面似乎被缩小了,屏幕太宽了. 解决办法: 在head标签内加入: <meta name="viewport" content="w ...
- [转载]Jquery mobile 新手问题总汇
原文链接:http://www.wglong.com/main/artical!details?id=4 此文章将会持续更新,主要收录一些新手比较常见的问题. 欢迎 向我推荐比较典型的常见问题,我会记 ...
- Jquery Mobile设计Android通讯录第二章
本文是jQuery Mobile设计Android通讯录系统教程的第二篇,在上一篇教程中(http://publish.itpub.net/a2011/0517/1191/000001191561.s ...
- 使用Jquery Mobile设计Android通讯录
本系列教程将指导大家一步步使用Jquery Mobile设计一个Android的通讯录应用.其中在应用的界面部分,将使用jQuery Mobile框架,并且会指导大家如何使Android中提供的web ...
- jQuery Mobile 1.1八大新特性介绍
随着HTML 5时代的来临,移动开发开始进入了一个新的时代,现在只需要懂得HTML5,配合一定的开发框架,就可以开发出十分漂亮的HTML5的移动应用.在众多的 移动HTML5开发框架中,比较著名的是j ...
- JQuery Mobile实现手机新闻浏览器（2）
在上一篇文章中,已经讨论了程序的结构和页面的布局,并简单介绍了一些jQuery Mobile的使用技巧.在本篇文章中,笔者将继续完成我们web应用的新闻浏览器的设计. 程序的启动 我们现在来研究一下程 ...
- 使用JQuery Mobile实现手机新闻浏览器
jQuery Mobile项目是jQuery项目下的在移动开发方面的又一力作,在本文中,笔者将带你一步步更深入学习使用jQuery Mobile框架去实现一个能在android手机上运行的新闻浏览器, ...
- jQuery Mobile入门
转:http://www.cnblogs.com/linjiqin/archive/2011/07/17/2108896.html 简介:jQuery Mobile框架可以轻松的帮助我们实现非常好看的 ...
- 解决Jquery mobile点击较长文本body的时候Header和footer会渐入渐出的问题
在做一个Phonegap+Jqm工程的时候,出现了如题的问题,相信很多人都遇到过Jquerymobile点击body时候header和footer会闪烁的显示和隐藏问题,fixed却并不能真 ...
随机推荐
- html table冻结列
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx. ...
- Java多线程开发技巧
很多开发者谈到Java多线程开发,仅仅停留在new Thread(...).start()或直接使用Executor框架这个层面,对于线程的管理和控制却不够深入,通过读<Java并发编程实践&g ...
- GIL与线程互斥锁
GIL 是解释器级别的锁,是限制只有一个原生线程运行,防止多个原生线程之间修改底层的共享数据.而线程互斥锁是防止多个线程同时修改python内存空间的共享数据.
- HTML5之语义标签
在HTML5标准中,新加了几个用于增添页面语义的标签,这些标签有:article.section.nav和aside等.与别的大多数标签不 同,浏览器在解释渲染这些标签的时候仅仅把它作为普通的div块 ...
- 不同包中继承关系访问protected内部类问题
有两个包pack1和pack2,pack1中是父类,pack2中子类继承自pack1中的父类.这里主要探索一下子类访问父类中protected内部类的问题: 第一个类: package pack1; ...
- asp.net运行时错误：没有为扩展名".cshtml"注册的提供程序。
解决方法: 一. 在machine.config或web.config中的<compilation><buildProviders>节注册一个.请确保所注册的提供程序具有包含 ...
- iOS开发中的各种错误
提交iTunesconnect遇到的问题: 1. error itms-90179 Invalid Code Signing. 解决:发现是发布正式被撤销了,重新生成发布Certificates,重新 ...
- ubuntu添加桌面或launcher快捷方式
以eclipse为例,自行下载的. 创建文件/usr/share/applications/eclipse-kepler.desktop 文件内容: #------------------------ ...
- psp工具需求分析
PSP个人软件过程开发工具需求分析文档 a.业务需求 a.1 背景 二十一世纪是软件开发的黄金时期,有人把过去的十年称作软件高度发展的十年,不可置疑,越来越多的软件设计需求是物联网时代的趋势,越 ...
- 关于js单页面实现跳转原理以及利用angularjs框架路由实现单页面跳转
还记得我们刚开始学习html时使用的锚节点实现跳转吗? <a href="#target">我想跳转至目标位置</a> <p>第一条</p ...