JQuery UI,建立Dialog + Menu

摘要:JQuery UI,建立Dialog + Menu


<button id="opener" target='target'>Open APPXID Dialog</button><div id="dialog" ></div></span>
$("#dialog" ).ready(function() {
var dialog = $( "#dialog" );
var opener = $( "#opener" );
var menu = $('<div>');
var target = opener.attr('target'); 
opener.text('Get APP XID');
 
var size = 2;
var text_array = new Array(size);
text_array[0] = 'menu1';
text_array[1] = 'menu2';
text_array[2] = 'menu3';
 
var val_array = new Array(size);
val_array[0] = 'val1';
val_array[1] = 'val2';
val_array[2] = 'val3';
 
 
for (var i = 0; i < text_array.length; i++) 
{
var div = $('<div>');
var link = $('<a>');
var text = text_array[i];
 
link.css('width','270px').css('display','block').css("font-size","15px").css("text-decoration","none").css("padding","1px").button().css("font-size","12px").attr('href','#').text(text).appendTo(div);
link.attr('val',val_array[i]);
var f = function(){$('#'+target).val($(this).attr('val'));$( "#dialog" ).dialog( "close" );};
link.click(f);
div.appendTo(menu);
 
}
menu.appendTo(dialog);
menu.menu();
 
    $('#dialog').attr('title','Open Dialog');
 
    $( "#dialog" ).dialog({
      autoOpen: false,
      buttons: {
        "清空": function() {
   var target = opener.attr('target');
$('#'+target).val('');
$( this ).dialog( "close" );
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      }
    });
 
    $( "#opener" ).click(function() {
      $( "#dialog" ).dialog( "open" );
 return false;
    });
 
 
});