页面内容排序插件jSort使用方法


Posted in Javascript onOctober 10, 2015

当页面列表内容很多的时候,我们可能需要将内容按照某个方式进行排序,比如按照字母或者大小等排序。本文将使用排序插件jSort来对页面内容进行排序。
jSort插件可以对页面任何内容进行排序(tables, lists, div elements),跨浏览器兼容且非常轻巧。

运行效果图:

页面内容排序插件jSort使用方法

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的使用方法就介绍到这,大家动手操作一下吧!

Javascript 相关文章推荐
jQuery 下拉列表 二级联动插件分享
Mar 29 Javascript
快速使用Bootstrap搭建传送带
May 06 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
Nov 18 Javascript
微信小程序中input标签详解及简单实例
May 18 Javascript
angular.js中解决跨域问题的三种方式
Jul 12 Javascript
基于js中document.cookie全面解析
Sep 14 Javascript
Bootstrap实现翻页效果
Nov 27 Javascript
vue.js整合vux中的上拉加载下拉刷新实例教程
Jan 09 Javascript
vue中利用Promise封装jsonp并调取数据
Jun 18 Javascript
JavaScript内置对象之Array的使用小结
May 12 Javascript
vue实现员工信息录入功能
Jun 11 Javascript
vue-cropper插件实现图片截取上传组件封装
May 27 Vue.js
JavaScript子窗口调用父窗口变量和函数的方法
Oct 09 #Javascript
js中unicode转码方法详解
Oct 09 #Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
Oct 09 #Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
Oct 09 #Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
Oct 09 #Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
Oct 09 #Javascript
jQuery往返城市和日期查询实例讲解
Oct 09 #Javascript
You might like
php Smarty date_format [格式化时间日期]
2010/03/15 PHP
PHP设计模式 注册表模式(多个类的注册)
2012/02/05 PHP
php+mysqli事务控制实现银行转账实例
2015/01/29 PHP
PHP二进制与字符串之间的相互转换教程
2016/10/14 PHP
Span元素的width属性无效果原因及解决方案
2010/01/15 Javascript
在JavaScript中typeof的用途介绍
2013/04/11 Javascript
jQuery进行组件开发完整实例
2015/12/15 Javascript
jQuery+ajax读取并解析XML文件的方法
2016/09/09 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
2017/01/05 Javascript
基于jQuery实现数字滚动效果
2017/01/16 Javascript
一次围绕setTimeout的前端面试经验分享
2017/06/15 Javascript
react 父子组件之间通讯props
2018/09/08 Javascript
vue实现多个元素或多个组件之间动画效果
2018/09/25 Javascript
js根据需要计算数组中重复出现某个元素的个数
2019/01/18 Javascript
vue中使用vue-cli接入融云实现即时通信
2019/04/19 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
2020/08/31 Javascript
原生JavaScript实现弹幕组件的示例代码
2020/10/12 Javascript
Python实现的一个找零钱的小程序代码分享
2014/08/25 Python
在Django框架中设置语言偏好的教程
2015/07/27 Python
使用Django启动命令行及执行脚本的方法
2018/05/29 Python
Python进阶之全面解读高级特性之切片
2019/02/19 Python
浅析PyTorch中nn.Linear的使用
2019/08/18 Python
Python基础教程(一)——Windows搭建开发Python开发环境
2020/07/20 Python
香港钟表珠宝首饰商城:OneMallTime网摩间
2016/10/14 全球购物
英国电气世界:Electrical World
2019/09/08 全球购物
JBL加拿大官方商店:扬声器、耳机等
2020/10/23 全球购物
结构和类有什么异同
2012/07/16 面试题
轻化专业学生实习自我鉴定
2013/09/20 职场文书
老总助理工作岗位职责
2014/02/06 职场文书
2014学雷锋活动总结
2014/03/09 职场文书
党员活动日总结
2014/05/05 职场文书
霸气队列口号
2014/06/18 职场文书
银行求职自荐书
2014/06/25 职场文书
励志演讲稿300字
2014/08/21 职场文书
演讲比赛的活动方案
2014/08/28 职场文书
公司授权委托书范本
2014/09/18 职场文书