0

我是 jquery 的新手。只需要您的宝贵建议。

我需要通过 Jquery UI 弹出注册表单。我有一个按钮，当按下它时应该显示一个用于用户注册的弹出表单。

我已经下载了 Jquery UI，但不知道如何将它用于弹出表单？？

在 dwn vting 之前想一想。

谢谢你。

4

2 回答 2

0 
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
 <script src="http://code.jquery.com/ui/1.8.23/jquery-ui.min.js" type="text/javascript"></script>    


$(".btnClassName").live('click',function(){
    if($('div.ui-dialog').length){
        $('div.ui-dialog').remove();
    }


    var $dialog = $('<div>', {
        title: 'Registration Form'
    }).dialog({
        autoOpen: false,
        modal: true,
        width: 600,
        height: 500,
       closeOnEscape: false,

         buttons: {
        "Cancel": function() {
            $(this).dialog( "close" );
            $(this).dialog('destroy');
        }

        "Submit" : function(){
         //Here you will call another function that will take your form values
         //and post it to your php file to Insert
         getAndValidateForm();
         }
    }
    });

   var tab = '<div>Put your HTML here for the form!</div>';

    $('<div>').html(tab).appendTo($dialog);
    $dialog.dialog('open');
    return false;

});

 getAndValidateForm(){
 get your form values like this
 var name =  $("#id_of_name").val();
  //same for another elements
  //validate it like this
   if(!name){
    //name is not given.do what u want to do
     return false; 
    }

   //now make Ajax Request to your PHP file and post all your data

         $.post(your Url, {
                data : your data
            }, function(data){ 
                data = $.trim(data); 
                if(data){ 
                    //do what you want to do  
                } 
            });
    }

我希望你现在很清楚。

于 2012-09-04T09:26:43.457 回答
0

它已经在jqueryui.com的文档中

先导入jquery库

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

导入jquery库旁边的jqueryui库

<script src="http://code.jquery.com/ui/1.8.23/jquery-ui.min.js" type="text/javascript"></script>

.

<script type="text/javascript">
    $(document).ready(function(){
        $('#Register').click(function(){
            $('#RegistrationForm').dialog();
        });
    });
</script>
<div id="RegistrationForm">
  Your Registration Form contents here
</div>
<input type="button" id="Register"/>
于 2012-09-04T09:33:16.510 回答