Question

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

我需要通过Jquery UI 弹出注册表单。我已经 一个按下按钮了显示用户注册的弹出窗体 。

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

在dwn vting之前思考。

谢谢。

Answer 1

 <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  
                } 
            });
    }

我希望你现在清楚。

Answer 2

它已在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"/>

通过ASP.NET中的Jquery UI创建弹出注册表单

2 个答案: