我正在尝试在html页面中使用jqueryui对话框（http://docs.jquery.com/UI/Dialog）。
有没有人在网络上找到使用对话框小部件所需的javascript库的链接？
我从（http://jqueryui.com/demos/dialog/modal-message.html）获取的HTML代码如下 - 我认为链接到javascript库是个问题..
请多多帮助，谢谢。
<html lang="en">
<head>
<title>jQuery UI Dialog - Modal message</title>
<link type="text/css" href="/css/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="/js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="/js/ui/ui.core.js"></script>
<script type="text/javascript" src="/js/ui.draggable.js"></script>
<script type="text/javascript" src="/js/ui.resizable.js"></script>
<script type="text/javascript" src="/js/ui.dialog.js"></script>
<script type="text/javascript" src="/js/external/bgiframe/jquery.bgiframe.js"></script>
<link type="text/css" href="/css/demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
$("#dialog").dialog({
bgiframe: true,
modal: true,
buttons: {
Ok: function() {
$(this).dialog('close');
}
}
});
});
</script>
</head>
<body>
<div class="demo">
<div id="dialog" title="Download complete">
<p>
<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
Your files have downloaded successfully into the My Downloads folder.
</p>
<p>
Currently using <b>36% of your storage space</b>.
</p>
</div>
<!-- Sample page content to illustrate the layering of the dialog -->
<div class="hiddenInViewSource" style="padding:20px;">
<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>
<form>
<input value="text input" /><br />
<input type="checkbox" />checkbox<br />
<input type="radio" />radio<br />
<select>
<option>select</option>
</select><br /><br />
<textarea>textarea</textarea><br />
</form>
</div><!-- End sample page content -->
</div><!-- End demo -->
<div class="demo-description">
<p>Use a modal dialog to explicitly acknowledge information or an action before continuing their work. Set the <code>modal</code> option to true, and specify a primary action (Ok) with the <code>buttons</code> option.</p>
</div><!-- End demo-description -->
</body>
</html>
答案 0 :(得分：1)
它也是页面顶部的UI链接。
您可以使用“自定义下载构建器”仅下载所需内容。您将需要UI Core和Dialog。我还建议同时下载jQuery版本 - 有时库依赖于确切的jQuery版本。
下载将包含正常版本和缩小版本。
答案 1 :(得分：0)
我的猜测是你指向JavaScript UI文件的错误目录：
<script type="text/javascript" src="/js/ui/ui.core.js"></script>
<script type="text/javascript" src="/js/ui.draggable.js"></script>
是/js/ui/...还是/js/...？
至于使用哪些库，您只需要：
答案 2 :(得分：0)
您需要将jQuery和jQuery UI库下载到您的服务器上。你可以在这里找到它们：
根据你的代码......
...您需要将它们放入网站的/ js文件夹中。
如果您在本地测试HTML，请从“/ js”中删除“/”，在HTML文件旁边创建一个“js”文件夹，然后将您的javascript文件放在那里。
答案 3 :(得分：0)
我使用了themeroller工具http://jqueryui.com/themeroller/ 使用此工具，我可以下载使对话框工作所需的所有主题和js库。
javascript ajax库也托管在谷歌服务器上。
完整性代码如下:(引用从themeroller下载的css和javascript文件）。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery UI Example Page</title>
<link type="text/css" href="css/smoothness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript">
$(function(){
// Dialog
$('#dialog').dialog({
autoOpen: false,
width: 600,
buttons: {
"Ok": function() {
$(this).dialog("close");
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
// Dialog Link
$('#dialog_link').click(function(){
$('#dialog').dialog('open');
return false;
});
//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);
});
</script>
<style type="text/css">
/*demo page css*/
body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
.demoHeaders { margin-top: 2em; }
#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
ul#icons {margin: 0; padding: 0;}
ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;}
ul#icons span.ui-icon {float: left; margin: 0 4px;}
</style>
</head>
<body>
<h1>Welcome to jQuery UI!</h1>
<p style="font-size: 1.3em; line-height: 1.5; margin: 1em 0; width: 50%;">This page demonstrates the widgets you downloaded using the theme you selected in the download builder. We've included and linked to minified versions of <a href="js/jquery-1.3.2.min.js">jQuery</a>, your personalized copy of <a href="js/jquery-ui-1.7.2.custom.min.js">jQuery UI (js/jquery-ui-1.7.2.custom.min.js)</a>, and <a href="css/smoothness/jquery-ui-1.7.2.custom.css">css/smoothness/jquery-ui-1.7.2.custom.css</a> which imports the entire jQuery UI CSS Framework. You can choose to link a subset of the CSS Framework depending on your needs. </p>
<p style="font-size: 1.2em; line-height: 1.5; margin: 1em 0; width: 50%;">You've downloaded components and a theme that are compatible with jQuery 1.3+. Please make sure you are using jQuery 1.3+ in your production environment. <em>If you need jQuery UI components that work with an earlier version of jQuery, you can choose an older version in the <a href="http://jqueryui.com/download">jQuery UI download builder</a>.</em></p>
<p style="font-weight: bold; margin: 2em 0 1em; font-size: 1.3em;">YOUR COMPONENTS:</p>
<!-- Dialog NOTE: Dialog is not generated by UI in this demo so it can be visually styled in themeroller-->
<h2 class="demoHeaders">Dialog</h2>
<p><a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog</a></p>
<!-- ui-dialog -->
<div id="dialog" title="Dialog Title">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>