0
点赞
收藏
分享

微信扫一扫

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");


举报

相关推荐

0 条评论