Tag Archives: jQueryMobile

Hello World

jqm如何刷新已经加载的页面

2012 年 05 月 22 日 – 下午 2:28

jquery mobile自带丰富的ui组件，更有codiqa提供了可视化的在线html生成工具，使用起来及其方便，很容易就可以搭建出漂亮的前端应用。

使用jqm的标准书写的组件，在其母“page”被加载时，jqm会将这些组件附加更加丰富的样式以及基础的事件处理程序，包括各种列表样式、icon、页面转场效果等等

但过度智能化也的使得使用中碰上了一个绕不开的问题，两周以来一直没找到好的解决办法：上面说，只有当一个page被加载时，jqm才会对html组件进行处理，附加样式和时间，而page一旦被加载过，再对这个page的内容进行修改，jqm就不会再对它做处理了，也用不了jqm的样式。

开始的时候，试了“$.mobile.initializePage()”，但是它只对第一个page的第一次加载有效，否则除非重新刷新页面页面。

然后又将希望寄托在“$.mobile.changePage(page, optional);”，但是只有当page是一个url地址时，被加载的页面才可会被jqm处理。

找遍了jqm中文和英文的api也再没有发现更好的办法

……….

今天，无意中，在一个叫做“移动互联网”的QQ群里看到了解决方法：“$(page).trigger(“pagecreate”);”~~~~有效！

pagecreate：jqm自定义的事件，页面初始化时，初始化之后触发

使用trigger(“pagecreate”)也就是强制jqm再对page做一次初始化

———————

Tags | Permalink | Comment (0)
Hello World

[转]手机前端之jquery Mobile学习——swipe

2012 年 02 月 23 日 – 下午 4:07

这是经常会在Android手机上出现的一个动作，那就是手指划过屏幕的时候执行动作。
手机上使用到的事件，可以使用live()和bind()来绑定。
swipe 在一秒钟的间隔内水平方向上拖动30px以上会触发该事件，(水平方向上拖动要保持在20px以内，否则不会触发).
swipeleft 在左边方向移动时触发该事件.
swiperight 在右边方向移动时触发该事件.
下面的代码以swipeleft为例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web 应用程序</title>
<link href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js" type="text/javascript"></script>
<script src="/phonegap.js" type="text/javascript"></script>
    <script>
    $(document).ready(function() {
        $("#home").live("swipeleft",function(){
            alert("我是滑动过来的!");          
        });
 
     });
    </script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header" data-theme="e" data-position="inline"><h1>swipeleft</h1></div>
<div data-role="content" style="text-align:center" >内容</div>
</body>
</html>

在Android模拟器上鼠标迅速向左滑动，则触发事件。

——转自：http://archive.cnblogs.com/a/2232011/
ps：不仅Android，ios也可以这么玩

Tags | Permalink | Comment (0)