jQueryUI 1.10:jQuery 的用户界面库
jQuery UI是一套基于jQuery的用户界面扩展插件,它提供了丰富的Widget、交互式UI元素、视觉效果和主题等。以下是一个使用jQuery UI创建一个可拖动的对话框的简单示例:
首先,确保在HTML中包含了jQuery和jQuery UI的库:
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
然后,在HTML中添加一个对话框和一个按钮:
<div id="dialog" title="对话框标题" style="display: none;">
这是一个可拖动的对话框。
</div>
<button id="opener">打开对话框</button>
最后,使用jQuery UI的dialog
方法初始化对话框,并使其可拖动:
$(function() {
$("#dialog").dialog({
draggable: true,
resizable: false,
modal: false,
buttons: {
"关闭": function() {
$(this).dialog("close");
}
}
});
$("#opener").click(function() {
$("#dialog").dialog("open");
});
});
这段代码创建了一个可拖动的对话框,当用户点击按钮时打开对话框,并可以通过标题栏拖动对话框在屏幕上移动。
评论已关闭