Java脚本:
function openEditor(){
$("#editor").show().animate({width: 965, height: 380}, 1500);
$("#editor textarea").show();
}
function closeEditor(){
$("#editor").animate({width: 985, height: 1}, 1500, function(){
$("#editor").hide();
$("#editor textarea").hide();
});
}
function setedit(){
$.ajax({
type: "POST",
url: "engine.php",
data: "title="+ $( title ).val() +"&text="+ $( text ).val(),
success: function(msg){
alert("Saved.");
closeEditor();
search();
}
beforeSend: function(){
$( #mainField ).html( <img src="data/images/loader.gif" alt="Loading..."> );
}
});
}
function search(){
$.get( engine.php?search= + $( #search ).val() , function(data) {
$( #mainField ).html(data);
});
}
HTML格式:
<div id="wrapper">
<div id="header">
<span class="h1">Title</span>
<div id="header-right">
<form id="search" onsubmit="search(); return false;">
<input type="text" name="search" value="Search for article name..." onfocus="if(this.value== Search for article name... ){this.value= };" onblur="if(this.value== ){this.value= Search for article name... };" /> <img src="data/images/find.png" alt="search" onclick="document.forms[ editorform ].submit();">
</form>
</div>
</div>
<div id="main">
<div class="toolbox">
<span class="tool"><a href="javascript:;" onclick="openEditor(); return false;"><img src="data/images/edit.png" alt="edit"></a></span>
</div>
<div id="mainField">
lorem ipsum dolor lorem ipsum dolorlorem ipsum dolor lorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolor
</div>
<div id="editor">
<form action="engine.php" method="post" id="editorform" onsubmit="setedit(); return false;">
<span class="edit">Edit</span>
<div class="toolbox">
<span class="tool"><a href="javascript:;" onclick="document.forms[ editorform ].submit();"><img src="data/images/save.png" alt="save"></a></span>
<span class="tool"><a href="javascript:;" onclick="closeEditor(); return false;"><img src="data/images/stop.png" alt="stop"></a></span>
</div>
<textarea name="text">lorem ipsum dolor lorem ipsum dolorlorem ipsum dolor lorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolor</textarea>
<input type="hidden" name="title" value="home">
</form>
</div>
</div>
</div>
CSS格式:
#editor {
display: none;
background: #F0F0F0;
}
span.edit {
font-size: 25px;
}
#editor textarea {
width: 950px;
height: 250px;
display: none;
}
.toolbox {
float: right;
}
你好,又是斯塔克弗洛!
我想用ajax搜索文章,并在字段中获取这些文章的内容。此外,我想使这些文章可编辑。。。但整件事都不起作用?!?!!!
打开编辑器的功能不起作用。。。当我想搜索并按下搜索按钮时,我会转到engine.php…我无法尝试编辑,因为我无法打开编辑框。。。
怎么了?为什么它不起作用?
这是一把小提琴:http://jsfiddle.net/rg7Sx/
问候