1.UI.Layout  jQuery UI布局插件

官方网站:http://layout.jquery-dev.com/index.cfm

使用大小可折叠的嵌套面板和大量选项创建高级UI布局。布局可以创建任何你想要的UI外观; 从简单的标题或侧边栏到具有工具栏,菜单,帮助面板,状态栏,子表单等的复杂应用程序。集成并增强其他UI小部件,如选项卡,手风琴和对话框,以创建丰富的界面。

图片发自简书App

2.jQUery Masonry

官方网站:https://masonry.desandro.com/?resources/jquery-masonry

所有项目的大小和样式都由您自己的CSS处理。项目大小可以用响应式布局的百分比来设置

图片发自简书App

3.jLayout

jLayout JavaScript库提供了用于布局组件的布局算法。一个组件是一个抽象; 它可以通过多种方式实现,例如HTML5 Canvas绘图中的项目或HTML元素。jLayout库允许您专注于绘制各个组件,而不是如何将其排列在屏幕上。

GitHub:https://github.com/bramstein/jlayout/

图片发自简书App

4.jQuery pageSlide

Query pageSlide 是一个jQuery插件,它可以控制一个隐藏页面的显示和关闭。jQuery展开左右侧栏目插件PageSlide,pageslide插件功能实现现实隐藏侧边栏的功能。插件可以读取另个一html,也可以是当前页面中的元素,目前比较流行的导航菜单展现形式,特别是在手机端或者触屏页面,效果还是不错的

demo:http://www.jq22.com/jquery-info343

图片发自简书App

5.jQSlickWrap

http://www.jwf.us/projects/jQSlickWrap/

jQSlickWrap是一个真正可以将内容包裹在图片周围的jQuery插件。该插件使用HTML5 Canvas标签,用法非常简单。可以轻松而准确地实现浮动图像的文字环绕效果。

图片发自简书App

6.Columnizer

官方网址:https://welcome.totheinter.net/columnizer-jquery-plugin/

Columnizer jQuery Plugin将自动以报纸列格式来布局您的内容。您可以指定列宽或列的静态数量。而且,当然,这很容易使用!Columnizer会将CSS类添加到它创建的列中。每列将有一个“列”类名。第一列将有“第一”,最后一列将有“最后”。这使您可以更轻松地定位CSS标记中的特定列。

github:https://github.com/adamwulf/Columnizer-jQuery-Plugin

图片发自简书App

7:Columns

jQueryJSON数据转换为html表插件Columns

GitHub:https://github.com/eisenbraun/columns

Columns创建JSON数据转化为HTML方法 引用jQuery库1.7或更高版本和Columns插件文件,列是将JSON数据创建为可排序,可搜索和分页的HTML表格的简单方法。所有你需要的是提供的数据,和列将完成其余的。因为Columns动态地创建了所有必要的HTML,所以唯一需要的HTML是一个空的HTML元素,比如一个<div>标签,在初始化时使用相应的id。

图片发自简书App

七个帮助你处理Web页面层布局的jQuery插件的更多相关文章

  1. 20 个用于处理页面滚动效果的 jQuery 插件

    对设计和开发一个网站来说,web开发者不能低估了网站滚动效果的重要性.如今,设计者们都视为一大挑战了,在网站中设计出吸引眼球的高效视觉滚动效果.幸运的是有各种各样的jquery 滚动插件可供他们使用, ...

  2. 利用CSS函数calc(...)实现Web页面左右布局

    前言 因为自己的网站需要,想要做一个左右布局的页面: 左边是导航菜单之类的东西.右边是文档内容(因为最近看的一些软件的文档页面都是这么布局的): 左边固定宽度——300像素.右边使用剩余的宽度: 左边 ...

  3. web页面简单布局的修改,测试中的应用

    在做功能测试的时候发现,界面显示不美观,觉得登录按钮应向上移动,那么如何移动呢? 很简单:使用开发者工具找到这个按钮所在的div,修改其中的属性值,top值减小,即可实现按钮向上移动,具体可以看效果

  4. 自写图片遮罩层放大功能jquery插件源代码,photobox.js 1.0版,不兼容IE6

    阿嚏~~~ 话说本屌丝没啥开发插件的经验,可是天公不作美,公司须要让我自己开发个图片放大的插件 但公司老大的话,宛如吾皇之圣旨,微臣必当肝脑涂地,莫敢不从啊~~~ 于是乎,作为一个超级小白,本人仅仅能 ...

  5. 简易页面场景滚动的jquery插件

    (function($){ $.extend($.fn, { scene_scroll:function(arg_obj){ // 参数检测 // 场景数组 var $scene_arr = arg_ ...

  6. SiteMesh:一个优于Apache Tiles的Web页面布局、装饰框架

    一.SiteMesh项目简介 OS(OpenSymphony)的SiteMesh是一个用来在JSP中实现页面布局和装饰(layout and decoration)的框架组件,能够帮助网站开发人员较容 ...

  7. 设计Web页面(2)

    1.前面我们新建了一个空白的ASP.NET网页,那么接下来这章我们就讲一下设计Web页面 2.布局页面有两种方法,一种是通过Table表格来布局页面窗体,另一种是通过CSS+DIV来布局窗体,其中作为 ...

  8. jQuery插件综合应用(二)文字为主的页面

    一.介绍 文字内容是每个网站都有的内容,网站在展示文字内容时,总是比图片.视频等富媒体内容要难一些,因为富媒体容易被用户接受.尤其是越多的文字内容越难以被用户通篇的阅读,跳跃式阅读往往是阅读的主要方式 ...

  9. ABP框架 - 动态Web Api层

    文档目录 本节内容: 创建动态Web Api控制器 ForAll 方法 重写 ForAll ForMethods Http 动词 WithVerb 方法 HTTP 特性 命名约定 Api 浏览器 Re ...

随机推荐

  1. 3/19 Django框架 url路由配置及模板渲染

    3/19 Django框架 url路由配置及模板渲染 1.路由分配 URL(Uniform Resoure Locato):统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示, ...

  2. map按value查找相应元素

    find_if算法用来在map中查找value符合条件的pair元素,返回指向该符合条件元素的迭代器,如果找到,那么返回最后一个元素的后一个元素end(); 1.首先要定义头文件 #include & ...

  3. Spring学习总结(5)——IOC注入方式总结

    一.构造注入 在类被实例化的时候,它的构造方法被调用并且只能调用一次.所以它被用于类的初始化操作.<constructor-arg>是<bean>标签的子标签.通过其<v ...

  4. 题目1205:N阶楼梯上楼问题(2008年华中科技大学计算机保研机试真题:递推求解)

    题目1205:N阶楼梯上楼问题 时间限制:1 秒 内存限制:128 兆 特殊判题:否 提交:2447 解决:927 题目描写叙述: N阶楼梯上楼问题:一次能够走两阶或一阶,问有多少种上楼方式. (要求 ...

  5. 15个常用的javaScript正则表达式--来自于javascript公众号

    摘要 收集整理了15个常用的javaScript正则表达式,其中包括用户名.密码强度.整数.数字.电子邮件地址(Email).手机号码.身份证号.URL地址. IPv4地址. 十六进制颜色. 日期. ...

  6. ajax的get请求与编码

    window.onload = function(){ document.getElementById('username').onblur = function(){ var name = docu ...

  7. Android新控件RecyclerView剖析

    传智·没羽箭(传智播客北京校区Java学院高级讲师) 个人简单介绍:APKBUS专家之中的一个,黑马技术沙龙会长,在移动领域有多年的实际开发和研究经验.精通HTML5.Oracle.J2EE .Jav ...

  8. amazeui页面分析3

    amazeui页面分析3 一.总结 1. 本质是list列表,是ul套li的形式,只不过li里面是图片 <li class="am-g am-list-item-desced am-l ...

  9. 大战C100K之-Linux内核调优篇--转载

    原文地址:http://joyexpr.com/2013/11/22/c100k-4-kernel-tuning/ 早期的系统,系统资源包括CPU.内存等都是非常有限的,系统为了保持公平,默认要限制进 ...

  10. UVA 11136 - Hoax or what (可以提交了,不会Submission error了)

    看题传送门:http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem ...