13款基于jQuery Mobile的布局插件和示例

现在已经进入了移动互联网时代，因此将你的网站迁移到移动设备上就显得比较重要的。问题是，如何在移动设备的小屏幕中呈现你的网站中的所有内容呢？

本文介绍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形式：主面板全屏，其余为弹出窗口
允许网站有分屏显示和正常显示两种模式

源码/ 演示

转载于:https://blog.51cto.com/yerik/1105564

13款基于jQuery Mobile的布局插件和示例相关推荐

分享15款为jQuery Mobile定制的插件
jQuery Mobile 1.0 已经发布了, 做为jQuery的移动设备类库, 并且依靠着jQuery这个及其受欢迎的类库,必将带给大家不一样的使用体验,基于jQuery Mobile的插件开发必 ...
10 款基于 jQuery 的切换效果插件推荐
本文整理了 10 款非常好用的 jQuery 切换效果插件,包括平滑切换和重叠动画等,这些插件可以实现不同元素之间的动态切换. 1. InnerFade 这是一个基于 jQuery 的小插件,可以实现 ...
html css 圆形按钮仿uc,10款基于jquery的web前端动画特效
1.jQuery横向手风琴图片切换动画之前我们为大家分享过很多款基于jQuery和CSS3的手风琴菜单和手风琴焦点图插件,比如CSS3响应式垂直手风琴菜单和jQuery横向手风琴图片展示插件.今天要 ...
出位的template.js 基于jquery的模板渲染插件,简单、好用
找了好几款基于jquery的模板渲染插件,无一感觉很难用(教程较少.绑定不统一),也可能我智商问题,比如jquery template.js .jtemplate.js. 然后在github上找到这一 ...
【精心挑选】10款基于 jQuery 的图片360度旋转插件
之前的文章向大家分享了实现网站功能的各种优秀的 jQuery 插件,今天这篇文章向大家推荐10款基于 jQuery 的图片360度旋转插件,同时还有非常详细的制作教程可以学习和参考.图片旋转展示是一种 ...
精心挑选10款基于 jQuery 的图片360度旋转插件
之前的文章向大家分享了实现网站功能的各种优秀的 jQuery 插件,今天这篇文章向大家推荐10款基于 jQuery 的图片360度旋转插件,同时还有非常详细的制作教程可以学习和参考.图片旋转展示是一种 ...
【JQuery Mobile移动应用开发实战】JQuery Mobile基础——JQuery Mobile的布局
文章目录 6. JQuery Mobile的布局 6.1 改良后的QQ登录界面 6.2 一种简洁的通讯录设计 6.3 完美实现九宫格 6.4 可以折叠的QQ好友列表 6.5 展开图标的设置 6.6 两 ...
一款基于jQuery外观优雅带遮罩弹出层对话框
今天我们要来分享一款基于jQuery的弹出层对话框插件,该插件包含多种对话框类型,比如提示框.确认框等.更为实用的是,这款jQuery对话框中的按钮事件也可以被我们所捕获,从而相应对话框按钮的各种事件 ...
30个基于jQuery的日期时间选择插件
今天给大家分享30个非常酷的基于jQuery的日期时间选择插件,这是在国外的一个网站看到的,于是就稍作翻译,拿出来与大家分享,英文原文地址:http://www.1stwebdesigner.com/ ...

13款基于jQuery Mobile的布局插件和示例

13款基于jQuery Mobile的布局插件和示例相关推荐

最新文章

热门文章