jquery+输出ui+li

Jquery是一种流行的JavaScript框架。使用Jquery可以轻松地创建动态、交互式的网页。其中，输出UI界面通常使用Jquery的UI插件。下面我们来介绍如何使用Jquery的UI插件输出li列表。

!-- HTML代码 -->
    ul id="myList">
    li>
    列表项1/li>
    li>
    列表项2/li>
    li>
    列表项3/li>
    /ul>
    

首先，我们需要在HTML文件中导入Jquery和Jquery UI的库文件。

!-- 导入jquery库文件 -->
    script src="jquery-3.5.1.min.js">
    /script>
    !-- 导入jquery UI库文件 -->
    link rel="stylesheet" href="jquery-ui.min.css">
    script src="jquery-ui.min.js">
    /script>
    

接下来，我们使用Jquery UI中的sortable()函数将列表项设为可拖动。

!-- Jquery代码 -->
    script>
$( function() {
    $( "#myList" ).sortable();
    $( "#myList" ).disableSelection();
}
    );
    /script>

最后，我们在CSS样式中设置一些列表项的样式。

/* CSS样式 */#myList {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 60%;
    background-color: #f1f1f1;
    border: 1px solid #ddd;
}
#myList li {
    margin: 0 5px 5px 5px;
    font-size: 14px;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #ddd;
}
#myList li:hover {
    background-color: #ddd;
}
    

通过以上步骤，我们就可以使用Jquery UI插件输出一个美观、可交互的li列表了。效果如下：

• 列表项1
• 列表项2
• 列表项3

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！