jQuery-UI基础学习（1）

时间：2022-12-02 20:47:23

使用jQuery-UI需要到官网下载

  • jquery-ui.min.js
  • jquery-ui.min.css

官网地址：http://api.jqueryui.com

使用时需要引入：

<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/app.js"></script>
<link type="text/css" href="css/jquery-ui.min.css" rel="stylesheet">

jQuery-UI demo1:

index.html

<!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>
<script src="js/app.js"></script>
<link type="text/css" href="css/jquery-ui.min.css" rel="stylesheet">
</head>
<body>
<a href="http://www.xxxx.com" id="a_btn">xxx许愿</a>
<div style="width: 100px;height: 100px;border: 2px solid red;" id="div"></div>
</body>
</html>

app.js

$(document).ready(function(){
   $("#a_btn").button();//按钮效果
   $("#div").draggable();//div可以拖动
});

效果图:

jQuery-UI基础学习（1）

jQuery-UI demo2:


index2.html

<!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>
<script src="js/app2.js"></script>
<link type="text/css" href="css/jquery-ui.min.css" rel="stylesheet">
</head>
<body>
<div style="width: 100px;height: 100px;border: 2px solid red;" id="div"></div>
<div style="width: 200px;height: 200px;border: 2px solid green;" id="div2"></div>
</body>
</html>

app2.js

$(document).ready(function(){
    $("#div").draggable();
    $("#div2").droppable();
    $("#div2").on("drop",function(event,ui){
        $("#div2").text("drop事件");
    });
});

效果：

jQuery-UI基础学习（1）

jQuery UI demo3( 可拖动大小的div)


index3.html

<!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>
<script src="js/app3.js"></script>
<link type="text/css" href="css/jquery-ui.min.css" rel="stylesheet">
</head>
<body>
<div style="width: 200px;height: 200px;background-color: #007fff;" id="div"></div>
</body>
</html>

app3.js

$(document).ready(function(){
    $("#div").resizable();
});

效果图：

jQuery-UI基础学习（1）

**

jQuery UI demo4(selectable)
index4.html

<!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>
<script src="js/app4.js"></script>
<link type="text/css" href="css/jquery-ui.min.css" rel="stylesheet">
<style type="text/css">
.ui-selected{
background-color: #007fff;
}
</style>
</head>
<body>
<strong>谁长的最好看?</strong>
<ui id="select">
<li id="right">我</li>
<li>是我</li>
<li>还是我</li>
</ui>
<a href="#" id="btn">提交</a>
</body>
</html>

app4.js

/**
 * Created by rayootech on 16/7/12.
 */

$(document).ready(function(){
   $("#btn").button();
    $("#select").selectable();
    $("#btn").on("click",function(){
if($("#right").hasClass("ui-selected")){
           alert("恭喜你答对啦!");
       }
    });
});

jQuery UI demo5（可拖动排序）


index5.html

<!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>
<script src="js/app5.js"></script>
<link type="text/css" href="css/jquery-ui.min.css" rel="stylesheet">
</head>
<body>
<strong>谁长的最好看?</strong>
<ui id="sort">
<li>我</li>
<li>是我</li>
<li>还是我</li>
</ui>
</body>
</html>

app5.js

/**
 * Created by rayootech on 16/7/12.
 */
$(document).ready(function() {
    $("#sort").sortable();
});
标签：

相关文章