Question

我正在使用jQuery UI Dialog和Menu。我正在尝试打开一个对话框，并根据菜单选项显示不同的效果。

对话框打开，但不会发生任何影响。我是jQuery和jQuery UI的新手。任何帮助将不胜感激。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery UI Effects Menu</title>
<style>
#menu {
width: 200px;
}
</style>
<link rel="stylesheet" href="css/custom/jquery-ui-1.10.3.custom.css">
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui-1.10.3.custom.js"></script>
<script>
$(function () {
$("#dialog").dialog({
    autoOpen: false
});

$("#menu").menu();

$("#menu").on(function(e,ui){
    var effect = $(this).attr("id");
    $("#dialog").dialog("option", "show", effect);
});

$("a").click(function (event) {
    $("#dialog").dialog("open");
});

});
</script>
</head>
<body>
<div id="dialog" title="Effects">
<p>Content of dialog</p>
</div>
<ul id="menu">
<li><a href="#" id="blind">Blind</a>
<li><a href="#" id="bounce">Bounce</a>
<li><a href="#" id="clip">Clip</a></li>
<li><a href="#" id="drop">Drop</a></li>
<li><a href="#" id="explode">Explode</a></li>
<li><a href="#" id="fade">Fade</a></li>
</ul>
</body>
</html>

Answer 1

<强> DEMO

JS代码：

 $(function() {
     $("#dialog").dialog({
    autoOpen: false
});

     $( "#menu" ).menu({
         select:function(event, ui){

             var effect = $(ui.item).find('a').attr('id');
             //alert(effect);

             $("#dialog").dialog("option","show",{ effect: effect, duration: 800 } );
             $("#dialog").dialog("open");
         }
     });
     $("input[type=button]").button();
});

HTML：

<div id="dialog" title="Effects">
<p>Content of dialog</p>
</div>
     <h3>Click on menu items to open dailog with different effects</h3>     
<ul id="menu">
<li><a href="#" id="blind">Blind</a>
<li><a href="#" id="bounce">Bounce</a>
<li><a href="#" id="clip">Clip</a></li>
<li><a href="#" id="drop">Drop</a></li>
<li><a href="#" id="explode">Explode</a></li>
<li><a href="#" id="fade">Fade</a></li>
</ul>

根据菜单选择显示具有效果的Dialong - jQuery UI

1 个答案: