jQuery UI
程序员文章站
2022-04-06 10:57:53
jQuery UI 其建立在 jQuery JavaScript 库上。大致涉及三方面：用户界面交互（与鼠标交互相关的内容）、特效（提供丰富的动画）、小部件（主要是一些界面的扩展）及主题 先来看一个用jQuery UI实现一个简单的选择题 Interactions主要包括（droppable,res ......
jQuery UI
其建立在 jQuery JavaScript 库上。大致涉及三方面：用户界面交互（与鼠标交互相关的内容）、特效（提供丰富的动画）、小部件（主要是一些界面的扩展）及主题
先来看一个用jQuery UI实现一个简单的选择题
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<link rel="stylesheet" href="css/jquery-ui.min.css"/>
<style>
/*在审查元素得知jquery-ui源码中是由ui-selected控制其颜色，这使得我们可以设置自己想要的效果*/
/*也可用自定义的主题theme*/
.ui-selected{
background-color: lightskyblue;
}
</style>
</head>
<body>
<script>
$(document).ready(function(){
$("#btn").button();
$("#select").selectable();//可以以a标签做按钮使用
$("#btn").on("click",function(){
if($("#right").hasClass("ui-selected")){
alert("恭喜答对了！");
}
});
});
</script>
<strong>窈窕淑女下一句是</strong>
<ul id="select">
<li>A.不知道</li>
<li>B.忘记了</li>
<li id="right">C.君子好逑</li>
</ul>
<a href="#" id="btn">提交</a>
</body>
</html>
Interactions主要包括（droppable,resizeable,selectable,sortable,draggable）
在学习jQuery UI 时感觉是是一通百通的，使用方法比较类似。可围绕上面三个方面学习。
上一篇： php实现备份数据库
推荐阅读