阅读更多

9顶
0踩

移动开发

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

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

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

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

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

  • 小苹果影视盒子-v1.5.7-免费纯净版

    智能电视组好用的点播APP,可以看4K,8K的源

  • 深度学习Yolov8算法

    深度学习Yolov8算法

  • (源码)基于C++和Java的TeamTalk企业即时通讯系统.zip

    # 基于C++和Java的TeamTalk企业即时通讯系统 ## 项目简介 TeamTalk是一套开源的企业办公即时通讯软件,TTServer作为其核心组件,提供了用户登录、消息转发及存储等基础服务。TTServer包含多种服务器模块,如LoginServer、MsgServer、RouteServer、FileServer、MsfsServer和DBProxy,分别负责不同的功能,共同构建了一个完整的企业即时通讯系统。 ## 项目的主要特性和功能 私人聊天支持用户之间的私密聊天。 群组聊天支持多人参与的群组聊天。 文件传输提供在线及离线文件传输服务。 多点登录允许多设备同时登录同一账号。 组织架构设置支持企业组织架构的管理和设置。 ## 安装使用步骤 ### C++部分 1. 编译 整体编译运行srcbuild.sh脚本,例如.build.sh version 0.0.1。

  • Ubuntu 20.04安装指南:Linux发行版在桌面与服务器环境的应用与设置

    内容概要:本文提供了从准备到最终配置完整的 Ubuntu 20.04 安装教程,主要分为六个部分讲解。首先介绍了下载所需 ISO 镜像的方法以及使用不同操作系统来制作启动用的 U 盘,然后详述了安装步骤,包括选择语言、联网方式、分区决策以及创建用户账户的具体操作流程,并给出了对于初学者较为友好的磁盘分配建议。此外,还强调了一些关键配置点如系统更新和常用工具的安装。 适用人群:对 Linux 感兴趣的新手或者打算把 Ubuntu 作为日常操作系统使用的用户,也包括希望基于 Ubuntu 构建个人或小型团队开发环境的技术爱好者们。 使用场景及目标:适用于计划搭建一台新的计算机并运行高效稳定的 Linux 工作站或服务器的情况;旨在提供给用户快速上手且安全可靠的环境搭建方法,满足日常工作任务和个人兴趣探索的需求。 其他说明:文中涉及的操作命令均适用于大多数 Unix-like 操作系统的终端窗口,所有命令都尽可能地进行了注释以便理解每个动作的意义。

  • (源码)基于Python的机器学习实战项目.zip

    # 基于Python的机器学习实战项目 ## 项目简介 本项目是一个基于Python的机器学习实战项目,涵盖了多种机器学习算法和应用场景。项目内容包括集成学习、决策树、KNN算法、逻辑回归以及朴素贝叶斯等算法的实现。通过这些算法,项目展示了如何处理不同类型的数据集,并进行分类、预测和可视化。 ## 项目的主要特性和功能 1. 集成学习 实现AdaBoost集成学习算法,通过构建多个弱分类器并进行集成,优化模型性能。 支持数据集的分类训练和预测。 2. 决策树 实现基于信息增益的决策树分类器,能够处理多维数据集。 提供决策树的可视化功能,帮助理解决策树的构建过程。 3. KNN算法 实现K最近邻算法,用于手写数字识别和约会问题分类。 支持数据的标准化处理,提高模型性能。 4. 逻辑回归 实现逻辑回归模型,用于分类任务。

Global site tag (gtag.js) - Google Analytics