jquerymobile-3 page title和网页预提取(Prefetching content)
来源:互联网 发布:易语言access sql查询 编辑:程序博客网 时间:2024/05/16 15:08
使用jquerymobile的时候有时候我们会在同一个页面中写多个页面,但是在切换的时候,在浏览器显示的title总是同一个。我们需要不同的页面显示不同的title,这时候我们可以在data-role后面添加data-title属性,设置自己需要的title内容。下面一个例子代码:
<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><title>Multi Page Example (2)</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" /><script src="http://code.jquery.com/jquery-1.7.1.min.js"></script><script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script></head><body><div data-role="page" id="homePage"><div data-role="header">Welcome</div><div data-role="content"><p>Welcome to our first mobile web site. It's going to be the best site you've ever seen. Once we get some content. And a business plan. But the hard part is done!</p><p>You can also <a href="#aboutPage">learn more</a> about Megacorp.</p></div><div data-role="footer"><i>Copyright Megacorp © 2012</i></div></div><div data-role="page" id="aboutPage" data-title="About Megacorp"><div data-role="header">About Megacorp</div><div data-role="content"><p>This text talks about Megacorp and how interesting it is. Most likely though you want to<a href="#homePage">return</a> to the home page.</p></div><div data-role="footer"><i>Copyright Megacorp © 2012</i></div></div></body></html>在我们点击learn more链接后,跳转了一个页面,同时title会改变为About Megacorp。
在某些情况下,我们一个页面中的某个链接,被点击的可能性很大,这时候我们如果能够提前取得这个页面的数据,在用户点击的时候马上就显示出来,这样会给用户一个很好的体验。jquerymobile也考虑了这样的情况,在我们使用<a>标签加载一个外部页面的时候,我们添加一个属性data-prefetch属性。我们可以在上面的代码中添加一个如下的链接:
Find out about our wonderful <a href="products.html" data-prefetch>products</a>.
products.html如下:
<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><title>Products</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" /><script src="http://code.jquery.com/jquery-1.6.2.min.js"></script><script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script></head><body><div data-role="page" id="productsPage"><div data-role="header">Products</div><div data-role="content"><p>Our products include:</p><ul><li>Alpha Series</li><li>Beta Series</li><li>Gamma Series</li></ul></div></div></body></html>
我们打开我们修改的上一个页面的时候,jquerymobile会自动将products.html的内容加载到第一个页面的最后,这个读者可以自己在浏览器中打开,然后查看源文件就可以看见。
本人也是新学,如果哪里错了,还请指出。
- jquerymobile-3 page title和网页预提取(Prefetching content)
- jquerymobile-3 page title和网页预加载
- 网页加速之Link prefetching
- RailsCase30 Pretty Page Title 动态变化的网页标题
- 网页加速之Prefetching VS Prerendering
- jquerymobile引用多个page
- 关闭Firefox的预下载(Prefetching)属性
- 缓存数据预取(Cache Prefetching Overview)
- Mixed Content Page
- jquerymobile-20 可折叠内容(Collapsible content)
- jquerymobile-10 可折叠内容(Collapsible content)
- ASP.NET中Master Page和Content Page里的事件处理顺序
- 根据URL提取页面的Title,根据网页的charset自动判断Encoding
- Contente Type, Page Layout and Content Page
- 采集网页+正则替换和提取
- safari提取网页的视频和音频
- 使用CInternetSession和CHttpFile提取网页源码
- python网页自动摘要和关键词提取
- poj 3298 数状数组
- 福布斯:谷歌应拆分为三家公司吗?
- C3P0数据库连接池【JAVA】-oracle数据库为例
- 第一周
- 金士顿推出1TB闪存式U盘 达到USB 3.0标准
- jquerymobile-3 page title和网页预提取(Prefetching content)
- 史上十大最昂贵笔记本电脑:最高售价100万美元
- 企业拥抱Windows 8的十大理由
- 浅谈C++底层机制
- mysql学习足迹之一【linux环境下源码安装mysql-5.5.25版本数据库】
- HDOJ2065 “红色病毒”问题
- [常见问题] 全面理解Unity加载和内存管理
- struts中action的线程安全问题
- [实时web系列]实时web消息传播方式