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. <link rel="shortcut icon" href="Xubuntu.ico" type="image/x-icon" /> <LINK href="Xubuntu.ico" rel="shortcut icon"> <link href="Xubuntu.ico" rel="B

    <link rel="shortcut icon" href="Xubuntu.ico" type="image/x-icon" /& ...

  2. powerdesigner 连接mysql提示“connection test failed”

    powerdesigner  连接mysql提示“connection test failed”,该如何解决: 1.把64位的jdk换成32位的jdk(VM只支持32的jre) 2.系统变量:  CL ...

  3. 洛谷 P1598 垂直柱状图

    P1598 垂直柱状图 题目描述 写一个程序从输入文件中去读取四行大写字母(全都是大写的,每行不超过72个字符),然后用柱状图输出每个字符在输入文件中出现的次数.严格地按照输出样例来安排你的输出格式. ...

  4. 基于Eclipse的Android JNI层測试应用开发过程记录

    前言 本文记录一个Java层与JNI层參数与数据交互的应用程序开发过程.为实现一个功能完整的带Java与JNI的应用程序打下基础. 本文如果读者已搭建好Android的Eclipse与NDK开发环境, ...

  5. HDU 5389 Zero Escape (MUT#8 dp优化)

    [题目链接]:pid=5389">click here~~ [题目大意]: 题意: 给出n个人的id,有两个门,每一个门有一个标号,我们记作a和b,如今我们要将n个人分成两组,进入两个 ...

  6. Warning: Division by zero in 错误处理

    Warning: Division by zero in 错误处理 今天调试一段代码,结果提示 Warning: Division by zero in ,没有扫到答案,最后发现 $dir/$name ...

  7. python之字符串 元祖 列表 字典

    一 字符串操作 语法:' ' 类型:str #首字母大写其余全部小写 test1 = 'yanShichenG' v = test1.capitalize() #全部小写(可以处理特殊字符) v1 = ...

  8. Flume Source官网剖析(博主推荐)

    不多说,直接上干货! 一切来源于flume官网 http://flume.apache.org/FlumeUserGuide.html Flume Sources Avro Source Thrift ...

  9. java poi 向excel写入图片

    import java.awt.image.BufferedImage; import java.io.ByteArrayOutputStream; import java.io.File; impo ...

  10. 方正飞越 A600硬改BIOS激活win7的工具与方法。

    硬件:方正飞越A600-4E57:主板,H61 IPISB-VR:BIOS版本,方正A007SB0(AMI) 软件:Win7专业版 目标:修改BIOS,添加SLIC2.1,硬激活win7 OEM版 具 ...