jQuery之选择组件的深入解析
118 浏览量
2020-10-27
06:14:04
上传
评论
收藏 69KB PDF 举报
jQuery之选择组件的深入解析之选择组件的深入解析
本篇文章是对jQuery中的选择组件进行了详细的分析介绍，需要的朋友参考下
1：选择：选择(Selectable)组件可以让用户页面上的一些元素变成可选择的组件可以让用户页面上的一些元素变成可选择的，用户可以通过单击元素或者拖动的方式来选择它们，
也可以
按住Ctrl键来选择不连续的元素
$('.selector').selectable(options);
但是在jQuery UI库中的主题包中并未提供ui-selecting和ui-selected类的样式，因此在使用选择组件时，还需要自己来创建这
些样式
复制代码 代码如下:
<!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>selectable组件</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.selectable.js"></script>
<style type="text/css">
h1 {
color:#006;
font-size:24px;
font-weight:bold;
margin-bottom:0px;
}
#feedback {
font-size: 1.4em;
}
#selectable .ui-selecting {
background: #FECA40;
}
#selectable .ui-selected {
background: #00BF00;
color: white;
}
#selectable {
list-style-type: none;
margin: 0;
padding: 0;
width: 85%;
}
#selectable li {
margin: 3px;
padding: 0.4em;
font-size: 16px;
height: 18px;
}
</style>
<link href="CSS/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function() {
$("#selectable").selectable();
});
</script>
</head>
<body>
<div class="demo">
<h1>新手上路</h1>
<ol id="selectable">
<li class="ui-widget-content">开通网银，百付宝为您一路护航</li>
<li class="ui-widget-content">认准标识，精选实力卖家任您选择</li>
<li class="ui-widget-content">收藏 + 购物车，逛街搜店更便捷</li>
评论0
最新资源