Я написал небольшой плагин для Wordpress, который предназначен для поддержки данных веток aBiz. В области «Администратор» в новом пользовательском меню TopLevel и его подменю (код ниже взят из формы этого подменю. Плагин активирует и просто создает меню и подменю TopLevel.)
Но мой Div (всплывающее окно) (<div id="dialog-form")
показывает сразу.
Я использую jQuery(document).ready(function(){
и если я использую jQuery('#dialog-form').hide();
в нем или оповещаю об объекте, он там и все в порядке.
Остальное, например 'autoOpen' : false,
ничего не делает
<div class="wrap" id="main">
<form name="Sandwich Baron Branch Maintenance" method="post" action="<?php echo str_replace( '% 7E', '~', $_SERVER['REQUEST_URI']); ?>">
<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
add_action('admin_init', 'register_jquery_ui');
function register_jquery_ui() {
//apparently all that is required is the dependancy 'jquery-ui-dialog' (wp auto includes all this in the admin section, ...but whether that or this I have the same problem)
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-droppable’);
wp_enqueue_script( ‘jquery-form’ );
wp_enqueue_script('jquery-ui-position' );
wp_enqueue_script('jquery-ui-resizable' );
wp_enqueue_script('jquery-effects-core' );
wp_enqueue_script('jquery-ui-widget' );
wp_enqueue_style('jquery-style', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/jquery-ui.css');
// or A style available in WP
// wp_enqueue_style ('wp-jquery-ui-dialog');
// admin_enqueue_script ( 'my-modals-handle' ,'What bloody URL?' , array('jquery-ui-dialog')); // dependencies
}
?>
<script>
jQuery(document).ready(function(){
// jQuery('#dialog-form').hide(); //this works
var $info = jQuery("#dialog-form");
// alert("$info = " + $info); //this also works, shows we have the object, but the beneath does not.
//The rest is not working,...my div/dialog is visible immediately and not as a popup.(autoOpen is set to false....????)
$info.dialog({
'dialogClass' : 'wp-dialog',
'modal' : true,
'autoOpen' : false,
'closeOnEscape' : true,
'buttons' : {
"Close": function() {
jQuery(this).dialog('close');
}
}
});
$("#open-modal").click(function(event) {
event.preventDefault();
$info.dialog('open');
});
});
</script>
<div id="dialog-form" title="Branch Editing" style="background-color:yellow;border:1px solid black;width:200px;height:200px;">
<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="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>Tel</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>