jQuery之排序组件的深入解析
178 浏览量
2021-01-19
20:37:02
上传
评论
收藏 147KB PDF 举报
jQuery之排序组件的深入解析之排序组件的深入解析
1：排序：排序(Sortable)组件可以将页面上的一组元素变成可排序的组件可以将页面上的一组元素变成可排序的，可用于定义一个可排序的元素列表，然后，通过拖动鼠标可
以调整元素在列表中的位置
$(‘.selector’).sortable(options);
简单实例：简单实例：
代码如下:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>sortable组件</title>
<script language=”javascript” src=”js/jquery-1.4.2.min.js”></script>
<script type=”text/javascript” src=”js/jquery.ui.core.js”></script>
<script type=”text/javascript” src=”js/jquery.ui.widget.js”></script>
<script type=”text/javascript” src=”js/jquery.ui.mouse.js”></script>
<script type=”text/javascript” src=”js/jquery.ui.sortable.js”></script>
<link href=”CSS/base/jquery.ui.all.css” rel=”stylesheet” type=”text/css” />
<style type=”text/css”>
body {
text-align:center;
margin:0 auto;
padding:0;
}
#wrap {
margin: 10px auto 10px auto;
padding: 5px;
width: 450px;
height:300px;
background: #fff;
border: 5px solid #000;
}
h1 {
color:#006;
font-size:24px;
font-weight:bold;
margin-bottom:2px;
text-align:center;
}
#sortable {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
}
#sortable li {
margin: 3px;
padding: 0.4em;
font-size: 16px;
height: 18px;
}
#sortable li span {
position: absolute;
margin-left: -1.3em;
}
</style>
<script type=”text/javascript”>
$(document).ready(function(){
$(“#sortable”).sortable(); //将sortable变成可排序的
$(“#sortable”).disableSelection(); //使文本不可被选中
});
</script>
</head>
<body>
<div id=”wrap”>
<h1>拖动鼠标调整下列选项的顺序</h1>
weixin_38576045
- 粉丝: 6
- 资源: 882
最新资源
- Python 程序语言设计模式思路-行为型模式：职责链模式：将请求从一个处理者传递到下一个处理者
- 9241703124789646.16健身系统2.apk
- postgresql-16.3-1-windows-x64.exe
- Python 程序语言设计模式思路-结构型模式：装饰器讲解及利用Python装饰器模式实现高效日志记录和性能测试
- 基于YOLOv5和DeepSORT的多目标跟踪仿真与记录
- Python 程序语言设计模式思路-创建型模式：原型模式：通过复制现有对象来创建新对象，面向对象编程
- 卸载软件geek卸载软件geek
- Python 程序语言设计模式思路-创建型模式：单例模式，确保一个类的唯一实例（装饰器）面向对象编程、继承
- skywalking-plugins.jar skywalking-alarm.jar
- 独栋别墅图纸D020-两层-10.00&11.00米- 施工图.dwg
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
评论0