jqueryUI互动效果之selectable

最新推荐文章于 2023-07-30 13:00:29 发布

原创最新推荐文章于 2023-07-30 13:00:29 发布 · 449 阅读

0 ·

CC 4.0 BY-SA版权

jqueryUI 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个使用jQuery UI库创建的互动效果示例。该示例通过为列表项添加可选中状态，并结合按钮点击事件来判断用户是否正确选择了橘红色的水果。通过这个简单的例子，展示了jQuery UI的基本用法。

demo代码如下：注意：很多互动效果，可以参考jQueryUI的官方文档。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<!-- 引入jqueryUI的话，首先要引入jquery -->
	<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> 
	<!-- 引入jqueryUI的js文件 -->
	<script src="jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
	<!-- 引入jQueryUI的css文件 -->
	<link rel="stylesheet" type="text/css" href="jquery-ui-1.12.1.custom/jquery-ui.css">
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			font-size: 20px;
			list-style: none;
		}
		body {
			padding-left: 40px;
		}
		.ui-selected {
			background: red;
		}
	</style>
</head>
<body>
	<div>请选择哪个水果是橘红色的?</div>
	<ul>
		<li>a.苹果</li>
		<li id="right">b.橘子</li>
		<li>c.香蕉</li>
	</ul>
	<div class="btn">提交</div>
	<script type="text/javascript">
		$("ul").selectable();
		$(".btn").button();
		$(".btn").click(function(){
			if($("#right").hasClass("ui-selected")){
				alert("恭喜您答对了");
			}else{
				alert("不好意思，您的回答错误，请重新选择");
			}
		})
	</script>
</body>
</html>