页面内容排序插件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 相关文章推荐
showModelessDialog()使用详解
Sep 21 Javascript
jQuery ui 1.7更新小结
Aug 15 Javascript
jquery 常用操作方法
Jan 28 Javascript
Jquery动态更改一张位图的src与Attr的使用
Jul 31 Javascript
JavaScript实现图片轮播的方法
Jul 31 Javascript
JavaScript获取图片像素颜色并转换为box-shadow显示
Mar 11 Javascript
Node.js的Express框架使用上手指南
Mar 12 Javascript
JavaScript修改作用域外变量的方法
Mar 25 Javascript
JavaScript绑定事件监听函数的通用方法
May 14 Javascript
JavaScript编写九九乘法表(两种任选)
Feb 04 Javascript
javascript 中iframe高度自适应(同域)实例详解
May 16 Javascript
vue store之状态管理模式的详细介绍
Jun 13 Javascript
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
在任意字符集下正常显示网页的方法二(续)
2007/04/01 PHP
php全局变量和类配合使用深刻理解
2013/06/05 PHP
在CentOS系统上从零开始搭建WordPress博客的全流程记录
2016/04/21 PHP
laravel 解决路由除了根目录其他都404的问题
2019/10/18 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
JavaScript EasyPager 分页函数
2011/05/25 Javascript
jQuery当鼠标悬停时放大图片的效果实例
2013/07/03 Javascript
在AngularJS中使用AJAX的方法
2015/06/17 Javascript
充分发挥Node.js程序性能的一些方法介绍
2015/06/23 Javascript
微信小程序使用第三方库Immutable.js实例详解
2016/09/27 Javascript
JavaScript变量声明var,let.const及区别浅析
2018/04/23 Javascript
详解create-react-app 自定义 eslint 配置
2018/06/07 Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
2018/08/24 Javascript
[00:15]TI9地铁玩家打卡
2019/08/11 DOTA
Python内置函数bin() oct()等实现进制转换
2012/12/30 Python
python实现数组插入新元素的方法
2015/05/22 Python
python中关于for循环的碎碎念
2017/06/30 Python
启动targetcli时遇到错误解决办法
2017/10/26 Python
django实现用户登陆功能详解
2017/12/11 Python
对python产生随机的二维数组实例详解
2018/12/13 Python
numpy concatenate数组拼接方法示例介绍
2019/05/27 Python
Python字符串格式化输出代码实例
2019/11/22 Python
Python面向对象中类(class)的简单理解与用法分析
2020/02/21 Python
Python requests接口测试实现代码
2020/09/08 Python
英国亚马逊官方网站:Amazon.co.uk
2019/08/09 全球购物
电气自动化专业职业规划范文
2014/02/16 职场文书
《珍珠泉》教学反思
2014/02/20 职场文书
毕业生写求职信的要点
2014/03/04 职场文书
协议书范本
2014/04/23 职场文书
校园标语大全
2014/06/19 职场文书
本科应届生求职信
2014/08/05 职场文书
2015新学期开学寄语
2015/02/26 职场文书
2015年中个人总结范文
2015/03/10 职场文书
毕业论文指导老师意见
2015/06/04 职场文书
2016年教代会开幕词
2016/03/04 职场文书
2019初中学生入团申请书
2019/06/27 职场文书