jquery dialog（）带表单-选择一个选项单击“确定”时会打开一个新对话框
我有一个对话框，有两个单选选项“存在”和“上传”，还有一个确定按钮。单击“确定”时，根据您选择的单选按钮，我希望显示不同的对话框。我尝试了下面的代码，因此当您选择“存在”时，会打开一个带有html id=chooseImage的框，但我无法让它工作。 我该怎么做？ 这是我的代码：jquery dialog（）带表单-选择一个选项单击“确定”时会打开一个新对话框,jquery,dialog,Jquery,Dialog,我有一个对话框，有两个单选选项“存在”和“上传”，还有一个确定按钮。单击“确定”时，根据您选择的单选按钮，我希望显示不同的对话框。我尝试了下面的代码，因此当您选择“存在”时，会打开一个带有html id=chooseImage的框，但我无法让它工作。 我该怎么做？ 这是我的代码： $(function() { $( "#dialog-form" ) .dialog({ autoOpen: false,
$(function() {
$( "#dialog-form" )
.dialog({
autoOpen: false,
title: "Add Images",
buttons: {"Okay": function() {$("#form").submit();
if($("#exist").is(":checked")) {
//need to add some code to show new dialog box;
$(this).dialog("close");
}
if($("#upload").is(":checked")) {
// need to add some code to show new dialog box;
// doesn't work $("#chooseImage").dialog( title: "hello");
$(this).dialog("close"); }
}},
//{"Cancel": function() { $(this).dialog("close"); }},
draggable: false,
resizable: false
});
$("#addImage")
.click(function() {
$( "#dialog-form" ).dialog("open");
});
});
});
'<div id="chooseImage">' self::chooseFromExisiting($dbr); '</div>'
public static function fnAddImages(){
global $wgOut, $wgHooks, $wgUser, $wgRequest;
// import addimage javascript and css files
$wgOut->addScript('<script type="text/javascript" src="extensions/AddImages/addimages.js"></script>');
$wgOut->addScript('<script type="text/javascript" src="extensions/AddImages/js/jquery-1.7.1.min.js"></script>');
$wgOut->addScript('<script type="text/javascript" src="extensions/AddImages/js/jquery-ui-1.7.3.custom.min.js"></script>');
$wgOut->addScript('<link type="text/css" href="extensions/AddImages/css/blitzer/jquery-ui-1.7.3.custom.css" rel="Stylesheet" />');
$wgOut->addScript("<style>@import url( extensions/AddImages/style.css);</style>");
//Add Image button with popup onclick
$wgOut->addScript('<script type="text/javascript">
( function($) {
$(document).ready(function() {
$(function() {
//var exist = $( "#exist" );//var upload = $( "#upload" );
$( "#dialog-form" )
.dialog({
autoOpen: false,
title: "Add Images",
buttons: {"Okay": function() {$("#form").submit();
if($("#exist").is(":checked")) {
$(this).dialog("close");
$("#chooseImage").dialog("open");
$("#chooseImage")
.dialog({
autoOpen:false,
title: "Choose from existing Images",
draggable: false,
//resizable: false,
height: "auto",
width: 460
});
};
if($("#upload").is(":checked")) {
$( "#chooseImage" ).hide();
$(this).dialog("close");
$("#uploadImage").dialog("open");
$("#uploadImage")
.dialog({
autoOpen:false,
title: "Upload Image",
height: "auto",
width: 460
});
};
}},
});
$("#addImage")
.click(function() {
$( "#dialog-form" ).dialog("open");
});
});
});
} ) ( jQuery );
</script>');
//add from exisiting
$wgOut->addHTML('<div id="chooseImage">');
$out = self::chooseFromExisiting($dbr);
$wgOut->addHtml($out);
$wgOut->addHTML('</div>');
//upload image
$wgOut->addHTML('<div id="uploadImage">');
$form = self::uploadImage();
$wgOut->addHtml($form);
$wgOut->addHTML('</div>');
//form
$wgOut->addHTML('<div id="dialog-form">');
$form = self::getFormHtml();
$wgOut->addHtml($form);
$wgOut->addHTML('</div>');
$wgOut->addHTML('<button id="addImage">Add Image</button>');
//retun true to run hook function
return true;
}
public static function getFormHtml(){
global $wgOut;
$wgOut->addHTML('<form>
<input type="radio" name="addimage" value="exists already" id="exist"> Choose from Exisiting
<br />
<input type="radio" name="addimage" value="upload now" id="upload"> Upload your Own
</form>');
}
public static function chooseFromExisiting( $dbr ){
global $wgOut;
$wgOut->addScript('<script type="text/javascript">
( function($) {
$(document).ready(function() {
$(function() {
$( "#alignment" )
.dialog({
autoOpen: false,
title: "Align Images",
//draggable: false,
resizable: false,
buttons: {"Okay": function() {$(this).dialog("close");}},
});
$("#imageSetting")
.click(function() {
$( "#alignment" ).dialog("open");
});
});
});
} ) ( jQuery );
</script>');
$wgOut->addHTML('<div id="alignment">');
$form = self::alignment();
$wgOut->addHtml($form);
$wgOut->addHTML('</div>');
//$wgOut->addHTML('<button id="imageSetting">Add</button>');
$dbr = wfGetDB( DB_SLAVE );
$results = $dbr->query("SELECT DISTINCT img_name, img_description, img_width, img_height, img_user_text, img_timestamp
FROM wiki_image
ORDER BY img_timestamp ASC
");
$uploaded = array();
while( $row = $dbr->fetchObject( $results ) ) {
$uploaded[] = array( $row->img_name, $row->img_width, $row->img_height, $row->img_user_text, $row->img_description);
}
$wgOut->addHtml('<table><tr><td></td><th>Name</th><th>Thumbnail</th><th>Dimensions</th><th>User</th><th>Comment</th></tr>');
foreach($uploaded as $upload){
$wgOut->addHTML('<tr><td><button id="imageSetting">Add</button></td><td>');
$wgOut->addHTML($upload[0]);
$wgOut->addHtml('</td><td>');
$wgOut->addHtml('thumnail image');
$wgOut->addHtml('</td><td>');
$wgOut->addHTML($upload[1]);
$wgOut->addHTML('x');
$wgOut->addHTML($upload[2]);
$wgOut->addHtml('</td><td>');
$wgOut->addHTML($upload[3]);
$wgOut->addHtml('</td><td>');
$wgOut->addHtml('comment');
$wgOut->addHtml('</td><td>');
}
$wgOut->addHtml('</table>');
}
public static function alignment(){
global $wgOut;
$wgOut->addHtml('<form>');
$wgOut->addHtml('<table>');
// image setting
$wgOut->addHTML( "<tr><td>Image Setting </td></tr>" );
$wgOut->addHTML( "<tr><td><input type=\"text\" value=\"400x400\" id=\"size\" size=\"23\" maxlength=\"12\" onkeyup=\"createMarkup(this)\" onmouseout=\"createMarkup(this)\"/> px (width x height)</td></tr>" );
// radio buttons for alignment left/center/right
$wgOut->addHTML( "<tr> <td>Alignment: </td> </tr>" );
$wgOut->addHTML( "<tr><td>");
$wgOut->addHTML( "<input type=\"radio\" id=\"left\" name=\"position\" value=\"left\" onchange=\"createMarkup(this)\"/>left" );
$wgOut->addHTML( "</td><td>");
$wgOut->addHTML( "<input type=\"radio\" id=\"center\" name=\"position\" value=\"center\" onchange=\"createMarkup(this)\"/>center" );
$wgOut->addHTML( "</td><td>" );
$wgOut->addHTML( "<input type=\"radio\" id=\"right\" name=\"position\" value=\"right\" checked=\"checked\" onchange=\"createMarkup(this)\"/>right" );
$wgOut->addHTML( "</td></tr>" );
$wgOut->addHTML( "<tr><td>" );
//wgOut->addHtml('<input type="submit" value="OK" name="" id=""/> <input type="button" value="Cancel" class="close" />');
$wgOut->addHTML( "</td></tr>" );
$wgOut->addHtml('</table>');
$wgOut->addHtml('</form>');
}
public static function uploadImage(){
global $wgOut;
$wgOut->addHtml('Upload an Image from your computer');
}
public static function fnAddImages(){
global $wgOut, $wgHooks, $wgUser, $wgRequest;
// import addimage javascript and css files
$wgOut->addScript('<script type="text/javascript" src="extensions/AddImages/addimages.js"></script>');
$wgOut->addScript('<script type="text/javascript" src="extensions/AddImages/js/jquery-1.7.1.min.js"></script>');
$wgOut->addScript('<script type="text/javascript" src="extensions/AddImages/js/jquery-ui-1.7.3.custom.min.js"></script>');
$wgOut->addScript('<link type="text/css" href="extensions/AddImages/css/blitzer/jquery-ui-1.7.3.custom.css" rel="Stylesheet" />');
$wgOut->addScript("<style>@import url( extensions/AddImages/style.css);</style>");
//Add Image button with popup onclick
$wgOut->addScript('<script type="text/javascript">
( function($) {
$(document).ready(function() {
$(function() {
//var exist = $( "#exist" );//var upload = $( "#upload" );
$( "#dialog-form" )
.dialog({
autoOpen: false,
title: "Add Images",
buttons: {"Okay": function() {$("#form").submit();
if($("#exist").is(":checked")) {
$(this).dialog("close");
$("#chooseImage").dialog("open");
$("#chooseImage")
.dialog({
autoOpen:false,
title: "Choose from existing Images",
draggable: false,
//resizable: false,
height: "auto",
width: 460
});
};
if($("#upload").is(":checked")) {
$( "#chooseImage" ).hide();
$(this).dialog("close");
$("#uploadImage").dialog("open");
$("#uploadImage")
.dialog({
autoOpen:false,
title: "Upload Image",
height: "auto",
width: 460
});
};
}},
});
$("#addImage")
.click(function() {
$( "#dialog-form" ).dialog("open");
});
});
});
} ) ( jQuery );
</script>');
//add from exisiting
$wgOut->addHTML('<div id="chooseImage">');
$out = self::chooseFromExisiting($dbr);
$wgOut->addHtml($out);
$wgOut->addHTML('</div>');
//upload image
$wgOut->addHTML('<div id="uploadImage">');
$form = self::uploadImage();
$wgOut->addHtml($form);
$wgOut->addHTML('</div>');
//form
$wgOut->addHTML('<div id="dialog-form">');
$form = self::getFormHtml();
$wgOut->addHtml($form);
$wgOut->addHTML('</div>');
$wgOut->addHTML('<button id="addImage">Add Image</button>');
//retun true to run hook function
return true;
}
public static function getFormHtml(){
global $wgOut;
$wgOut->addHTML('<form>
<input type="radio" name="addimage" value="exists already" id="exist"> Choose from Exisiting
<br />
<input type="radio" name="addimage" value="upload now" id="upload"> Upload your Own
</form>');
}
public static function chooseFromExisiting( $dbr ){
global $wgOut;
$wgOut->addScript('<script type="text/javascript">
( function($) {
$(document).ready(function() {
$(function() {
$( "#alignment" )
.dialog({
autoOpen: false,
title: "Align Images",
//draggable: false,
resizable: false,
buttons: {"Okay": function() {$(this).dialog("close");}},
});
$("#imageSetting")
.click(function() {
$( "#alignment" ).dialog("open");
});
});
});
} ) ( jQuery );
</script>');
$wgOut->addHTML('<div id="alignment">');
$form = self::alignment();
$wgOut->addHtml($form);
$wgOut->addHTML('</div>');
//$wgOut->addHTML('<button id="imageSetting">Add</button>');
$dbr = wfGetDB( DB_SLAVE );
$results = $dbr->query("SELECT DISTINCT img_name, img_description, img_width, img_height, img_user_text, img_timestamp
FROM wiki_image
ORDER BY img_timestamp ASC
");
$uploaded = array();
while( $row = $dbr->fetchObject( $results ) ) {
$uploaded[] = array( $row->img_name, $row->img_width, $row->img_height, $row->img_user_text, $row->img_description);
}
$wgOut->addHtml('<table><tr><td></td><th>Name</th><th>Thumbnail</th><th>Dimensions</th><th>User</th><th>Comment</th></tr>');
foreach($uploaded as $upload){
$wgOut->addHTML('<tr><td><button id="imageSetting">Add</button></td><td>');
$wgOut->addHTML($upload[0]);
$wgOut->addHtml('</td><td>');
$wgOut->addHtml('thumnail image');
$wgOut->addHtml('</td><td>');
$wgOut->addHTML($upload[1]);
$wgOut->addHTML('x');
$wgOut->addHTML($upload[2]);
$wgOut->addHtml('</td><td>');
$wgOut->addHTML($upload[3]);
$wgOut->addHtml('</td><td>');
$wgOut->addHtml('comment');
$wgOut->addHtml('</td><td>');
}
$wgOut->addHtml('</table>');
}
public static function alignment(){
global $wgOut;
$wgOut->addHtml('<form>');
$wgOut->addHtml('<table>');
// image setting
$wgOut->addHTML( "<tr><td>Image Setting </td></tr>" );
$wgOut->addHTML( "<tr><td><input type=\"text\" value=\"400x400\" id=\"size\" size=\"23\" maxlength=\"12\" onkeyup=\"createMarkup(this)\" onmouseout=\"createMarkup(this)\"/> px (width x height)</td></tr>" );
// radio buttons for alignment left/center/right
$wgOut->addHTML( "<tr> <td>Alignment: </td> </tr>" );
$wgOut->addHTML( "<tr><td>");
$wgOut->addHTML( "<input type=\"radio\" id=\"left\" name=\"position\" value=\"left\" onchange=\"createMarkup(this)\"/>left" );
$wgOut->addHTML( "</td><td>");
$wgOut->addHTML( "<input type=\"radio\" id=\"center\" name=\"position\" value=\"center\" onchange=\"createMarkup(this)\"/>center" );
$wgOut->addHTML( "</td><td>" );
$wgOut->addHTML( "<input type=\"radio\" id=\"right\" name=\"position\" value=\"right\" checked=\"checked\" onchange=\"createMarkup(this)\"/>right" );
$wgOut->addHTML( "</td></tr>" );
$wgOut->addHTML( "<tr><td>" );
//wgOut->addHtml('<input type="submit" value="OK" name="" id=""/> <input type="button" value="Cancel" class="close" />');
$wgOut->addHTML( "</td></tr>" );
$wgOut->addHtml('</table>');
$wgOut->addHtml('</form>');
}
public static function uploadImage(){
global $wgOut;
$wgOut->addHtml('Upload an Image from your computer');
}
由于语法错误，这实际上无法工作：$chooseImage.dialog title:hello；您应该检查控制台是否有任何错误
public static function fnAddImages(){
global $wgOut, $wgHooks, $wgUser, $wgRequest;
// import addimage javascript and css files
$wgOut->addScript('<script type="text/javascript" src="extensions/AddImages/addimages.js"></script>');
$wgOut->addScript('<script type="text/javascript" src="extensions/AddImages/js/jquery-1.7.1.min.js"></script>');
$wgOut->addScript('<script type="text/javascript" src="extensions/AddImages/js/jquery-ui-1.7.3.custom.min.js"></script>');
$wgOut->addScript('<link type="text/css" href="extensions/AddImages/css/blitzer/jquery-ui-1.7.3.custom.css" rel="Stylesheet" />');
$wgOut->addScript("<style>@import url( extensions/AddImages/style.css);</style>");
//Add Image button with popup onclick
$wgOut->addScript('<script type="text/javascript">
( function($) {
$(document).ready(function() {
$(function() {
//var exist = $( "#exist" );//var upload = $( "#upload" );
$( "#dialog-form" )
.dialog({
autoOpen: false,
title: "Add Images",
buttons: {"Okay": function() {$("#form").submit();
if($("#exist").is(":checked")) {
$(this).dialog("close");
$("#chooseImage").dialog("open");
$("#chooseImage")
.dialog({
autoOpen:false,
title: "Choose from existing Images",
draggable: false,
//resizable: false,
height: "auto",
width: 460
});
};
if($("#upload").is(":checked")) {
$( "#chooseImage" ).hide();
$(this).dialog("close");
$("#uploadImage").dialog("open");
$("#uploadImage")
.dialog({
autoOpen:false,
title: "Upload Image",
height: "auto",
width: 460
});
};
}},
});
$("#addImage")
.click(function() {
$( "#dialog-form" ).dialog("open");
});
});
});
} ) ( jQuery );
</script>');
//add from exisiting
$wgOut->addHTML('<div id="chooseImage">');
$out = self::chooseFromExisiting($dbr);
$wgOut->addHtml($out);
$wgOut->addHTML('</div>');
//upload image
$wgOut->addHTML('<div id="uploadImage">');
$form = self::uploadImage();
$wgOut->addHtml($form);
$wgOut->addHTML('</div>');
//form
$wgOut->addHTML('<div id="dialog-form">');
$form = self::getFormHtml();
$wgOut->addHtml($form);
$wgOut->addHTML('</div>');
$wgOut->addHTML('<button id="addImage">Add Image</button>');
//retun true to run hook function
return true;
}
public static function getFormHtml(){
global $wgOut;
$wgOut->addHTML('<form>
<input type="radio" name="addimage" value="exists already" id="exist"> Choose from Exisiting
<br />
<input type="radio" name="addimage" value="upload now" id="upload"> Upload your Own
</form>');
}
public static function chooseFromExisiting( $dbr ){
global $wgOut;
$wgOut->addScript('<script type="text/javascript">
( function($) {
$(document).ready(function() {
$(function() {
$( "#alignment" )
.dialog({
autoOpen: false,
title: "Align Images",
//draggable: false,
resizable: false,
buttons: {"Okay": function() {$(this).dialog("close");}},
});
$("#imageSetting")
.click(function() {
$( "#alignment" ).dialog("open");
});
});
});
} ) ( jQuery );
</script>');
$wgOut->addHTML('<div id="alignment">');
$form = self::alignment();
$wgOut->addHtml($form);
$wgOut->addHTML('</div>');
//$wgOut->addHTML('<button id="imageSetting">Add</button>');
$dbr = wfGetDB( DB_SLAVE );
$results = $dbr->query("SELECT DISTINCT img_name, img_description, img_width, img_height, img_user_text, img_timestamp
FROM wiki_image
ORDER BY img_timestamp ASC
");
$uploaded = array();
while( $row = $dbr->fetchObject( $results ) ) {
$uploaded[] = array( $row->img_name, $row->img_width, $row->img_height, $row->img_user_text, $row->img_description);
}
$wgOut->addHtml('<table><tr><td></td><th>Name</th><th>Thumbnail</th><th>Dimensions</th><th>User</th><th>Comment</th></tr>');
foreach($uploaded as $upload){
$wgOut->addHTML('<tr><td><button id="imageSetting">Add</button></td><td>');
$wgOut->addHTML($upload[0]);
$wgOut->addHtml('</td><td>');
$wgOut->addHtml('thumnail image');
$wgOut->addHtml('</td><td>');
$wgOut->addHTML($upload[1]);
$wgOut->addHTML('x');
$wgOut->addHTML($upload[2]);
$wgOut->addHtml('</td><td>');
$wgOut->addHTML($upload[3]);
$wgOut->addHtml('</td><td>');
$wgOut->addHtml('comment');
$wgOut->addHtml('</td><td>');
}
$wgOut->addHtml('</table>');
}
public static function alignment(){
global $wgOut;
$wgOut->addHtml('<form>');
$wgOut->addHtml('<table>');
// image setting
$wgOut->addHTML( "<tr><td>Image Setting </td></tr>" );
$wgOut->addHTML( "<tr><td><input type=\"text\" value=\"400x400\" id=\"size\" size=\"23\" maxlength=\"12\" onkeyup=\"createMarkup(this)\" onmouseout=\"createMarkup(this)\"/> px (width x height)</td></tr>" );
// radio buttons for alignment left/center/right
$wgOut->addHTML( "<tr> <td>Alignment: </td> </tr>" );
$wgOut->addHTML( "<tr><td>");
$wgOut->addHTML( "<input type=\"radio\" id=\"left\" name=\"position\" value=\"left\" onchange=\"createMarkup(this)\"/>left" );
$wgOut->addHTML( "</td><td>");
$wgOut->addHTML( "<input type=\"radio\" id=\"center\" name=\"position\" value=\"center\" onchange=\"createMarkup(this)\"/>center" );
$wgOut->addHTML( "</td><td>" );
$wgOut->addHTML( "<input type=\"radio\" id=\"right\" name=\"position\" value=\"right\" checked=\"checked\" onchange=\"createMarkup(this)\"/>right" );
$wgOut->addHTML( "</td></tr>" );
$wgOut->addHTML( "<tr><td>" );
//wgOut->addHtml('<input type="submit" value="OK" name="" id=""/> <input type="button" value="Cancel" class="close" />');
$wgOut->addHTML( "</td></tr>" );
$wgOut->addHtml('</table>');
$wgOut->addHtml('</form>');
}
public static function uploadImage(){
global $wgOut;
$wgOut->addHtml('Upload an Image from your computer');
}
public static function fnAddImages(){
global $wgOut, $wgHooks, $wgUser, $wgRequest;
// import addimage javascript and css files
$wgOut->addScript('<script type="text/javascript" src="extensions/AddImages/addimages.js"></script>');
$wgOut->addScript('<script type="text/javascript" src="extensions/AddImages/js/jquery-1.7.1.min.js"></script>');
$wgOut->addScript('<script type="text/javascript" src="extensions/AddImages/js/jquery-ui-1.7.3.custom.min.js"></script>');
$wgOut->addScript('<link type="text/css" href="extensions/AddImages/css/blitzer/jquery-ui-1.7.3.custom.css" rel="Stylesheet" />');
$wgOut->addScript("<style>@import url( extensions/AddImages/style.css);</style>");
//Add Image button with popup onclick
$wgOut->addScript('<script type="text/javascript">
( function($) {
$(document).ready(function() {
$(function() {
//var exist = $( "#exist" );//var upload = $( "#upload" );
$( "#dialog-form" )
.dialog({
autoOpen: false,
title: "Add Images",
buttons: {"Okay": function() {$("#form").submit();
if($("#exist").is(":checked")) {
$(this).dialog("close");
$("#chooseImage").dialog("open");
$("#chooseImage")
.dialog({
autoOpen:false,
title: "Choose from existing Images",
draggable: false,
//resizable: false,
height: "auto",
width: 460
});
};
if($("#upload").is(":checked")) {
$( "#chooseImage" ).hide();
$(this).dialog("close");
$("#uploadImage").dialog("open");
$("#uploadImage")
.dialog({
autoOpen:false,
title: "Upload Image",
height: "auto",
width: 460
});
};
}},
});
$("#addImage")
.click(function() {
$( "#dialog-form" ).dialog("open");
});
});
});
} ) ( jQuery );
</script>');
//add from exisiting
$wgOut->addHTML('<div id="chooseImage">');
$out = self::chooseFromExisiting($dbr);
$wgOut->addHtml($out);
$wgOut->addHTML('</div>');
//upload image
$wgOut->addHTML('<div id="uploadImage">');
$form = self::uploadImage();
$wgOut->addHtml($form);
$wgOut->addHTML('</div>');
//form
$wgOut->addHTML('<div id="dialog-form">');
$form = self::getFormHtml();
$wgOut->addHtml($form);
$wgOut->addHTML('</div>');
$wgOut->addHTML('<button id="addImage">Add Image</button>');
//retun true to run hook function
return true;
}
public static function getFormHtml(){
global $wgOut;
$wgOut->addHTML('<form>
<input type="radio" name="addimage" value="exists already" id="exist"> Choose from Exisiting
<br />
<input type="radio" name="addimage" value="upload now" id="upload"> Upload your Own
</form>');
}
public static function chooseFromExisiting( $dbr ){
global $wgOut;
$wgOut->addScript('<script type="text/javascript">
( function($) {
$(document).ready(function() {
$(function() {
$( "#alignment" )
.dialog({
autoOpen: false,
title: "Align Images",
//draggable: false,
resizable: false,
buttons: {"Okay": function() {$(this).dialog("close");}},
});
$("#imageSetting")
.click(function() {
$( "#alignment" ).dialog("open");
});
});
});
} ) ( jQuery );
</script>');
$wgOut->addHTML('<div id="alignment">');
$form = self::alignment();
$wgOut->addHtml($form);
$wgOut->addHTML('</div>');
//$wgOut->addHTML('<button id="imageSetting">Add</button>');
$dbr = wfGetDB( DB_SLAVE );
$results = $dbr->query("SELECT DISTINCT img_name, img_description, img_width, img_height, img_user_text, img_timestamp
FROM wiki_image
ORDER BY img_timestamp ASC
");
$uploaded = array();
while( $row = $dbr->fetchObject( $results ) ) {
$uploaded[] = array( $row->img_name, $row->img_width, $row->img_height, $row->img_user_text, $row->img_description);
}
$wgOut->addHtml('<table><tr><td></td><th>Name</th><th>Thumbnail</th><th>Dimensions</th><th>User</th><th>Comment</th></tr>');
foreach($uploaded as $upload){
$wgOut->addHTML('<tr><td><button id="imageSetting">Add</button></td><td>');
$wgOut->addHTML($upload[0]);
$wgOut->addHtml('</td><td>');
$wgOut->addHtml('thumnail image');
$wgOut->addHtml('</td><td>');
$wgOut->addHTML($upload[1]);
$wgOut->addHTML('x');
$wgOut->addHTML($upload[2]);
$wgOut->addHtml('</td><td>');
$wgOut->addHTML($upload[3]);
$wgOut->addHtml('</td><td>');
$wgOut->addHtml('comment');
$wgOut->addHtml('</td><td>');
}
$wgOut->addHtml('</table>');
}
public static function alignment(){
global $wgOut;
$wgOut->addHtml('<form>');
$wgOut->addHtml('<table>');
// image setting
$wgOut->addHTML( "<tr><td>Image Setting </td></tr>" );
$wgOut->addHTML( "<tr><td><input type=\"text\" value=\"400x400\" id=\"size\" size=\"23\" maxlength=\"12\" onkeyup=\"createMarkup(this)\" onmouseout=\"createMarkup(this)\"/> px (width x height)</td></tr>" );
// radio buttons for alignment left/center/right
$wgOut->addHTML( "<tr> <td>Alignment: </td> </tr>" );
$wgOut->addHTML( "<tr><td>");
$wgOut->addHTML( "<input type=\"radio\" id=\"left\" name=\"position\" value=\"left\" onchange=\"createMarkup(this)\"/>left" );
$wgOut->addHTML( "</td><td>");
$wgOut->addHTML( "<input type=\"radio\" id=\"center\" name=\"position\" value=\"center\" onchange=\"createMarkup(this)\"/>center" );
$wgOut->addHTML( "</td><td>" );
$wgOut->addHTML( "<input type=\"radio\" id=\"right\" name=\"position\" value=\"right\" checked=\"checked\" onchange=\"createMarkup(this)\"/>right" );
$wgOut->addHTML( "</td></tr>" );
$wgOut->addHTML( "<tr><td>" );
//wgOut->addHtml('<input type="submit" value="OK" name="" id=""/> <input type="button" value="Cancel" class="close" />');
$wgOut->addHTML( "</td></tr>" );
$wgOut->addHtml('</table>');
$wgOut->addHtml('</form>');
}
public static function uploadImage(){
global $wgOut;
$wgOut->addHtml('Upload an Image from your computer');
}
$chooseImage.dialog{title:hello} 如果您提交表单，您将被重定向到另一个页面$提交表格；如果似乎工作，而不是重新加载页面。我错过什么了吗？谢谢，这让我省去了很多头痛！现在可以了。唯一的问题是，当我加载页面时，屏幕上显示的是中的html，然后当我选择“存在”并单击“确定”时，它会移动到对话框中。我怎么不在主页上显示呢？我只希望它出现在弹出窗口中。谢谢。你能更新你的问题并包括divchooseImage的HTML部分吗？我刚刚注意到，如果我再次尝试并选择“存在”，则只能使用“添加图像”对话框一次。第二次没有任何结果。你尝试了吗。dialogopen？如果$exist.is:checked{$this.dialogclose；$chooseImage.dialogopen；$chooseImage.dialog{title:从现有图像中选择，我可以多次打开对话框。我只是想知道为什么chooseImage最初与页面一起加载。奇怪的是b/c“对话框表单”没有，代码的结构也一样。谢谢你的帮助
public static function fnAddImages(){
global $wgOut, $wgHooks, $wgUser, $wgRequest;
// import addimage javascript and css files
$wgOut->addScript('<script type="text/javascript" src="extensions/AddImages/addimages.js"></script>');
$wgOut->addScript('<script type="text/javascript" src="extensions/AddImages/js/jquery-1.7.1.min.js"></script>');
$wgOut->addScript('<script type="text/javascript" src="extensions/AddImages/js/jquery-ui-1.7.3.custom.min.js"></script>');
$wgOut->addScript('<link type="text/css" href="extensions/AddImages/css/blitzer/jquery-ui-1.7.3.custom.css" rel="Stylesheet" />');
$wgOut->addScript("<style>@import url( extensions/AddImages/style.css);</style>");
//Add Image button with popup onclick
$wgOut->addScript('<script type="text/javascript">
( function($) {
$(document).ready(function() {
$(function() {
//var exist = $( "#exist" );//var upload = $( "#upload" );
$( "#dialog-form" )
.dialog({
autoOpen: false,
title: "Add Images",
buttons: {"Okay": function() {$("#form").submit();
if($("#exist").is(":checked")) {
$(this).dialog("close");
$("#chooseImage").dialog("open");
$("#chooseImage")
.dialog({
autoOpen:false,
title: "Choose from existing Images",
draggable: false,
//resizable: false,
height: "auto",
width: 460
});
};
if($("#upload").is(":checked")) {
$( "#chooseImage" ).hide();
$(this).dialog("close");
$("#uploadImage").dialog("open");
$("#uploadImage")
.dialog({
autoOpen:false,
title: "Upload Image",
height: "auto",
width: 460
});
};
}},
});
$("#addImage")
.click(function() {
$( "#dialog-form" ).dialog("open");
});
});
});
} ) ( jQuery );
</script>');
//add from exisiting
$wgOut->addHTML('<div id="chooseImage">');
$out = self::chooseFromExisiting($dbr);
$wgOut->addHtml($out);
$wgOut->addHTML('</div>');
//upload image
$wgOut->addHTML('<div id="uploadImage">');
$form = self::uploadImage();
$wgOut->addHtml($form);
$wgOut->addHTML('</div>');
//form
$wgOut->addHTML('<div id="dialog-form">');
$form = self::getFormHtml();
$wgOut->addHtml($form);
$wgOut->addHTML('</div>');
$wgOut->addHTML('<button id="addImage">Add Image</button>');
//retun true to run hook function
return true;
}
public static function getFormHtml(){
global $wgOut;
$wgOut->addHTML('<form>
<input type="radio" name="addimage" value="exists already" id="exist"> Choose from Exisiting
<br />
<input type="radio" name="addimage" value="upload now" id="upload"> Upload your Own
</form>');
}
public static function chooseFromExisiting( $dbr ){
global $wgOut;
$wgOut->addScript('<script type="text/javascript">
( function($) {
$(document).ready(function() {
$(function() {
$( "#alignment" )
.dialog({
autoOpen: false,
title: "Align Images",
//draggable: false,
resizable: false,
buttons: {"Okay": function() {$(this).dialog("close");}},
});
$("#imageSetting")
.click(function() {
$( "#alignment" ).dialog("open");
});
});
});
} ) ( jQuery );
</script>');
$wgOut->addHTML('<div id="alignment">');
$form = self::alignment();
$wgOut->addHtml($form);
$wgOut->addHTML('</div>');
//$wgOut->addHTML('<button id="imageSetting">Add</button>');
$dbr = wfGetDB( DB_SLAVE );
$results = $dbr->query("SELECT DISTINCT img_name, img_description, img_width, img_height, img_user_text, img_timestamp
FROM wiki_image
ORDER BY img_timestamp ASC
");
$uploaded = array();
while( $row = $dbr->fetchObject( $results ) ) {
$uploaded[] = array( $row->img_name, $row->img_width, $row->img_height, $row->img_user_text, $row->img_description);
}
$wgOut->addHtml('<table><tr><td></td><th>Name</th><th>Thumbnail</th><th>Dimensions</th><th>User</th><th>Comment</th></tr>');
foreach($uploaded as $upload){
$wgOut->addHTML('<tr><td><button id="imageSetting">Add</button></td><td>');
$wgOut->addHTML($upload[0]);
$wgOut->addHtml('</td><td>');
$wgOut->addHtml('thumnail image');
$wgOut->addHtml('</td><td>');
$wgOut->addHTML($upload[1]);
$wgOut->addHTML('x');
$wgOut->addHTML($upload[2]);
$wgOut->addHtml('</td><td>');
$wgOut->addHTML($upload[3]);
$wgOut->addHtml('</td><td>');
$wgOut->addHtml('comment');
$wgOut->addHtml('</td><td>');
}
$wgOut->addHtml('</table>');
}
public static function alignment(){
global $wgOut;
$wgOut->addHtml('<form>');
$wgOut->addHtml('<table>');
// image setting
$wgOut->addHTML( "<tr><td>Image Setting </td></tr>" );
$wgOut->addHTML( "<tr><td><input type=\"text\" value=\"400x400\" id=\"size\" size=\"23\" maxlength=\"12\" onkeyup=\"createMarkup(this)\" onmouseout=\"createMarkup(this)\"/> px (width x height)</td></tr>" );
// radio buttons for alignment left/center/right
$wgOut->addHTML( "<tr> <td>Alignment: </td> </tr>" );
$wgOut->addHTML( "<tr><td>");
$wgOut->addHTML( "<input type=\"radio\" id=\"left\" name=\"position\" value=\"left\" onchange=\"createMarkup(this)\"/>left" );
$wgOut->addHTML( "</td><td>");
$wgOut->addHTML( "<input type=\"radio\" id=\"center\" name=\"position\" value=\"center\" onchange=\"createMarkup(this)\"/>center" );
$wgOut->addHTML( "</td><td>" );
$wgOut->addHTML( "<input type=\"radio\" id=\"right\" name=\"position\" value=\"right\" checked=\"checked\" onchange=\"createMarkup(this)\"/>right" );
$wgOut->addHTML( "</td></tr>" );
$wgOut->addHTML( "<tr><td>" );
//wgOut->addHtml('<input type="submit" value="OK" name="" id=""/> <input type="button" value="Cancel" class="close" />');
$wgOut->addHTML( "</td></tr>" );
$wgOut->addHtml('</table>');
$wgOut->addHtml('</form>');
}
public static function uploadImage(){
global $wgOut;
$wgOut->addHtml('Upload an Image from your computer');
}