移动web开发学习一：jquery mobile 和 scrollview的整合

最新推荐文章于 2023-05-08 08:52:06 发布
最新推荐文章于 2023-05-08 08:52:06 发布
阅读量317 收藏
点赞数
文章标签： jquery mobile phonegap sencha js ViewUI
最近有一项目，需要分别开发安卓和IOS版本，原计划是招两个开发组，并行开发，但成本太高，而且时间上也来不及，就想试用用PHONEGAP打包WEB应用。

现在用的比较多的是jquery mobile和sencha，一个是jquery，一个是 ext，从难易度来说，jquery很容易上手，ext基本上全是JS，代码量很大。

本章主要讲解jquery mobile的应用，一个小DEMO，网站

界面如下：

http://www.8757.com/mobile/

[img]http://dl.iteye.com/upload/attachment/0061/9004/c57789fc-ce52-3240-8430-043cc8ea1465.jpg[/img]

代码上，其实就三个文件，一个html文件，两个JS文件，数据从云服务器上获取JSON，然后进行解析。

先来看一下index.html的代码 

<!DOCTYPE html>
<html manifest="cache.manifest">
	<head>
	<meta charset="utf-8">
	<title>佰奇网</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="shortcut icon" type="image/x-icon" href="http://www.8757.com/assets/images/favicon.png" />
	<link type="image/x-icon" rel="shortcut icon" href="http://www.8757.com/assets/images/favicon.png" />
	<link rel="stylesheet" href="assets/jquery.mobile-1.0.min.css" />
    <link rel="stylesheet" href="assets/jquery.mobile.scrollview.css" />
    <link rel="stylesheet" href="assets/css.css" />
	<script src="assets/jquery-1.6.4.min.js"></script>
	<script src="assets/jquery.mobile-1.0.min.js"></script>
	<script src="assets/jquery.mobile.scrollview.js"></script>
    <script src="assets/jquery.easing.1.3.js"></script>
    <script src="assets/scrollview.js"></script>
	<script type="text/javascript">	
		$(document).bind("mobileinit", function(){			
			$.mobile.defaultPageTransition = 'none'
			$.mobile.loadingMessage = '加载中...'
			$.mobile.page.prototype.options.backBtnText = '后退'
			$.mobile.page.prototype.options.addBackBtn= true
		});
	</script>
    <script src="/phonegap.js" type="text/javascript"></script>
	</head>
	<body>
	<div data-role="page" id="index" class="type-interior" >
		<div data-role="header" data-theme="b" data-nobackbtn="true" data-position="fixed"> 
        	<a href="login.html" data-rel="dialog">登录</a>
    		<h1>佰奇网</h1>
			<a href="reg.html" data-rel="dialog">注册</a> 

		</div>

        <div data-role="content" data-inset="true" class="ui-scrolllistview" id="scroller" style="padding:0px; ">            
            <select name="type" id="select_type" data-native-menu="false">
                <option value="1" selected>推荐宝贝</option>
                <option value="2">人气宝贝</option>
                <option value="3">最新加入</option>
            </select>           

            <ul data-role="listview" style="margin:0px;">               
            </ul>       
            <div style="text-align:center" id="div_loading">
            	<img src="assets/images/ajax-loader.png"/>
            </div>      
            <div id="getMore">更多...</div>
            <!--<a href='#' id='listmore' data-role='button'>更多...</a>               	-->
        </div>

        <div data-role="footer" id="footer" data-position="fixed">
            <div data-role="navbar" data-theme="a" >
                <ul>
                    <li><a href="#" data-icon="home"  class="ui-btn-active" data-iconpos="top" data-theme="b">宝贝导航</a></li>
                    <li><a href="siteNav.html" data-icon="search" data-iconpos="top" data-theme="b">站点导航</a></li>
                    <li><a href="#"  data-icon="grid" data-iconpos="top" data-theme="b">音频导航</a></li>
                    <li><a href="#"  data-icon="star" data-iconpos="top" data-theme="b">宝贝收藏</a></li>
                    <li><a href="#"  data-icon="info" data-iconpos="top" data-theme="b">我的资料</a></li>
                </ul>
            </div>
        </div>
	</div>

    <script type="text/javascript" src="js/8757.core.js"></script>
	<script type="text/javascript" src="js/8757.app.js"></script>
</body>
</html>



稍为讲解一下： 

<!DOCTYPE html>
<html manifest="cache.manifest">

其中cache.manifest表明页面将缓存，缓存配置在cache.manifest文件里，有兴趣的同学可下载附近自行研究。
接下来就是JS文件和样式文件的引用了，估计都能看的懂 

<script type="text/javascript">	
		$(document).bind("mobileinit", function(){			
			$.mobile.defaultPageTransition = 'none'
			$.mobile.loadingMessage = '加载中...'
			$.mobile.page.prototype.options.backBtnText = '后退'
			$.mobile.page.prototype.options.addBackBtn= true
		});
	</script>


这是jquery mobile的配置，关于这方面的资料，大家看这里，会更清楚了
http://www.jqmapi.com/

接着就是jqm的page，page里分别是head,content,foot，先来看head 

		<div data-role="header" data-theme="b" data-nobackbtn="true" data-position="fixed"> 
        	<a href="login.html" data-rel="dialog">登录</a>
    		<h1>佰奇网</h1>
			<a href="reg.html" data-rel="dialog">注册</a> 

		</div>


一个标题，加两个按钮，这个按钮链接的方式是窗口弹出式。
接着content 

        <div data-role="content" data-inset="true" class="ui-scrolllistview" id="scroller" style="padding:0px; ">            
            <select name="type" id="select_type" data-native-menu="false">
                <option value="1" selected>推荐宝贝</option>
                <option value="2">人气宝贝</option>
                <option value="3">最新加入</option>
            </select>           

            <ul data-role="listview" style="margin:0px;">               
            </ul>       
            <div style="text-align:center" id="div_loading">
            	<img src="assets/images/ajax-loader.png"/>
            </div>      
            <div id="getMore">更多...</div>
        </div>

content里有三个部分，一个是select，后面讲js时会讲到他的作用，接着是listview，这里用scrollview，有很多同学问怎么使用scrollview,其实很简单，在头文件里引用这些文件即可 

    <link rel="stylesheet" href="assets/jquery.mobile.scrollview.css" />
    <script src="assets/jquery.mobile.scrollview.js"></script>
    <script src="assets/jquery.easing.1.3.js"></script>
    <script src="assets/scrollview.js"></script>

这样，就可以固定底部，然后用手拖放可以滚动中间的listview，类似于微博效果了。
接下来是foot 

        <div data-role="footer" id="footer" data-position="fixed">
            <div data-role="navbar" data-theme="a" >
                <ul>
                    <li><a href="#" data-icon="home"  class="ui-btn-active" data-iconpos="top" data-theme="b">宝贝导航</a></li>
                    <li><a href="siteNav.html" data-icon="search" data-iconpos="top" data-theme="b">站点导航</a></li>
                    <li><a href="#"  data-icon="grid" data-iconpos="top" data-theme="b">音频导航</a></li>
                    <li><a href="#"  data-icon="star" data-iconpos="top" data-theme="b">宝贝收藏</a></li>
                    <li><a href="#"  data-icon="info" data-iconpos="top" data-theme="b">我的资料</a></li>
                </ul>
            </div>
        </div>

底部代码也很明白，navbar表明这是个菜单，需要说明的是，navbar一行最多只能显示5个，5个后，jqm 会自动进行换行。
最后来看一下，数据渲染这块，也就是两个js文件 

         <script type="text/javascript" src="js/8757.core.js"></script>
	<script type="text/javascript" src="js/8757.app.js"></script>

其中8757.core.js代码如下 

// 全局命名空间
var convage_mobile = {
	author : 'Convage Inc.',
	version: '1.0',
	website: 'http://www.8757.com'
}
// 工具包
convage_mobile.utils = {
	setParam : function (name,value){
		localStorage.setItem(name,value)
	},
	getParam : function(name){
		return localStorage.getItem(name)
	},
	uuUrlGen: function (url){
		var uuUrl;
		var xcharset = document.all?"GBK":"UTF-8";
		if (url.indexOf("?") >= 0){
			uuUrl = url + "&xcharset=" + xcharset + "&ran=" + Math.random();
		}else{
			uuUrl = url + "?xcharset=" + xcharset + "&ran=" + Math.random();
		}
		return uuUrl;
	} 
}
// 业务控制中心，需应用实现
convage_mobile.controllers = {}
// 事件注册
convage_mobile.run = function(pages){
	var pages = pages,
	count = pages.length;
	for(var i=0;i<count;i++){
		var page = pages[i],
			id = page.id
			e_array = page.event.split(',')
		for(var j=0; j <e_array.length;j++){
			var e = e_array[j]
			if($.trim(e).length == 0)
				continue
			$('#'+id).live(e, convage_mobile.controllers[id][e])
		}
	}
}

这里不是业务代码，基本上就是定义了一些函数。
8757.app.js 

// 本地化命名空间
var utils = convage_mobile.utils,
	controllers = convage_mobile.controllers,
	website = convage_mobile.website,
	cpage = 1
// 模板

function tplMmInfo(array, items){
	for(var i in items){
		var item = items[i]
		var	memo = ' 人气: ' + item.allVisiteCount + '    城市： ' + item.nowCity + '    星座:  ' + item.constellation 
		var	li = '<li  data-icon="false"><a href="#discussion" data-id="'+ item.userId +'"><img src="'+ website + item.headPic +'"/><h3>' + item.nick + '</h3><p>'+ memo +'</p></a></li>'
		array.push(li)
	}
}

var refreshList = function(clear_flag){
	var $listview = $('#index').find('ul[data-role="listview"]')
	$('#div_loading').css('display', 'block')
	if(clear_flag){
		$listview.html('')	
	}
	$.getJSON(
			utils.uuUrlGen(website + '/mclient/m!mmList.jhtml?callback=?'),
			{
				cpage: cpage,
				type: $('#select_type').val()
			},
			function(data) {
				var json = data[0]					
				var li_array = []
				tplMmInfo(li_array, json.result)				
				if(clear_flag){
					$listview.html(li_array.join(''))	
				}else{
					$listview.append(li_array.join(''))				
				}
				$listview.listview('refresh')	

				cpage ++

				$('#div_loading').css('display', 'none')
			}
	  );


}

controllers.index = {
	pagecreate : function(event){
		refreshList();
		$("#getMore").bind( "click", function(event, ui) {
			refreshList(false);
		}); 
		$("#select_type").bind( "change", function(event, ui) {
			cpage = 1;
			refreshList(true);
		});
	}
}

var pages = [
	{id: 'index', event:'pagecreate'}
]
convage_mobile.run(pages)

看代码，一般都是倒退，前面的var定义暂且忽略，最后一行 

convage_mobile.run(pages)

是调用了core.js的run方法，然后回到这个文件研究一下这个方法，发现就是从pages里面一个个去注册事件，因为只是个DEMO，就写了index这个页面的渲染过程，发现他的event是pagecreate,就是当页面进入之时，要执行的方法，更多说明见：
http://www.jqmapi.com/api/events.html
注册的是这个事件 

controllers.index = {
	pagecreate : function(event){
		refreshList(true);
		$("#getMore").bind( "click", function(event, ui) {
			refreshList(false);
		}); 
		$("#select_type").bind( "change", function(event, ui) {
			cpage = 1;
			refreshList(true);
		});
	}
}

第一步是刷新列表refreshList();然后又定义了两个事件监听，第一个是点“更多”时再刷新一次，第二个是选择select时刷新列表，分别对应content 里的三个部分。refreshList带了一个参数，我们来看一下代码 

var refreshList = function(clear_flag){
	var $listview = $('#index').find('ul[data-role="listview"]')
	$('#div_loading').css('display', 'block')
	if(clear_flag){
		$listview.html('')	
	}
	$.getJSON(
			utils.uuUrlGen(website + '/mclient/m!mmList.jhtml?callback=?'),
			{
				cpage: cpage,
				type: $('#select_type').val()
			},
			function(data) {
				var json = data[0]					
				var li_array = []
				tplMmInfo(li_array, json.result)				
				if(clear_flag){
					$listview.html(li_array.join(''))	
				}else{
					$listview.append(li_array.join(''))				
				}
				$listview.listview('refresh')	

				cpage ++

				$('#div_loading').css('display', 'none')
			}
	  );


}

参数clear_flag发现是有两个用途，如果为true,listview清空，然后在getJson后，判断，如果为tue，则直接html，意思是替换listview代码，如果是false，则插入从云服务器上获取的数据，在业务上即分别对应了两个按钮，需要清空的是选择select，需要添加的是"更多..." 

if(clear_flag){
					$listview.html(li_array.join(''))	
				}else{
					$listview.append(li_array.join(''))				
				}


剩下的JS代码就是解析 JSON了，多说无益了。我上传了附件，附件里包含了源代码，及已经打包好的APK，大家可自行研究。
另外要研究打包的，可看下面文章
http://www.html5mobi.com/discussion/167/phonegap-web-android

最后评价一下jqm吧，入门容易，但如果要开发的是app应用，真不行，速度是真慢，所以准备放弃jqm，转去研究sencha，过两天写一篇吧
iteye_18696
关注
JQ实现scroll-view效果，item居中滚动（菜单滚动栏）
tutouXiaoGe的博客
08-17 454
效果演示：http://demo.juzhuzhu.top/scrollbar/index.html 实例写的是menu，可以根据业务需求更改 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpor
推荐项目：jQuery.scrollIntoView
最新发布
gitblog_00018的博客
03-14 418
推荐项目：jQuery.scrollIntoView jQuery.scrollIntoView 是一个轻量级的 jQuery 插件，用于帮助开发者实现元素滚动到视口的功能。 功能介绍 jQuery.scrollIntoView 提供了简单易用的方法，使得开发者可以轻松地让某个 DOM 元素滚动到浏览器的视口中。这对于页面中的滚动导航、焦点突出等场景非常有用。 使用方法 安装 你可以通过 npm...
datagrid-scrollview.js源码
weinichendian的博客
10-14 2476
$.extend($.fn.datagrid.defaults, { rowHeight: 25, maxDivHeight: 10000000, maxVisibleHeight: 15000000, deltaTopHeight: 0, onBeforeFetch: function(page){}, onFetch: function(page, rows){}, loader
jQuery EasyUI 数据网格 - 使用虚拟滚动视图显示海量数据
unber的博客
05-08 403
当滚动垂直滚动条时，数据网格（datagrid）执行 ajax 请求来加载和刷新现有的记录。在本教程中，我们将创建一个数据网格（datagrid），并运用虚拟滚动特性从服务器加载数据。为数据网格（datagrid）运用虚拟滚动特性，'view' 属性应该设置为 'scrollview'。请注意，这里我们不需要使用 pagination 属性，但 pageSize 属性是必需的，这样执行 ajax 请求时，数据网格（datagrid）将从服务器获取指定数量的记录。创建数据网格（DataGrid）
微信小程序学习demo：视图控件View、ScrollView、Swiper(源代码+截图)
06-19
微信小程序学习demo：视图控件View、ScrollView、Swiper(源代码+截图)微信小程序学习demo：视图控件View、ScrollView、Swiper(源代码+截图)微信小程序学习demo：视图控件View、ScrollView、Swiper(源代码+截图)微信...
InsertandoImagenesScrollViewsPortraitLandscape:插入 ImageView、ScrollView。 纵向和横向视图
07-05
在Android开发中，"InsertandoImagenesScrollViewsPortraitLandscape"是一个项目，专注于展示如何在应用中使用ImageView和ScrollView组件，以适应设备的不同方向——纵向（Portrait）和横向（Landscape）。...
微信小程序学习demo：视图控件View、ScrollView、Swiper
03-15
点评：本文辅助教程：...    免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。
RecyclerViewScrollView:解决RecyclerView与ScrollView滑动冲突
05-19
在Android开发中，RecyclerView和ScrollView是两种常用的布局组件。RecyclerView以其高效的列表滚动性能和灵活的适配器机制，成为处理大数据列表的首选。而ScrollView则适用于需要全屏滚动的场景。然而，当两者同时...
【免费分享】下拉刷新+上拉加载=JqueryMobile1.4.3+iScroll4
03-05
1、下拉刷新，上拉加载。 2、基于JqueryMobile1.4.3+iScroll4。 3、适用于开发WebApp和手机网站
jquery mobile scroll
04-20
jquery mobile scroll 超炫的下拉框，仿苹果，兼容各终端（pc,iphone,ipad等）
第七讲.（下）Jquery.Mobile插件.scroll.js.下拉更新插件
12-30
第七讲.（下）Jquery.Mobile插件.scroll.js.下拉更新插件
jq编写一个h5的swiper
weixin_44087494的博客
04-28 346
jq编写一个h5的swiperjq编写的H5 Swiper 类似于superslider的效果html部分js部分以上就能完成基本的h5 swiper的效果了 jq编写的H5 Swiper 类似于superslider的效果 html部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" c
Android ScrollView与ViewPager滑动上下左右冲突
06-23 664
重写ScrollView public class CustomScrollView extends ScrollView { private GestureDetector mGestureDetector; View.OnTouchListener mGestureL...
jquery Easyui 大数据的处理-利用scrollview进行数据展示。
junbaoba的博客
09-24 1315
需求：当初不想用分页查询数据，然后就找有那些可以代替传统的Pagination分页的方法，然后发现了scrollview这个控件方法，发现挺好用的就分享一下，我的案例。 首先我们在html页面引入jQueryeasyui的类库和datagrid-scrollview.js。 <script type="text/javascript" src="https://www.jeas...
JQuery Mobile+ iscroll 列表滚动条的实现
热门推荐
笨笨个人笔记
04-09 1万+
在开发的过程中，发现如果ul或者ol列表内容过多，高度大于外层div的高度的时候，JQuery Mobile会自动给加上滚动效果。但我在使用JQuery Mobile Panels的时候发现，在内容区域(content区域)加上ul或ol后，当列表数据多则滚动的时候，Header与Footer可以固定，但Revel Panel会随之滚动。         设想：content区域的列表无论是滚动
jquery滚动条平滑滚动_使用jQuery插件viewScroller.js进行平滑的整页滚动
cune1359的博客
07-01 274
JavaScript滚动效果已经存在很多年了，这里有很多很棒的库可供选择。 但是，该领域的新竞争者是viewScroller.js 。 这个非常小巧但功能强大的库可以构建单页布局 ，只需滚动一下滚轮（或触摸板）即可将其滚动为块 。 这将创建一个受控的布局，在该布局中，滚动会以像素级精度将用户移动到页面的各个部分。 另请阅读： 具有酷滚动效果JavaScript库 自然，这是一个完全...
[JS][easyui]jQuery EasyUI Datagrid VirtualScrollView视图简单分析
王德封-逐浪
07-20 8566
大家都知道EasyUI的Datagrid组件在加载大数据量时的优势并不是很明显，相对于其他一些框架，如果数据量达到几千，便会比较慢，特别是在IE下面。针对这种情况，我们首要做的是要相办法优化datagrid组件的各方面性能，不过任何事情都是可以变通解决的，virtualScrollView就是一种不错的解决方案。 virtualScrollView的准则就是尽量少画tr到table里，表
jquery mobile + iscroll + iscrollview 开发滚动翻页功能
Freeplay的专栏
04-29 1万+
https://github.com/watusi/jquery-mobile-iscrollview
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值