Home >Web Front-end >JS Tutorial >Sharing of jQuery plug-ins that handle web page layer layout

Sharing of jQuery plug-ins that handle web page layer layout

小云云
小云云Original
2018-03-21 09:56:151217browse

This article mainly shares with you the jQuery plug-in that handles web page layer layout. I hope it can help you.

1.UI.Layout jQuery UI layout plug-in

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

Use size 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

Official website: https://masonry.desandro.com/?resources/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, such as items or HTML elements in an HTML5 Canvas drawing. 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 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 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. The 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

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

Columnizer The 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

jQuery JSON data converted to html table plug-in Columns

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

Columns creates JSON data converted to HTML method Referencing 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 the necessary HTML dynamically, the only HTML required is an empty HTML element, such as a

tag, with the corresponding id when initialized.

Related recommendations:

jquery plug-in development tab production technology sharing

Detailed explanation of jQuery Using and closing the plug-in artDialog.js

How to understand the Jquery plug-in

The above is the detailed content of Sharing of jQuery plug-ins that handle web page layer layout. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn