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 时感觉是是一通百通的，使用方法比较类似。可围绕上面三个方面学习。

jQuery UI

jQuery UI

猜你喜欢