这次给大家带来处理web页面层布局的jquery插件的7种办法,下面就是实战案例,一起来看一下。
1.ui.layout jquery ui布局插件
使用大小可折叠的嵌套面板和大量选项创建高级ui布局。布局可以创建任何你想要的ui外观; 从简单的标题或侧边栏到具有工具栏,菜单,帮助面板,状态栏,子表单等的复杂应用程序。集成并增强其他ui小部件,如选项卡,手风琴和对话框,以创建丰富的界面。
2.jquery masonry
所有项目的大小和样式都由您自己的css处理。项目大小可以用响应式布局的百分比来设置
3.jlayout
jlayout javascript库提供了用于布局组件的布局算法。一个组件是一个抽象; 它可以通过多种方式实现。
例如html5 canvas绘图中的项目或html元素。jlayout库允许您专注于绘制各个组件,而不是如何将其排列在屏幕上。
github:https://github.com/bramstein/jlayout/
4.jquery pageslide
query pageslide 是一个jquery插件,它可以控制一个隐藏页面的显示和关闭。jquery展开左右侧栏目插件pageslide,pageslide插件功能实现现实隐藏侧边栏的功能。插件可以读取另个一html,也可以是当前页面中的元素,目前比较流行的导航菜单展现形式,特别是在手机端或者触屏页面,效果还是不错的
demo:http://www.jq22.com/jquery-info343
5.jqslickwrap
http://www.jwf.us/projects/jqslickwrap/
jqslickwrap是一个真正可以将内容包裹在图片周围的jquery插件。该插件使用html5 canvas标签,用法非常简单。可以轻松而准确地实现浮动图像的文字环绕效果。
6.columnizer
columnizer jquery plugin将自动以报纸列格式来布局您的内容。您可以指定列宽或列的静态数量。而且,当然,这很容易使用!columnizer会将css类添加到它创建的列中。每列将有一个“列”类名。第一列将有“第一”,最后一列将有“最后”。这使您可以更轻松地定位css标记中的特定列。
github:https://github.com/adamwulf/columnizer-jquery-plugin
7:columns
jqueryjson数据转换为html表插件columns
github:https://github.com/eisenbraun/columns
columns创建json数据转化为html方法 引用jquery库1.7或更高版本和columns插件文件,列是将json数据创建为可排序,可搜索和分页的html表格的简单方法。所有你需要的是提供的数据,和列将完成其余的。因为columns动态地创建了所有必要的html,所以唯一需要的html是一个空的html元素,比如一个<p>标签,在初始化时使用相应的id。
以上就是处理web页面层布局的jquery插件的7种办法的详细内容。