如何在WP插件中实现jQuery UI对话框模式?

时间:2012-01-18 作者:Neal

我有一个WordPress插件,可以创建自定义的顶级菜单和子菜单。子菜单调用这个(参见下面的代码)BranchMaintenance PHP表单,它在一个表中显示分支,例如数据库,(使用$wpdb).

问题在于如何弹出jQuery UI对话框模式表单。毫无疑问,我的代码是负责的。。。代码中的未知变量outer/toplevel函数,如。$(function() {

我正在尝试操作我需要的脚本a)最初隐藏对话框表单(它显示在我的分支数据表上方)。。可能是弄错了b)调用时显示它(仍然按照原始演示代码)

<div class="wrap" id="main">
<form name="Sandwich Baron Branch Maintenance" method="post" action="<?php echo str_replace( \'%   7E\', \'~\', $_SERVER[\'REQUEST_URI\']); ?>">  



//This was placed in the head of a normal HTML form in the Demo \'http://jqueryui.com/demos/dialog/modal-        form.html\'...field validation is removed for now.
<script>
$(function() {
    // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
    //$( "#dialog:ui-dialog" ).dialog( "destroy" );


    $( "#dialog-form" ).dialog({
        autoOpen: false,
        height: 300,
        width: 350,
        modal: true,
        buttons: {
            "Create an account": function() {
                var bValid = true;
                allFields.removeClass( "ui-state-error" );


                if ( bValid ) {
                    //Appnds the data captured to the table in the main page
                    //$( "#users tbody" ).append( "<tr>" +
                    //  "<td>" + txtBrname.val() + "</td>" + 
                    //  "<td>" + txtStrAddress.val() + "</td>" + 
                    //  "<td>" + txtManager.val() + "</td>" +
                    //"</tr>" ); 
                    $( this ).dialog( "close" );
                }
            },
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        },
        close: function() {
            allFields.val( "" ).removeClass( "ui-state-error" );
        }
    });

    $( "#create-branch" )
        .button()
        .click(function() {
            $( "#dialog-form" ).dialog( "open" );
        });


});


</script>


<?php
function fn_DeleteBranch(Id)
{
   //$wpdb->   etc etc ; //deletes this branch (by Id) from the dbase
}
?>


<style>    
 body { font-size: 62.5%; }     
 label, input { display:block; }    
 input.text { margin-bottom:12px; width:95%; padding: .4em; }     
 fieldset { padding:0; border:0; margin-top:25px; }     
 h1 { font-size: 1.2em; margin: .6em 0; }     
 div#users-contain { width: 350px; margin: 20px 0; }     
 div#users-contain table 
{ margin: 1em 0; border-collapse: collapse; width: 100%; }    
    div#users-contain table td, div#users-contain table th 
{ border: 1px solid #eee;  padding: .6em 10px; text-align: left; }     
.ui-dialog .ui-state-error { padding: .3em; }     
.validateTips { border: 1px solid transparent; padding: 0.3em; } 

</style>

<?php
// Hook for adding Dialog form HOPEFULLY
add_action(\'admin_init\', "#dialog-form" );
add_action( \'admin_init\', \'my_Deregister_scripts\' ); 
add_action( \'admin_enqueue_scripts-options_page-{page}\', \'myplugin_admin_scripts\' ); 

function my_Deregister_scripts()  {        
   wp_deregister_script( \'jquery-ui\' );  //Deregister WP\'s version    
}  

function myplugin_admin_scripts(){
   //  syntax   wp_enqueue_script( $handle,$src,$deps,$ver,$in_footer );
   //  $src  = the url where the scripts are stored
   //  $in_footer Normally scripts are placed in the <head> section, so defaults to false

   //wp_register_script( \'jquery-ui\', plugins_url( \'js/jquery-ui.js\', __FILE__ ), array( \'jquery\' ) );
     wp_enqueue_script(\'jquery\');
     wp_enqueue_script(\'jquery-ui-core\');
     wp_enqueue_script(\'jquery-ui-dialog\');
wp_enqueue_script(\'jquery-ui-1.8.17.custom.min\' );
wp_enqueue_script(\'jquery-bgiframe-2.1.2\' );
wp_enqueue_script(\'jquery-ui-mouse\' );
wp_enqueue_script(\'jquery-ui-button\' );
wp_enqueue_script(\'jquery-ui-draggable\' );
wp_enqueue_script(\'jquery-ui-position\' );
wp_enqueue_script(\'jquery-ui-resizable\' );
wp_enqueue_script(\'jquery-effects-core\' );  
    wp_enqueue_script(\'jquery-ui-widget\' );

//jquery-ui-1.8.17.custom
    wp_enqueue_style(\'jquery-   style\', \'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/jquery-ui.css\');
}
?>


<div id="dialog-form" title="Branch Editing">
<p class="validateTips">All form fields are required.</p>

<form>
<fieldset>
    <label for="BrName">Branch Name</label>
    <input type="text" name="txtBrname" id="txtBrName" class="text ui-widget-content ui-corner-all" />
    <label for="Tel">Tel</label>
    <input type="text" name="txtTel" id="txtTel" value="" class="text ui-widget-content ui-corner-all" />



</fieldset>
</form>
</div>

<div id="users-contain" class="ui-widget">
<?php             
    echo "<table border=\'1\' cellpadding=\'0\' width=\'100%\'>"; 
    echo "<tr> 
    <th>ID</th> 
    <th>Branch Name</th> 
    <th>Express?</th> 
    <th>Str.Address</th> 
    <th>Area</th>
    <th>Manager</th>
    <th>Owner</th>
    <th>Tel</th>
    <th>Cell</th>
    <th>Email</th>
    <th>Edit</th>
    <th>delete</th>
  </tr>"; 

global $wpdb;
$myrows = $wpdb->get_results("SELECT * FROM wp_sbbranches");

    // loop through results of database query, displaying them in the table      
foreach ($myrows as $row) {               
            echo "<tr>"; 
            echo \'<td style="border:none;">\' .$row->BrId. \'</td>\'; 
            echo \'<td style="border:none;">\' .$row->BrName. \'</td>\'; 
            echo \'<td style="border:none;">\' .$row->BrTel. \'</td>\';

    echo \'<td style="border:none;"><button onclick="create-branch(\' . $row->Id. \')"></td>\';
            echo \'<td style="border:none;"><button onclick="fn_DeleteBranch(\' . $row->Id. \')"></td>\'; 

            echo "</tr>";  
    }  
    // close table> 
    echo "</table>";
?> 
<button id="create-branch(\' 0 \')" >Create new branch</button>
</div>

2 个回复
SO网友:Shane

虽然我不清楚你到底需要什么,也许我可以提供一些建议。

首先,各种网站上的文档都有您需要的一切,因此您应该访问WordPress Codex, 和jQuery UI examples.

Hooks

admin\\u init:您可以在此处取消注册/注册脚本。如果打算使用自定义jquery ui脚本,例如:

 function my_register_scripts()
 {
      wp_deregister_script( \'jquery-ui\' ); //Deregister WP\'s version
      wp_register_script( \'jquery-ui\', plugins_url( \'js/jquery-ui.js\', __FILE__ ), array( \'jquery\' ) ); //Register your own
 }
 add_action( \'admin_init\', \'my_register_scripts\' );
admin\\u菜单:添加插件页面,还为脚本挂接特定页面

 function my_menu()
 {
      $admin_page = add_menu_page(/*Look at the codex for the args, link below*/); //Add your page

      //use the $admin_page variable for targeted script loading

      add_action( \'admin_print_styles-\' . $admin_page, \'function_that_enqueues_css_here\' );
      add_action( \'admin_print_scripts-\' . $admin_page, \'function_that_enqueues_js_here\' );

 }
 add_action( \'admin_menu\', \'my_menu\' );

add_menu_page

EDIT: Dialog Example

下面是一个打开表单的简单模式对话框示例:

 $(document).ready(function(){
      $(\'#form-wrap\').dialog({
           autoOpen: true, //FALSE if you open the dialog with, for example, a button click
           title: \'My Form\',
           modal: true
      });
 });
上面的代码假定您有或其他id为“form wrap”的标记。把你的表格放在里面。

Folder Structure

我可能错了,但我觉得这没什么大不了的,我只是把我的。js文件夹中的js文件、css文件夹中的css等。。。

使用plugins_url() 将插件目录中的文件排入队列时。

这个jQuery UI Dialog\'s page 应该有你需要的所有例子。

当我使用这些对话框时,我通常会在页面上生成html(显示:无),并将其用于对话框弹出窗口。

希望这能有所帮助。

EDIT

此外,我认为在jQuery UI网站上定制自己的jQuery UI脚本将减少排队的文件。

EDIT 2

如果上面的代码是您正在使用的代码,则您的add\\u操作有错误。

 add_action(\'admin_init\', "#dialog-form" );
第二个参数应该是一个PHP函数,它看起来像HTML div的ID。

 add_action( \'admin_enqueue_scripts-options_page-{page}\', \'myplugin_admin_scripts\' ); 
我很确定{page}应该被您想要调用脚本的特定页面所替换。

如果jQuery是您的主要问题,我建议您可以在一个与您的站点无关的简单html页面上使用它,直到它正常工作为止,然后正确地使用挂钩。

SO网友:T.Todua

您应该执行以下操作:

add_action( \'admin_enqueue_scripts\',     \'admin_scripts\' ); 
function admin_scripts(){
    wp_enqueue_script( \'jquery-ui-dialog\' ); 
    wp_enqueue_style( \'wp-jquery-ui-dialog\' );
}
那么您应该使用:

jQuery(\'<div> Hii! <div>\').dialog({ modal:true, width:600 }); 

结束

相关推荐

如何在WordPress上正确包含jQuery-UI效果

我一直试图在我的wordpress主题中包含jquery ui效果(更具体地说是抖动效果)。到目前为止,我只能包含jQuery脚本,但我真的不知道在哪里放置ui脚本以及如何将它们排队。这是我的密码。这显然行不通: <?php wp_enqueue_script(\"jquery\"); ?> <?php wp_enqueue_script(\"jquery-ui-core\"); ?> <?php wp_head(); ?> <lin