0

jQuery UI ダイアログとメニューの両方を使用しています。ダイアログを開いて、メニューの選択に応じて異なる効果を表示しようとしています。

ダイアログが開きますが、効果はありません。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>
4

1 に答える 1

0

デモ

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>
于 2014-07-14T11:48:03.633 に答える