Shulou(Shulou.com)06/01 Report--

This article is about to help you deal with Web page layer layout of the jQuery plug-in which are, the editor thinks it is very practical, so share it with you to learn, I hope you can get something after reading this article, say no more, follow the editor to have a look.

1.UI.Layout jQuery UI layout plug-in

Official website: http://layout.jquery-dev.com/index.cfm

Create advanced UI layouts with collapsible nested panels and a large number of options. Layouts can create any UI look you want; from simple titles or sidebars to complex applications with toolbars, menus, help panels, status bars, subforms, etc. Integrate and enhance other UI widgets such as tabs, accordions and dialogs to create a rich interface.

2.jQUery Masonry

Official website: https://masonry.desandro.com/?resources/jquery-masonry

The size and style of all projects are handled by your own CSS. The project size can be set as a percentage of the responsive layout

3.jLayout

The jLayout JavaScript library provides layout algorithms for layout components. A component is an abstraction; it can be implemented in a variety of ways, such as projects in HTML5 Canvas drawings or HTML elements. The jLayout library allows you to focus on drawing individual components rather than on how to arrange them on the screen.

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

4.jQuery pageSlide

Query pageSlide is a jQuery plug-in that controls the display and closure of a hidden page. JQuery expand the left and right side column plug-in PageSlide,pageslide plug-in function to achieve the reality hidden sidebar function. The plug-in can read another html, or it can be an element in the current page. The popular navigation menu display form, especially on the mobile phone or touch screen page, is still good.

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

5.jQSlickWrap

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

JQSlickWrap is a jQuery plug-in that can actually wrap content around an image. The plug-in uses HTML5 Canvas tags and is very simple to use. The text wrapping effect of floating image can be easily and accurately realized.

6.Columnizer

Official website: https://welcome.totheinter.net/columnizer-jquery-plugin/

Columnizer jQuery Plugin will automatically layout your content in newspaper column format. You can specify the column width or the static number of columns. And, of course, it's easy to use! Columnizer adds the CSS class to the column it creates. Each column will have a column class name. The first column will have "first" and the last column will have "last". This makes it easier for you to locate specific columns in the CSS tag.

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

7:Columns

Convert jQueryJSON data to html table plug-in Columns

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

The Columns create JSON data conversion to HTML method references the jQuery library 1.7 or later and Columns plug-in files, and columns are an easy way to create JSON data as sortable, searchable, and paged HTML tables. All you need is to provide the data, and the columns will complete the rest. Because Columns dynamically creates all the necessary HTML, the only HTML you need is an empty HTML element, such as a tag, with the corresponding id at initialization.

These are the jQuery plug-ins that help you deal with the layout of the Web page layer. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.