资讯频道 → 移动开发
阅读更多

9顶
0踩

移动开发

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

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

本文介绍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岁了。小心和开心想来是不会再回来了，真是有些想它们。今天迎回了另二只和小心开心差不多大的，起名叫痴痴 和 呆呆。名贱的容易养。 痴痴呆呆，平平常常，平平安安的人生其实也不错。 

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

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

  • "SMART 200系列地址库：灵活配置的位读写系统",SMART 200 寻址-库 6个子 位：一个读，一个写 读：例如 读取从V0.0开始的第N个位的状态 写：例如 将值写入V0.0开始的第N个位

    "SMART 200系列地址库：灵活配置的位读写系统",SMART 200 寻址-库 6个子 位：一个读，一个写 读：例如 读取从V0.0开始的第N个位的状态 写：例如 将值写入V0.0开始的第N个位中 起始地址和第几个位都可自定义 字节：读写一体，引脚控制读或写 字：读写一体，引脚控制读或写 双字：读写一体，引脚控制读或写 实数：读写一体，引脚控制读或写 ,核心关键词：SMART 200; 寻址-库; 子位; 读; 写; 起始地址; 自定义; 字节; 字; 双字; 实数。,"SMART 200库：位寻址与多读写功能"

  • perl-ExtUtils-Manifest-1.61-244.el7.x64-86.rpm.tar.gz

    1、文件内容：perl-ExtUtils-Manifest-1.61-244.el7.rpm以及相关依赖 2、文件形式：tar.gz压缩包 3、安装指令： #Step1、解压 tar -zxvf /mnt/data/output/perl-ExtUtils-Manifest-1.61-244.el7.tar.gz #Step2、进入解压后的目录，执行安装 sudo rpm -ivh *.rpm 4、安装指导：私信博主，全程指导安装

  • 多水下航行器协同定位的MATLAB仿真：基于《Cooperative Localization for Autonomous Underwater Vehicles》的研究与实践,7MATLAB仿

    多水下航行器协同定位的MATLAB仿真：基于《Cooperative Localization for Autonomous Underwater Vehicles》的研究与实践,【7】MATLAB仿真 多水下航行器协同定位，有参考文档。 主要参考文档： 1. Cooperative Localization for Autonomous Underwater Vehicles，The International Journal of Robotics Research 主要供文档方法的学习 非全文复现。 ,MATLAB仿真; 多水下航行器协同定位; 参考文档; 自主水下航行器; 机器人学国际期刊; Cooperative Localization。,MATLAB仿真：多水下航行器协同定位研究参考国际期刊论文

  • 基于大语言模型的多模态社交媒体信息流行度预测研究

    基于大语言模型的多模态社交媒体信息流行度预测研究

  • perl-Algorithm-Diff-1.1902-17.el7.x64-86.rpm.tar.gz

    1、文件内容：perl-Algorithm-Diff-1.1902-17.el7.rpm以及相关依赖 2、文件形式：tar.gz压缩包 3、安装指令： #Step1、解压 tar -zxvf /mnt/data/output/perl-Algorithm-Diff-1.1902-17.el7.tar.gz #Step2、进入解压后的目录，执行安装 sudo rpm -ivh *.rpm 4、安装指导：私信博主，全程指导安装

Global site tag (gtag.js) - Google Analytics