7 Ways to Use jQuery Plug-ins to Handle Web Page Layout

This time I will bring you 7 ways to deal with the jQuery plug-in of Web page layer layout. The following is a practical case, let’s take a look.

1.UI.Layout jQuery UI layout plug-in

Create advanced UI layouts with collapsible nested panels and tons of options. Layouts can create any UI look you want; from a simple header or sidebar to a complex application with toolbars, menus, help panels, status bars, subforms, and more. Integrate and enhance other UI widgets such as tabs, accordions and dialogs to create rich interfaces.

2.jQUery Masonry

All item sizing and styling are handled by your own CSS. Item size can be set as a percentage of responsive layout

3.jLayout

jLayout JavaScript library provides a layout algorithm for laying out components. A component is an abstraction; it can be implemented in many ways.

For example, items or HTML elements in HTML5 Canvas drawings. The jLayout library allows you to focus on drawing individual components rather than how they are arranged on the screen.

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

4.jQuery pageSlide

Query pageSlide is a jQuery Plug-in, which can control the display and closing of a hidden page. jQuery expands the left and right side column plug-in PageSlide, and the pageslide plug-in function realizes the function of actually hiding the sidebar. The plug-in can read another HTML or an element in the current page. It is currently a popular navigation menu display form, especially on mobile phones or touch screen pages. The effect 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 images. This plug-in uses the HTML5 Canvas tag and is very simple to use. Text wrapping effects on floating images can be easily and accurately achieved.

6.Columnizer

Columnizer jQuery Plugin will automatically lay out your content in newspaper column format. You can specify column widths or a static number of columns. And, of course, it's easy to use! Columnizer will add CSS classes to the columns 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 target specific columns in CSS markup.

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

7: Columns

jQueryJSON data conversion For the html table plugin Columns

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

Columns create JSON data to HTML method reference jQuery library 1.7 or higher and the Columns plugin file , columns is an easy way to create JSON data into sortable, searchable, and paginated HTML tables. All you need is to provide the data, and the columns will do the rest. Because Columns creates all necessary HTML dynamically, the only HTML required is an empty HTML element, such as a

tag, with the corresponding id when initialized.

The above is the detailed content of 7 Ways to Use jQuery Plug-ins to Handle Web Page Layout. For more information, please follow other related articles on the PHP Chinese website!