jQuery-UI基础学习（1）

最新推荐文章于 2022-04-11 22:13:43 发布

小溪彼岸

最新推荐文章于 2022-04-11 22:13:43 发布

阅读量424

点赞数

分类专栏： # jQuery 文章标签： jQuery

本文链接：https://blog.csdn.net/zww1984774346/article/details/51887417

版权

jQuery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

使用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 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 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 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();
});

小溪彼岸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery-UI基础学习（1）

使用jQuery-UI需要到官网下载jquery-ui.min.jsjquery-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"></
复制链接

扫一扫