jquery mobile的一些使用记录。

[color=red][b]自定义按钮图标去除按钮阴影/圆角[/b][/color]
[url]http://bbs.phonegap100.com/thread-218-1-1.html[/url]

[color=red][b]jQuery Mobile 自定义按钮图标[/b][/color]
Jquery Mobile 自定义按钮图标 [url]http://liningjustsoso.iteye.com/blog/1986769[/url]

[color=red][b]phonegap 3.5 使用自带浏览器打开链接 [/b][/color]
安装org.apache.cordova.inappbrowser插件后使用

window.open( ad_path, '_blank', 'location=yes');

[url]http://www.qdkf.net/18.html[/url]

[color=red][b]cordova使用JQM的pageinit事件[/b][/color]

app.initialize();
---->
initialize: function () {
        this.bindEvents();
    }
----->
bindEvents: function () {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
----->
onDeviceReady: function () {
        app.receivedEvent('deviceready');
    }
----->
receivedEvent: function (id) {
        $(document).bind("pageinit", function(){
            app.alert($("div[data-role=footer]").length);
        });
    }

jQuery Mobile 的[color=red][b]延迟加载[/b][/color]控件 - jQuery.mobile.lazyloader

[url]http://www.open-open.com/lib/view/open1337905968996.html[/url]

[color=red][b]默认选中导航[/b][/color]

class="ui-btn-active ui-state-persist"，在导航加上这个样式

[color=red][b]changePage() 页面跳转[/b][/color]

[url]http://www.lampweb.org/jquerymobile/5/11.html[/url]

[url]http://blessht.iteye.com/blog/2038914[/url]

[color=red][b]jquery mobile 在代码如何打开一个对话框？ [/b][/color]

页面隐藏一个:

<a href="#Msg" id="ShowMsg'" data-rel="dialog" data-transition="flip"></a>

要打开的时候，就动态 $('#ShowMsg')click();

[color=red][b]关闭对话框 Closing dialogs[/b][/color]

A: 对话框内的任何链接被点击时，Jquery Mobile会自动关闭对话框，用回退效果转场到指向该对话框的页面。要在对话框内创建一个取消"按钮，只需要把该链接的herf指向打开该对话框的按钮然后给链接加上data-rel="back"属性。这样制作的后退链接在不支持js的设备上也同样管用。

B: $( "#dialog_login_link" ).dialog( "close" );

[color=red][b]使用 jQuery Mobile 与 HTML5 开发 Web App —— HTML5 Web Storage [/b][/color][url]http://kayosite.com/web-app-by-jquery-mobile-and-html5-web-storage.html[/url]

[color=red][b]JQueryMobile页面跳转参数的传递解决方案 [/b][/color][url]http://topmanopensource.iteye.com/blog/1532476[/url]

下载Latest stable版本，把images和css文件放到同一路径。

引入：

[color=darkblue]<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.min.css"/>

<link rel="stylesheet" type="text/css" href="css/jquery.mobile.theme-1.4.5.min.css"/>

<link rel="stylesheet" type="text/css" href="css/jquery.mobile.icons-1.4.5.min.css"/>

<link rel="stylesheet" type="text/css" href="css/jquery.mobile.structure-1.4.5.min.css"/>

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>[/color]

[color=red][b]JQuery Mobile 手机显示页面偏小[/b] [/color][url]

在页面head中少了一句话

[color=darkblue]<meta name="viewport" content="width=device-width, initial-scale=1" />[/color]

例子里面是

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, initial-scale=1, height=device-height, target-densitydpi=device-dpi"/>，这个[color=red]target-densitydpi=device-dpi[/color]会影响的。 这个属性参考：[urlicle/details/9414599[/url]

[color=red][b]jquerymobile header导航和footer底部固定[/b][/color], [ur ,增加data-position="fixed" data-tap-toggle="false"即可。

[color=red][b]动态添加控件[/b][/color]，jQuery Mobile 动态 添加按钮

有些对象提供了refresh 方法，如listview、flip toggle。[color=red]与create的区别是refresh方法需要作用在已存在的对象上[/color]，如 $('ul').listview('refresh')，而且refresh只会去更新新加入的元素，如listview里最新append的元素会更新，原有的保持不变。

[b]1. create方法：[/b]

如果要使动态插入的元素具有jqm的样式，可以对jqm对象触发create事件

$(selector).trigger('create');

或者

$('<a data-role="button">dy button</a>').appendTo('#content').trigger('create');

[b]2. refresh方法[/b]

添加一个<input type='button' value='OK' id="btn_OK"/>然后调用jquery mobile 方法:$('#btn_OK').button();

jquery 表单元素每一个元素都有自己刷新的方法，每当改变它们的属性以后，都要执行这些方法，以下是实例：

复选按钮

$("input[type='checkbox']").attr("checked",true).checkboxradio("refresh");

单选按钮组:

$("input[type='radio']").attr("checked",true).checkboxradio("refresh");

选择列表::

var myselect = $("select#foo");

myselect[0].selectedIndex = 3;

myselect.selectmenu("refresh");

滑动条

$("input[type=range]").val(60).slider("refresh");

开关 (they use slider):

var myswitch = $("select#bar");

myswitch[0].selectedIndex = 1;

myswitch .slider("refresh");