欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery UI

程序员文章站 2022-07-09 21:52:34
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 时感觉是是一通百通的,使用方法比较类似。可围绕上面三个方面学习。