Отображение Dialong с эффектами в зависимости от выбора меню - jQuery UI

Question

Отображение Dialong с эффектами в зависимости от выбора меню - jQuery UI

0

Я использую 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>

user2761359 20 сен. 2013, в 20:55

Источник

Теги:

jquery

jquery-ui

jquery-ui-dialog

jquery-ui-menu

1 ответ

Ещё вопросы

Rahul Gupta · Answer 1 · 2014-07-14T09-56-00.000Z

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>