目录:
视频: #23 Qt应用程序的开发【ARM9教程】 2024
能够削减HTML5和CSS3网页它适合移动设备,但显然,如果页面较小,则需要更多。移动应用程序通常使用页面翻转隐喻在一小块屏幕空间中包装更多的数据,而jQuery移动库又有一个很好的工具来使这一切变得简单。
<! --1 - >到目前为止,这个应用程序看起来就像你迄今为止看到的其他jQuery移动应用程序。有一点是不同的,这是标题中的按钮。移动应用程序在标题中有导航按钮是很常见的。按Next按钮。
漂亮的渐变过渡后,出现下一页。这个在标题中有两个按钮。再次按“下一步”将用户转到第三页。
<! - 2 - >第三页再次非常熟悉,但是这一次在标题左侧有一个按钮,在主要内容区域有另一个按钮。
这三页有趣的是他们不是三页!这只是一个页面,旨在表现为三个不同的页面。这种安排有几个好处。
-
CSS和JavaScript资源只需要加载一次: 这样可以保持系统一致性并略微提高加载时间。
-
没有滞后时间: 文档加载时,整个内容都在内存中,即使一次只能看到一个部分。这使您可以在不必等待服务器访问的情况下快速移动页面。
当你想把一个大页面当作几个小页面的时候,你通常会实现这种类型的机制,所以用户不必滚动。
以下是multiPage的代码。完整的HTML。
多页。 html #foot {font-size:75%; font-style:italic; text-align:center;} pre {margin-left:auto; margin-right:auto;背景颜色:白色; width:8em;}第一页
下一页这是索引
- 第1页
- 第2页
- 第3页 来自HTML All in One for Dummies 上一页
第二页
下一页第二页与第一页非常相似,除非它不是第一页,它具有文本而不是按钮。这是第二页。如果你喜欢第一个,我想你可以回去,但是你真的应该去下一页,因为我听说它真的很好。
from HTML All in One for Dummies prev第三页
3333333 3 3 3 33333 3 3 3 3333333
从HTML All in One for Dummies
虽然这个例子的代码很长,但并没有打破很多新的领域。加载jQuery手机内容。从jQuery中提取必要的CSS和JavaScript文件。 com网站。
-
应用您自己的CSS。
即使你是从jQuery“借用”CSS代码,你仍然可以添加自己的。您可以添加CSS,使页脚和预元素按照您的要求行事。
-
建立你的网页。
您可以根据需要构建尽可能多的页面,但它们都遵循相同的通用jQuery移动模式:使用标题,内容和页脚div创建页面div。使用data-role属性来指示每个div的角色。
-
使用id属性命名每个页面级别的div。
因为用户将翻页,每个页面需要某种标识符。给每个页面一个唯一的id属性。在标题内建立按钮。
-
这个例子中唯一真正新的部分(除了翻页本身)是标题中的按钮。跳到第2页的页眉,您将看到一些非常有趣的内容:
prev
-
第二页
next
如果您在具有header data-role的元素中定义链接,则该链接会自动成为一个按钮。此外,定义的第一个链接将自动放置在标题的左侧,第二个放置在右侧。
强制单个按钮向右。
如果你想要一个按钮在右边,添加一个类到按钮:Page One
-
next
使用内部锚点在页面之间跳过。看看所有按钮中的URL。它们以散列开始,表示文档内部的一个内部链接。请记住,虽然这感觉像三个不同的页面给用户,但它实际上是一个大的网页。试验转换。仔细查看第三页的按钮:
转到索引
此按钮具有特殊的数据转换属性。默认情况下,移动网页与淡入淡出。您可以将转换设置为幻灯片,上滑,下滑,弹出,淡出或翻转。您也可以通过添加另一个属性来反转过渡:data-direction =“reverse”。