页面内容排序插件jSort的使用
当页面列表内容很多的时候,我们可能需要将内容按照某个方式进行排序,比如按照字母或者大小等排序。本文将使用排序插件jSort来对页面内容进行排序。
jSort插件可以对页面任何内容进行排序(tables, lists, div elements),跨浏览器兼容且非常轻巧。
XHTML
首先在head部分引入jquery库和jSort插件。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/
jquery.min.js"></script>
<script type="text/javascript" src="jquery.jsort.0.4.js"></script>
然后再body直接加入如下代码:
<ul id="nav">
<li id="asc_btn">按标题↑</li>
<li id="desc_btn">按标题↓</li>
</ul>
<div id="divs">
<div>
<img src="images/s1.jpg" alt="" />
<h3 class="title">1.北京利比亚驻华大使馆升起反对派国旗</h3>
<p>8月22日,北京利比亚驻华大使馆,门前的国旗已经更换成了反对派的国旗。22日上午11点左右,
记者电话采访了利比亚驻华使馆,一位中方工作人员告诉记者,目前未接到闭馆和工作调整的通知,使馆人员
应该会照常上班。</p>
<p><a href="#">查看详情</a></p>
</div>
....多个div
</div>
可以看出HTML结构由两个控制按钮,和内容呈现区div#divs组成。
CSS
使用css将html页面美化。
#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}
#divs div{height:180px; margin:10px 0px; padding:15px; background:#f7f7f7;
border-bottom:1px solid #ddd}
#divs div img{float:left; width:240px; height:160px; margin:10px}
#divs div h3{line-height:24px; margin:10px 5px; font-size:16px; color:#456}
#divs div p{line-height:22px; margin:6px 5px}
jQuery
当单击控制按钮的时候,调用jSort插件将内容进行排序,请看代码:
$("#asc_btn").click(function(){
$("#divs").jSort({
sort_by: "h3.title",
item: "div",
order: "asc"
});
});
jSort插件提供几个参数可配置:
item:指向需要排序的html内容元素,默认为div,本例中是排序div中的内容。
sort_by:指向item内需要排序的元素,默认为p,本例中要排序的是h3.title。
order:排序方式,asc-顺序,desc-倒序,默认为asc。
is_num:是否按按数字大小排序,默认是false。
sort_by_attr:是否按照html元素属性进行排序,默认为false。
attr_name:属性名称,如果sort_by_attr设置为true,则可以按照对应元素的属性进行排序。如果需要排序的是中文字符串,最好设置按照属性进行排序,属性的值可以是字母或者数字之类的。
关于jSort插件的更多信息请访问:http://do-web.com/jsort/overview
页面内容排序插件jSort的使用的更多相关文章
- jQuery.smoove — jQuery和CSS3炫酷滚动页面内容元素动画特效插件
插件介绍: jQuery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件.该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转. ...
- 响应式内容滑动插件jQuery.bxSlider
bxSlider特性 1.充分响应各种设备,适应各种屏幕: 2.支持多种滑动模式,水平.垂直以及淡入淡出效果: 3.支持图片.视频以及任意html内容: 4.支持触摸滑动: 5.支持Firefox,C ...
- 基于Metronic的Bootstrap开发框架经验总结(9)--实现Web页面内容的打印预览和保存操作
在前面介绍了很多篇相关的<Bootstrap开发框架>的系列文章,这些内容基本上覆盖到了我这个Bootstrap框架的各个主要方面的内容,总体来说基本达到了一个稳定的状态,随着时间的推移可 ...
- MixItUp:超炫!基于 CSS3 & jQuery 的过滤和排序插件
MixItUp 是一款轻量,但功能强大的 jQuery 插件,提供了对分类和有序内容的美丽的动画过滤和排序功能.特别适合用于作品集网站,画廊,图片博客以及任何的分类或有序内容. 它是如何工作的? Mi ...
- Sortable – 简单灵活的 JavaScript 拖放排序插件
当需要在网站中添加拖放排序功能的时候,jQuery UI 的排序组件可能是最流行的解决方案.今天给大家介绍另一款简单灵活的 JavaScript 拖放排序插件——Sortable,它使用 HTML5 ...
- Flexslider - 响应式的 jQuery 内容滚动插件
FlexSlider 是一款轻量的响应式 jQuery 内容滚动插件,能够帮助你在项目轻松的创建漂亮的内容滚动效果.这款插件曾经连续多年入选 WDL 的年度最佳 jQuery 插件,值得大家在网站开发 ...
- web 页面内容优化管理与性能技巧
回想一下,以前我们不得不花费大量时间去优化页面内容(图片.CSS等等),如今用户有更快速的互联网链接,我们似乎能够使用更大的图像或更大的闪存文件,里面包含的有视频或者图片.然而,随着移动开发的兴起,我 ...
- Zclip复制页面内容到剪贴板兼容各浏览器
Zclip:复制页面内容到剪贴板兼容各浏览器 WEB开发中,要让用户复制页面中的一段代码.URL地址等信息,为了避免用户拖动鼠标再进行右键复制操作而可能出现的差错,我们可以直接在页面中放置一个复制按钮 ...
- Javascript和jQuery WordPress 图片轮播插件, 内容滚动插件,前后切换幻灯片形式显示
用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...
随机推荐
- July 6th, Week 28th Wednesday, 2016
Diligence is the mother of good fortune. 勤勉是好运之母. The mother of good fortune can be diligence, conti ...
- python如何一行输入多个值
python2的raw_input以及python3的input获取的是整行的字符串.读进来后,字符串有着著名的split可以根据分隔符拆解成子串组成的list. 对于list内的对象,需要的采取转换 ...
- JQ JSON数据类型
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- MVC – 9.mvc整体请求流程
1.请求管道 2~5微软自己的验证,我们一般不用. 在全局配置文件中-已经配置一个路由过滤器-为第7个事件注册了路由方法 1.在application_start中向静态路由表注册了路由数据,在管 ...
- GBDT原理实例演示 1
考虑一个简单的例子来演示GBDT算法原理 下面是一个二分类问题,1表示可以考虑的相亲对象,0表示不考虑的相亲对象 特征维度有3个维度,分别对象 身高,金钱,颜值 cat dating.txt ...
- Python 自然语言处理(1) 计数词汇
Python有一个自然语言处理的工具包,叫做NLTK(Natural Language ToolKit),可以帮助你实现自然语言挖掘,语言建模等等工作.但是没有NLTK,也一样可以实现简单的词类统计. ...
- Spring.Net学习之简单的知识点(一)
1.Spring.Net是一个开源的应用程序框架,可以简化开发主要功能(1)实现控制反转(IOC/DI),也就是不要直接new,依赖于接口(2)面向切面编程(AOP),就是向程序中利用委托注册事件简单 ...
- 【PHP构造方法和析构方法的使用】
构造方法:__construct,析构方法:__destruct 代码示例: <?php class Person { public $name; public $age; public fun ...
- php几个常用的概率算法(抽奖、广告首选)
做网站类的有时会弄个活动什么的,来让用户参加,既吸引用户注册,又提高网站的用户活跃度.同时参加的用户会获得一定的奖品,有100%中奖的,也有按一定概率中奖的,大的比如中个ipad.iphone5,小的 ...
- memcache(使用php操作memcache)
.概念 memcache 是一个高效的分布式的内存对象缓存系统,他可以支持把php的各种数据(数组,对象,基本数据类型)放在它管理的内存中 . 安装步骤 1.下载php_memcache.dll文件并 ...