Mobile页面重回没有必要再一次get,Mobile页面再次

时间:2019-07-11 04:19来源:亚洲城ca88唯一官方网站
竭泽而渔难点 方今供销社的web app项目,使得自个儿幸运一直接触和读书jQueryMobile。那真的是一个很不错的位移开采库,有利于长于web开垦的程序猿,火速入门并营造筑组织调的移动应

竭泽而渔难点

方今供销社的web app项目,使得自个儿幸运一直接触和读书jQuery Mobile。那真的是一个很不错的位移开采库,有利于长于web开垦的程序猿,火速入门并营造筑组织调的移动应用。但是在前两日,笔者遇到了一个难题,使自身查 了重重资料都不曾找到很好的消除方案,最终只好逼着作者读jQuery Mobile的源码,再写了个扩张,技能够消除。下面请让自家不仅仅道来。

jQuery Mobile笔记,jquerymobile笔记

1.赢得jQuery mobile 文件,访问jQuerymobile网址下载 (貌似使用jquery mobile后,jquery会自动在网页中增添一些class类,第三遍知道的自身是被吓呆的!!) 2.内需采纳数据属性,数据属性是HTML5引进的,以data-开始比方data-role能够用于定义页眉,页脚,内容,页面等

  • data-role="page" 是在浏览器中体现的页面。
  • data-role="header" 是在页面顶部创设的工具条 (常常用于标题只怕搜索开关)
  • data-role="main" 定义了页面包车型客车剧情,譬喻文本, 图片,表单,按键等。
  • "ui-content" 类用于在页面增添内边距和异地距。
  • data-role="footer" 用于创制页面尾部工具条。

3.当jquery mobile中定义多个页面,:page时,在运动端会默认只现出三个页面 4.当蒙受连续时,要是是同三个页面包车型大巴其余内容,或然是同个服务器上的另外剧情,会使用ajax加载页面 而当遇到外部网址,会推行不荒谬的总是操作 就算要禁止使用jquery mobile 的操作,则用多少属性:data-ajax=“false” 5.jquery页面设置 页面标题:在页面标签中用data-title设置,也能够在header标签中装置 预取内容 在一个站点中,有多少个网页是平时被用户加载的,为了坚实加载速度,能够让浏览器后台在主页面加载时事先读取。具体设置为在相应连接中增添data-prefetch=“true” 修改页面包车型地铁超负荷形式data-transition:poo(弹出窗口),fade,flip,flow,slide(从右到左滑动),slidedown(从上到下滑动),slidefade,turn,none 6.页眉增添按键 在header页面中加上按键,增多a连接 只在页眉侧面加多三个开关:class=“ui-btn-right” 能够在按键中增加图标 data-icon 7.增添再次来到按键 增添data-add-back-btn="true" 设置a连接为空,并安装data-rel=“back” 在页脚中加上开关,他不会在开关四周保持空间,需加上“ui-bar类型   8.原则性页眉和页脚 在页眉页脚中加多data-position=“fixed” 全屏的页眉页脚:data-fullscreen="true" 9.制造导航栏 在div标签中增多data-role=“navbar”,然后创造冬日列表 在激活的开关加上“uibtn-active”的档期的顺序标签 一行最三只可以增加七个开关,过多按键会被拆分 10.多页面长久页脚 全数页面使用的data-id同样 供给增多“ui-btn-active,ui-state-persist” class标签 图片 1 11.列表作用 严节列表中ul增添data-role=“listview” 在li中增添a连接后,列表中会增添箭头icon 内嵌列表:ul中增添data-inset=“true” 列表分隔符:li中增添data-role=“listdriver”或ul中加data-autodrivers=“true”   12.在列表中增多缩略图或Logo在li中增多img,或在拉长“ui-li-icon”的class类型,Logo要钦点地点,不然Logo不显得: ui-btn-icon-top/bottom/left 拆分行的列表,在ul中增加data-spliticon=“delete” 13.列表的寻觅过滤 在ul中增添data-filter=“true” 暗中同意不去分大小写,通过ajax方式检索 14.利用tel和mailto自动调用手提式有线电话机的拨号和电子邮件作用  15.表单的交给功用在jquery-lmobie中都以由此ajax提交的 表单组件会活动优化 表单提交的div中增加data-role="田野同志contain"   16.摘取菜单 如需掩盖标签,请使用 class ui-hidden-accessible。那在你把成分的 placeholder 属性作为标签时平日用到 我们得以选用 data-clear-btn="true" 属性来增多扫除输入框内容的开关 (几个在输入框侧面的 X Logo) jQuery Mobile 通过 AJAX 自动管理表单提交,并将图谋集成服务器响应到应用程序的 DOM 中。

  • <form> 成分必须有八个 method 和一个 action 属性
  • 各类表单成分必须有叁个独一的 "id" 属性。id 必须是整个站点持有页面上唯一的。那是因为 jQuery Mobile 的单页导航机制使得五个不等页面在同期被表现
  • 每一个表单元素必须有八个标签。安装标签的 for 属性来相配成分的 id

应用效果与使用平台有关 17.找寻零件与滑块组件   开关组件 <form method="post" action="demoform.php">   <label for="switch">切换按键:</label>     <input type="checkbox" data-role="flipswitch" name="switch" id="switch" data-on-text="True" data-off-text="False"  checked>(暗中认可选中) </form>   滑块组件,类型改为range   18.禁用原生表单控件 data-role="none" Mini组件:data-mini="true"   19.创立模态对话框(以下二种艺术都能够) a链接中增添data-rel="dialog" page中增添data-dialog="true"   20.选拔网格实行内容布局 在div标签中增加class=“ui-grid-a”,(a表示两列网格,b表示三列网格,就那样推算) 在div标签中再加多class=“ui-block-a”(从a到d)   21.让html元件响应式的只好适应分裂尺寸 在存活网格中增多class=“ui-reponsive” 折叠框:data-role=“collapsible”(早先情形下开始展览:再增加data-collapsible=“false”) 可将减少icon挪到右臂:data-iconpos=“right” 可折叠集合: data-role=“collapsible-set”   22.弹出式窗口 首先写多少个区块:data-role=“popup” 然后写二个a链接作为按键(以运营事件): <a href="#f" data-role="button" data-rel="popup" data-position-to="window">sss</a>   23.表格(响应式:列回流和列切换) 在table标签中增添data-role=“table” class="ui-responsive table-stroke"(分别是响应式和出现表格边框) (增多响应式后,原先横版的报表,会在分辨率改换时形成竖版的)   能够依靠用户要求过滤性的显得数据 增添data-mode="columntoggle" 然后在thead中给列标题加多权重:data-priority="1~10" 对开关文本改动:data-column-btn-text=“??”   24.增多面板 增加data-role=“panel”,何况必须在content外增加data-position=“left/right”能够安装面板的自由化 通过安装data-display属性来校对显示格局:reveal、push、overveal   25.创建开关

  • 使用 <button> 元素
  • 使用 <input> 元素
  • 选用含有 data-role="button" 的 <a> 成分

组成开关(水平/竖直): data-role="controlgroup" 和 data-type="horizontal|vertical" 后退开关: <a href="#" data-role="button" data-rel="back">重临</a>   26.juqery mobile定义了各个主旨,也足以自定义   27.jquery mobile事件    jQuery on() 方法用于绑定事件到当选的因素上。   <script>
$(document).on("pagecreate","#pageone",function(){

   // jQuery 事件...

}); </script>   旋转事件: window.orientation 属性针对纵向视图再次来到0,针对横向视图重返 90 或 -90。 页面加载: jquery应用一般都以用$(document).ready来开始展览开端化,不过jquery mobile那或多或少却多少好用,因为jquery mobile使用ajax加载页面, $(document).ready只对第1个页面有效 因而须要运用pagecreate事件              

Mobile笔记,jquerymobile笔记 1.获得jQuery mobile 文件,访问jQuerymobile网址下载(貌似使用jquery mobile后,jquery会自动在网页中增加一些class类...

(function($, undefined) {
$.fn.subpage = function(options) {
$(document).bind(
"pagebeforeshow",
function() {
var forword = $.mobile.urlHistory.getNext();
if (forword) {
var dataUrl = forword.url;
var forwordPage=$.mobile.pageContainer
.children(":jqmData(url='"   dataUrl   "')");
if(forwordPage){
forwordPage.remove();
}
}
$.mobile.urlHistory.clearForward();
});
};
$(document).bind("pagecreate create", function(e) {
$(":jqmData(role='page')", e.target).subpage();
});
})(jQuery); 

总结

在动用该插件时,请小心以下几点:

1、必须在引用该脚本从前,引用jquery和jquery mobile脚本文件;

2、必须在page上增加data-dom-cache="true"。

在运用该插件时,请小心以下几点:

化解难点

经过一番追寻,在jQuery Mobile官方网址看到一段《Caching pages in the DOM》的描述:

Caching pages in the DOM

To keep all previously-visited pages in the DOM, set the domCache option on the page plugin to true, like this:

$.mobile.page.prototype.options.domCache = true;

Alternatively, to cache just a particular page, you can add the data-dom-cache="true" attribute to the page's container:

<div data-role="page" id="cacheMe" data-dom-cache="true">

You can also cache a page programmatically like this:

pageContainerElement.page({ domCache: true });

The drawback of DOM caching is that the DOM can get very large, resulting in slowdowns and memory issues on some devices. If you enable DOM caching, take care to manage the DOM yourself and test thoroughly on a range of devices.

从这段引文中应有能够看到,那二种方法都可以缓存页面到dom中,于是笔者就应用了第三种艺术,即在page的div上平添了data-dom-cache=”true”属性,不过却出现了以下四个难题:

1、 如下图所示,当本人的拜访路线是main->test1->test2->test1(test2是history.back()再次来到的)时,用firebug能够看出,test2如故存在于dom中,那样的结果就疑似革命部分陈诉的:DOM会变得比比较大,结果会使页面变慢和局地配备上的内部存款和储蓄器不当。

图片 2

2、 当本身存在这样贰个页面,它经过差别的参数字呈现示差异的内容,並且页面上,有一段js脚本,会对页面上的要素做些管理,而大家常用的办法正是用id来赢得目的成分,由于我们是用了cache缓存page,就能够导致js事件恐怕操作混乱。比如在那边笔者扩充了三个test1_1页面,它的内容差十分的少和test1同样,他们皆有一致id的div和一模二样事件管理的button,这几个事件做的作业即是往这么些div中追加内容,当访谈路线为 main->test1->test1_1,在test1_1上点击开关,会发觉类似平素不接触这一个事件,其实它曾经触发了,只是内容充实到 test第11中学的div中了,分别入下图

图片 3

图片 4

进而对于当下多数选用,这几个方案是不可取的,除非本身管理dom中页面包车型地铁生命周期。

图片 5

原因深入分析

本人首先用firebug看了刹那间html的协会,开采jQuery Mobile会把main和test1参加到页面结构中去,当从test1转向到test2后,test1会被自动删除,那样dom树中,只含有了 main和test2,所以在test2重返test1就能在出殡和埋葬贰个get乞请。那么是还是不是意味着,只要能把历史页面缓存到dom中(仿佛main和 test1同样),就能够减轻那几个主题素材。

进而对于当前好多利用,这么些方案是不可取的,除非本身管理dom中页面包车型客车生命周期。

优化方案

通 过地点的实验,笔者也清楚了亟需满意自个儿的必要,就只可以本身管理dom中页面包车型客车生命周期了。那么就提到到一个标题:页面怎么时候过期(即从dom中剔除)呢? 依据自己的供给,当从test2重回到test1时,就应有从dom中除去test2,同理从test1重临main时,从dom中删去test1。假设再次从main导航到test1,就得发起叁个get恳求,作者感觉那是理所必然的,因为用户不会认为点击链接到新页面还亟需缓存。所以作者应该在页面显示前或然展现后,删除它以后的history,于是作者就在pagebeforeshow、pageshow的时候做了删除操作,即如下脚本(插件方式):

(function($, undefined) {
    $.fn.subpage = function(options) {
        $(document).bind(
            "pagebeforeshow",
            function() {
                var forword = $.mobile.urlHistory.getNext();
                if (forword) {
                    var dataUrl = forword.url;
                    var forwordPage=$.mobile.pageContainer
                            .children(":jqmData(url='"   dataUrl   "')");
                    if(forwordPage){
                        forwordPage.remove();
                    }
                }
                $.mobile.urlHistory.clearForward();
            });
    };
    $(document).bind("pagecreate create", function(e) {
        $(":jqmData(role='page')", e.target).subpage();
    });
})(jQuery);

结果救经引足,在页面重返时,出现了js脚本错误,如下图:

图片 6

那么是什么样来头吗?不在那么些事件里做拍卖,那在何地管理啊?于是本身细心研读了一晃jQuery Mobile源码,开掘了上边一段:

transitionPages( toPage, fromPage, settings.transition, settings.reverse )
    .done(function() {
        removeActiveLinkClass();

        //if there's a duplicateCachedPage, remove it from the DOM now that it's hidden
        if ( settings.duplicateCachedPage ) {
            settings.duplicateCachedPage.remove();
        }

        //remove initial build class (only present on first pageshow)
        $html.removeClass( "ui-mobile-rendering" );

        releasePageTransitionLock();

        // Let listeners know we're all done changing the current page.
        mpc.trigger( "pagechange", triggerData );
    });

页面在切换完后,会触发pagechange事件,于是自身把pagebeforeshow改成了pagechange,一切都按预期运营,何况没错误,终于顺理成章了。

1、如下图所示,当笔者的拜访路径是main->test1->test2->test1(test2是history.back()重临的)时,用firebug能够看来,test2仍旧存在于dom中,那样的结果就像是革命部分陈述的:DOM会变得非常大,结果会使页面变慢和一些设备上的内部存款和储蓄器错误。

主题素材陈说

假若在品种中,有四个页面,分别是main.html、test1.html、test2.html(前面分别简称main、test1、test2),在那之中main页面是包含三个转化到test1页面包车型客车链接(即a标签),test第11中学有贰脾个性为data-rel=”back”的链接和八个转账到 test2的链接,test2独有贰天性质为data-rel=”back”的链接。main转向到test1后,点击back链接回来main(相当于点击浏览器的回来按键),没有供给另行发送get央浼;可是当test1转向到test2,在test2页面点击back链接想重返test1时,会另行发送二个get诉求。那样产生的标题就是:test1做的全体操作,在test2再次来到后,都会失效。举例A是贰个分页的列表页面,翻到第二页后倒车到B,那么当再次来到A后,就不能地位到第二页。

jQuery Mobile 是用于成立移动 Web 应用的前端开采框架。

经过地方的实验,小编也晓得了亟待满足自己的急需,就只能和谐解和管理理dom中页面包车型地铁生命周期了。那么就关乎到叁个主题素材:页面怎么时候过期(即从dom中删去)呢?根据本人的需要,当从test2再次回到到test1时,就相应从dom中去除test2,同理从test1再次回到main时,从dom中删去test1。假使重新从main导航到test1,就得发起四个get乞请,我认为那是客观的,因为用户不会认为点击链接到新页面还亟需缓存。所以笔者应当在页面显示前依然显示后,删除它之后的history,于是小编就在pagebeforeshow、pageshow的时候做了删除操作,即如下脚本(插件方式):

因而一番找出,在jQuery Mobile官方网址看到一段《Caching pages in the DOM》的叙说:

1、必须在援引该脚本此前,援引jquery和jquery mobile脚本文件;

如若在档案的次序中,有四个页面,分别是main.html、test1.html、test2.html(前边分别简称main、test1、test2),在那之中main页面是满含四个倒车到test1页面包车型地铁链接(即a标签),test第11中学有一个属性为data-rel=”back”的链接和三个转会到test2的链接,test2唯有贰天性格为data-rel=”back”的链接。main转向到test1后,点击back链接回到main(也就是点击浏览器的回到按键),无需再次发送get央求;不过当test1转向到test2,在test2页面点击back链接想重临test1时,会再一次发送多个get央浼。那样形成的难点便是:test1做的具备操作,在test2重临后,都会失灵。比如A是三个分页的列表页面,翻到第二页后转载到B,那么当再次回到A后,就不可能地位到第二页。

那正是说是如何原因呢?不在那么些事件里做拍卖,那在哪儿管理吧?于是作者留神研读了弹指间jQuery Mobile源码,开采了下边一段:

图片 7

图片 8

原因剖判

2、必须在page上增加data-dom-cache="true"。

总结

图片 9

前不久铺面包车型地铁web app项目,使得笔者幸运一直接触和学习jQuery Mobile。那的确是一个很科学的位移开垦库,有利于长于web开荒的程序员,快捷入门并创设筑组织调的运动应用。可是在前两日,作者遇见了多个主题素材,使自身查了广大材质都未有找到很好的减轻方案,最后只可以逼着自家读jQuery Mobile的源码,再写了个扩张,才得以消除。下边请让本身不住道来。

你恐怕感兴趣的篇章:

  • jQuery Mobile操作HTML5的常用函数计算
  • jQuery Mobile 和 Kendo UI 的比较
  • 详解jQuery Mobile自定义标签
  • jQuery mobile 移动web(4)
  • 选用jQuery mobile库检查评定url相对地址和绝对地址的秘技
  • jquerymobile checkbox及时刷新能力得到其正确值
  • jQuery Mobile的loading对话框展现/遮蔽方法分享
  • JqueryMobile动态生成listView并落到实处刷新的三种格局
  • 动用jquery mobile做幻灯播放效果完毕步骤
  • jQuery Mobile 导航栏代码
  • jQueryMobile之Helloworld与页面切换的不二等秘书诀
  • jQuery Mobile框架中的表单组件基础运用教程

页面在切换完后,会触发pagechange事件,于是本人把pagebeforeshow改成了pagechange,一切都按预想运转,并且未有不当,终于马到功成了。

上述所述是小编给大家介绍的jQuery Mobile页面再次回到无需重新get 的连带认证,希望对大家全数支持!

笔者先是用firebug看了一晃html的构造,发掘jQuery Mobile会把main和test1参与到页面结构中去,当从test1转向到test2后,test1会被自动删除,那样dom树中,只含有了main和test2,所以在test2重回test1就能够在发送一个get恳求。那么是或不是意味,只要能把历史页面缓存到dom中(就好像main和test1同样),就能够消除那一个标题。

从这段引文中应该能够看来,这两种办法都足以缓存页面到dom中,于是笔者就采纳了第两种方法,即在page的div上平添了data-dom-cache=”true”属性,可是却现身了以下八个难题:

结果适得其反,在页面重返时,出现了js脚本错误,如下图:

Caching pages in the DOM
To keep all previously-visited pages in the DOM, set the domCache option on the page plugin to true, like this:
$.mobile.page.prototype.options.domCache = true;
Alternatively, to cache just a particular page, you can add the data-dom-cache="true" attribute to the page's container:
<div data-role="page" id="cacheMe" data-dom-cache="true">
You can also cache a page programmatically like this:
pageContainerElement.page({ domCache: true });
The drawback of DOM caching is that the DOM can get very large, resulting in slowdowns and memory issues on some devices. If you enable DOM caching, take care to manage the DOM yourself and test thoroughly on a range of devices.

优化方案

主题材料陈述

jQuery Mobile 使用 HTML5 & CSS3 最小的脚本来布局网页。

jQuery Mobile 能够行使于智能手提式有线电电话机与平板Computer。

2、当笔者存在这么贰个页面,它通过区别的参数字展现示区别的剧情,何况页面上,有一段js脚本,会对页面上的因素做些管理,而作者辈常用的不二秘诀正是用id来获取指标成分,由于我们是用了cache缓存page,就能导致js事件如故操作混乱。举个例子在此处本人增添了三个test1_1页面,它的源委差没多少和test1同样,他们都有平等id的div和均等事件管理的button,那几个事件做的业务正是往这几个div中追加内容,当访问路径为main->test1->test1_1,在test1_1上点击按键,会开掘临近一直不接触那个事件,其实它已经接触了,只是内容充实到test第11中学的div中了,分别入下图

transitionPages( toPage, fromPage, settings.transition, settings.reverse )
.done(function() {
removeActiveLinkClass();
//if there's a duplicateCachedPage, remove it from the DOM now that it's hidden
if ( settings.duplicateCachedPage ) {
settings.duplicateCachedPage.remove();
}
//remove initial build class (only present on first pageshow)
$html.removeClass( "ui-mobile-rendering" );
releasePageTransitionLock();
// Let listeners know we're all done changing the current page.
mpc.trigger( "pagechange", triggerData );
}); 

编辑:亚洲城ca88唯一官方网站 本文来源:Mobile页面重回没有必要再一次get,Mobile页面再次

关键词: 亚洲城ca88