阅读更多

9顶
0踩

移动开发

翻译新闻 13款基于jQuery Mobile的布局插件和示例

2012-08-22 18:10 by 见习记者 车丽 评论(1) 有45057人浏览
现在已经进入了移动互联网时代,因此将你的网站迁移到移动设备上就显得比较重要的。问题是,如何在移动设备的小屏幕中呈现你的网站中的所有内容呢?

本文介绍13款基于jQuery Mobile的布局插件和示例,可以帮助你创建多视图或者分割视图布局的移动web页面,并会根据移动设备的方向和屏幕大小来动态调整所显示的内容。

1.  Three Column iPad Layout

三列分割视图布局效果,为手机和平板电脑上的移动网页布局提供了一个良好的平台。


源码 / 演示

2.  JQM Multiview Plugin

JQM Multiview Plugin是一个基于jQuery mobile开发的多视图页面导航插件,帮助你创建各种类型的页面视图,并且提供菜单。


源码 / 演示

3.   jQuery Mobile SplitView

SplitView会根据平板电脑的方向以及屏幕尺寸动态调整页面。调整浏览器大小、旋转平板电脑来体验浏览效果!


源码 / 演示

4.  Multiview Plugin

此页面是一个多视图页面,包含4个面板和16个页面,当加载页面时,这些全部会被加载到DOM中。


源码+演示

5.  Multi-page (boiler) Template

这是一个多页面的样板页面,你可以复制并建立自己的jQuery Mobile页面。此样板包含多个页面容器。


源码+演示

6.  Multi-Page Template

这个插件用来在加载子页面时预读取前面的多个页面,实现更快的响应时间。


源码+演示

7.  jQuery Mobile Multiple Pages

在这个示例中,介绍如何用多个页面建立一个简单的移动网站。多个页面可以嵌入一个文档或单独的文件中。


源码+演示

8.  960 Grid on jQuery-Mobile

960 Gird是一个用于移动Web开发的网格框架,综合了960.gs的灵活性和jQuery Mobile的方便性。它的目的是让jQuery Mobile布局更加的灵活。


源码 / 演示

9.  Creating A Tablet Split View For jQuery Mobile

在此示例中,可以看到jQuery Mobile的文档使用了CSS创建的分割视图。


源码+演示

10.  jQuery Mobile and Dynamic Page Generation

该插件可以在服务器端生成HTML页面/片段,也可以根据JSON或其他格式内容在客户端中动态生成页面内容。


源码 / 演示

11.  Fixed toolbars

使用“fixedtoolbar”插件,工具栏会固定显示在页面顶部或底部,页面内容可以在中间自由的滚动。在不支持固定定位的浏览器中,当页面滚动时,工具栏会在页面的顶部或底部隐藏或显示。


源码+演示

12.  App-UI

App-UI是一个UI组件集合,可以帮助Web或移动开发者使用HTML和JavaScript来创建交互式应用程序,尤其是针对移动设备创建应用程序。


源码 / 演示

13.  jQuery-Mobile – Plugin: Multiview

特点:
  • 分屏模式
  • 全屏模式
  • popover形式:主面板全屏,其余为弹出窗口
  • 允许网站有分屏显示和正常显示两种模式

源码 / 演示

英文原文:13 jQuery Mobile Layout Plugins and Examples
  • 大小: 82 KB
  • 大小: 55.5 KB
  • 大小: 37.9 KB
  • 大小: 31.5 KB
  • 大小: 41.6 KB
  • 大小: 54.6 KB
  • 大小: 49.3 KB
  • 大小: 35.3 KB
  • 大小: 43.9 KB
  • 大小: 31.8 KB
  • 大小: 33.5 KB
  • 大小: 29.2 KB
  • 大小: 75.5 KB
9
0
评论 共 1 条 请登录后发表评论
1 楼 lsjinpeng 2012-08-23 08:39
前排留名。。。前台太快了

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • TortoiseHg 修改提交代码Author名字

    修改C:\Users\username 目录下面的mercurial.ini文件,添加行: [code="java"][ui] username = 你要指定的Author名字[/code]

  • Hibernate实践

    在两年多的实践过程中既体验到了Hibernate带来的N多好处,同时也碰到不少的问题,特写此篇文章做个总结,记录自己在Hibernate实践中的一些经验,希望对于新使用Hibernate的朋友能有个帮助,避免走过多的弯路。...

  • hibernate简介1

    在两年多的实践过程中既体验到了Hibernate带来的N多好处,同时也碰到不少的问题,特写此篇文章做个总结,记录自己在Hibernate实践中的一些经验,希望对于新使用Hibernate的朋友能有个帮助,避免走过多的弯路。...

  • hibernate 实践 http://www.blogjava.net/BlueDavy/archive/2006/03/27/37582.html

    BlueDavy之技术Blog 理论不懂就实践,实践不会就学理论! Hibernate实践 ...在实际项目中使用Hibernate有两年多了,在两年多的实践过程中既体验到了Hibernate带来的N多好处,同时也碰到不少的问题,特

  • Hibernate最佳实践

    在两年多的实践过程中既体验到了Hibernate带来的N多好处,同时也碰到不少的问题,特写此篇文章做个总结,记录自己在Hibernate实践中的一些经验,希望对于新使用Hibernate的朋友能有个帮助,避免走过多的弯路。...

  • [Hibernate]Hibernate入门

    阅读本文前建议至少拥有Hibernate的一些基本知识,因为本文不会去详细介绍相关的基本知识,最好就是先用Hibernate开发了一个HelloWorld,^_^。 根据自己所经历的项目中使用Hibernate所涉及的范围,本文从开发...

  • NHibernate中文学习资料

    在两年多的实践过程中既体验到了Hibernate带来的N多好处,同时也碰到不少的问题,特写此篇文章做个总结,记录自己在Hibernate实践中的一些经验,希望对于新使用Hibernate的朋友能有个帮助,避免走过多的弯路。...

  • Hibernate实践概要

    一. 序 本文属于转载: 作者:BlueDavy 来源:www.blogjava.net/BlueDavy 二. 开发环境 Hibernate 开发环境的搭建非常的简单,不过为了提高基于Hibernate开发的效率,通常都需要使用一些辅助工具,如xdoclet、...

  • Hibernate实践 (转贴)

    原文地址:http://www.blogjava.net/BlueDavy/archive/2006/03/27/37582.html原文作者:BlueDavy 原文:_________________________________________________________________________________Hibernate实践 一....

  • 做事情,做学问,还有生活。

            大学里的人,总是逃不脱这样的循环。做事情,做学问,还有生活。         我来到交大六年,头四年读书,后二年在学生处工作做信息化。我至少还会在这个地方生活二三年,读研究生。         做任何事情,人的热情总会被现实慢慢磨掉,但只要回过头去看看,做过的事情是有意义的,自己也有了成长,于是就开心满意了,譬如这个信息化的事情就是这样,扬华素质网根本是一个艺术品,在我们这一帮孩子

  • 唉,小心和开心都不知道跑哪里去了,不回来了。

    我的二个小龟啊,跟了我有二个多月了,我们都这么熟了,放你们自由找地方睡觉,你倒好,就不知道溜哪去玩了,都快一个星期了,也不见回来。唉,看来你们一定迷路了。  

  • 小心和开心走了,痴痴和呆呆来了。

    记上一笔,今天是我生日啊,真快,25岁了。小心和开心想来是不会再回来了,真是有些想它们。今天迎回了另二只和小心开心差不多大的,起名叫痴痴 和 呆呆。名贱的容易养。 痴痴呆呆,平平常常,平平安安的人生其实也不错。 

  • 终于搞定,希望自己有空的时候能多写点

    虽然水平不高,但脸皮比较厚。  

  • 【java毕业设计】智慧社区在线教育平台(源代码+论文+PPT模板).zip

    zip里包含源码+论文+PPT,有java环境就可以运行起来 ,功能说明: 文档开篇阐述了随着计算机技术、通信技术和网络技术的快速发展,智慧社区门户网站的建设成为了可能,并被视为21世纪信息产业的主要发展方向之一 强调了网络信息管理技术、数字化处理技术和数字式信息资源建设在国际竞争中的重要性。 指出了智慧社区门户网站系统的编程语言为Java,数据库为MYSQL,并实现了新闻资讯、社区共享、在线影院等功能。 系统设计与功能: 文档详细描述了系统的后台管理功能,包括系统管理模块、新闻资讯管理模块、公告管理模块、社区影院管理模块、会员上传下载管理模块以及留言管理模块。 系统管理模块:允许管理员重新设置密码,记录登录日志,确保系统安全。 新闻资讯管理模块:实现新闻资讯的添加、删除、修改,确保主页新闻部分始终显示最新的文章。 公告管理模块:类似于新闻资讯管理,但专注于主页公告的后台管理。 社区影院管理模块:管理所有视频的添加、删除、修改,包括影片名、导演、主演、片长等信息。 会员上传下载管理模块:审核与删除会员上传的文件。 留言管理模块:回复与删除所有留言,确保系统内的留言得到及时处理。

  • 基于深度强化学习的德州扑克AI算法优化详细文档+全部资料+源码.zip

    【资源说明】 基于深度强化学习的德州扑克AI算法优化详细文档+全部资料+源码.zip 【备注】 1、该项目是个人高分项目源码,已获导师指导认可通过,答辩评审分达到95分 2、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 3、本项目适合计算机相关专业(人工智能、通信工程、自动化、电子信息、物联网等)的在校学生、老师或者企业员工下载使用,也可作为毕业设计、课程设计、作业、项目初期立项演示等,当然也适合小白学习进阶。 4、如果基础还行,可以在此代码基础上进行修改,以实现其他功能,也可直接用于毕设、课设、作业等。 欢迎下载,沟通交流,互相学习,共同进步!

  • 无需安装MobaXterm简约版本,远程工具

    无需安装MobaXterm简约版本,远程工具

  • 蓝桥杯Python组的初级到中级选手练习python案例

    这个脚本包含了常见的算法和编程概念,适合蓝桥杯Python组的初级到中级选手练习。通过这些练习,选手可以: 理解递归算法(如斐波那契数列和汉诺塔问题)。 熟悉基本数据结构和操作(如字符串操作、列表处理)。 学习基本的数学算法(如求最大公约数)。 掌握Python语言的基本语法和内置函数的使用。 比赛中可能会遇到更复杂的问题,但这些练习能帮助你打下坚实的基础。在准备蓝桥杯时,还应该关注算法题库,学习更多数据结构(如栈、队列、树、图等)、算法(如动态规划、贪心算法、搜索算法等),并进行大量的代码实践和调试。

  • 【java毕业设计】智慧社区远程办公平台(源代码+论文+PPT模板).zip

    zip里包含源码+论文+PPT,有java环境就可以运行起来 ,功能说明: 文档开篇阐述了随着计算机技术、通信技术和网络技术的快速发展,智慧社区门户网站的建设成为了可能,并被视为21世纪信息产业的主要发展方向之一 强调了网络信息管理技术、数字化处理技术和数字式信息资源建设在国际竞争中的重要性。 指出了智慧社区门户网站系统的编程语言为Java,数据库为MYSQL,并实现了新闻资讯、社区共享、在线影院等功能。 系统设计与功能: 文档详细描述了系统的后台管理功能,包括系统管理模块、新闻资讯管理模块、公告管理模块、社区影院管理模块、会员上传下载管理模块以及留言管理模块。 系统管理模块:允许管理员重新设置密码,记录登录日志,确保系统安全。 新闻资讯管理模块:实现新闻资讯的添加、删除、修改,确保主页新闻部分始终显示最新的文章。 公告管理模块:类似于新闻资讯管理,但专注于主页公告的后台管理。 社区影院管理模块:管理所有视频的添加、删除、修改,包括影片名、导演、主演、片长等信息。 会员上传下载管理模块:审核与删除会员上传的文件。 留言管理模块:回复与删除所有留言,确保系统内的留言得到及时处理。

Global site tag (gtag.js) - Google Analytics