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

This article introduces you how to sort the content of the page plug-in jSort, the content is very detailed, interested friends can refer to, I hope you can help.

When there is a lot of content in the list of pages, we may need to sort the content in a certain way, such as alphabetical or size. The editor will use the sorting plug-in jSort to sort the content of the page.

The jSort plug-in can sort any content on the page (tables, lists, p elements), cross-browser compatible and very lightweight.

XHTML

First of all, the jquery library and jSort plug-in are introduced in the head section.

Then add the following code directly to body:

By title ↑ by title ↓

1. The Libyan Embassy in Beijing raises the opposition flag.

The national flag in front of the Libyan Embassy in Beijing has been changed to that of the opposition on August 22. At about 11:00 on the 22nd, the reporter interviewed the Libyan Embassy in China by telephone. A Chinese staff member told the reporter that there was no notice of closure or work adjustment, and the embassy staff should go to work as usual.

View details

.... Multiple p

You can see that the HTML structure consists of two control buttons and the content rendering area p#ps.

CSS

Use css to beautify the html page.

# nav {width:100%;margin:10px auto;} # nav li {float:left; width:80px; height:24px; line-height:24px; margin-right:10px; border:1px solid # d3d3d3; background:#f7f7f7; text-align:center; cursor:pointer} # ps p {height:180px; margin:10px 0px; padding:15px; background:#f7f7f7; border-bottom:1px solid # ddd} # ps p img {float:left; width:240px; height:160px; margin:10px} # ps p h4 {line-height:24px Margin:10px 5px; font-size:16px; color:#456} # ps p p {line-height:22px; margin:6px 5px}

JQuery

When you click the control button, call the jSort plug-in to sort the content, as shown in the code:

("# asc_btn") .click (function () {$("# ps") .jSort ({sort_by: "h4.title", item: "p", order: "asc"});})

The jSort plug-in provides several configurable parameters:

Item: points to the html content elements that need to be sorted. The default is p, which in this case is the content in sorted p.

Sort_by: point to the elements in the item that need to be sorted. The default is p, which in this case is h4.title.

Order: sort mode, asc- order, desc- reverse order. Default is asc.

Is_num: whether to sort by numeric size. Default is false.

Sort_by_attr: whether to sort by html element attribute, default is false.

Attr_name: attribute name. If sort_by_attr is set to true, it can be sorted by the attributes of the corresponding element. If you need to sort a Chinese string, it is best to set it to sort by attribute, whose value can be alphabetic or numeric.

On how to sort the content of the page plug-in jSort to share here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

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.