?? send.txt
字號:
function showDelete(self){
self.style.backgroundColor = overCol;
currentDiv = self;
var theid = "del_icon";
if(!$(theid)){
var delDiv=document.createElement("div");
delDiv.id=theid;
var d=delDiv;
d.style.textAlign="center";d.style.fontSize="11px";
var edit = document.createElement("span");
edit.title="編輯此條";edit.style.textDecoration="underline";
edit.onclick=function(){
editSingle(currentDiv.parentNode,this.parentNode,currentDiv);
}
var del = document.createElement("span");
del.title="刪除此條";del.style.textDecoration="underline";
del.onclick=function(){
delSingle(currentDiv.parentNode,this.parentNode,currentDiv);
}
edit.appendChild(document.createTextNode("edit"));
d.appendChild(edit);
d.appendChild(document.createTextNode(" | "));
del.appendChild(document.createTextNode("delete"));
d.appendChild(del);
d.style.width="80px";
d.style.lineHeight="20px";
d.style.color="blue";
// d.style.zIndex="-10";
// d.style.backgroundColor="green";
document.body.appendChild(d);
$(theid).onmouseover=function(){
currentDiv.style.backgroundColor = overCol;
this.style.display="";
//mouseOndeleteDiv=true;
}
//
$(theid).style.cursor="pointer";
}
if($(theid)){
$(theid).style.display="";
var l= getAbsoluteLeft(self) + self.offsetWidth - 80;
var t= getAbsoluteTop(self) + 5;
var scrollT = self.parentNode.scrollTop;//減去出現滾動條的高度;
var t= getAbsoluteTop(self) + 5 - scrollT;
$(theid).style.position="absolute";
$(theid).style.left = l+"px";
$(theid).style.top = t+"px";
}
}
function hideDelete(self){
var theid = "del_icon";
if( $(theid) ){
self.style.backgroundColor = self.childNodes[0].checked?checkedCol:emptyCol;
$(theid).style.display="none";
}
}
</script>
</HEAD>
<BODY>
<style>
.drag{position:absolute;width:600px; background-color:#f1f1f1;
filter:alpha(opacity=100);
-moz-opacity:1.0;
opacity:1.0;
}
.da{width:100%;background-color:gray;cursor:move;font-size:14px;vertical-align:middle;line-height:30px}
.max_min_btn{float:right;color:red;cursor:pointer;font-size:9pt;width:50px;line-height:30px;text-align:center;}
#list{border-top:2px ridge #9A9898;border-left:2px ridge #9A9898;border-bottom:1px solid #D4D0C8;border-right:1px solid #D4D0C8;background:white;width:578px;height:350px;margin:10px;overflow:auto}
.shadowBottom{margin-left:6px;height:5px;background:gray;font-size:0px;line-height:0px;filter:alpha(opacity=55);-moz-opacity:0.55;opacity:0.55;}
</style>
<pre>
本例是采用JSP + Ajax + 文本來演示多選、全選，添加、刪除、更新checkbox多選框的效果。
本例充分展現了利用JavaScript控制HTML DOM以及利用XML http 傳遞數據，利用JSP操作文本的效果。
1，JavaScript 用來控制頁面內容的現實與增刪效果;
2，JSP作為后臺，對文本進行讀取、寫入、更新等操作;
3，文本格式是用來存儲數據的，數據編碼UTF-8;<br>4, 本例子在win32,Red hat Linux 9下 jdk1.5,Tomcat 5.0,Apache 2.5下調試通過，同時兼容Firefox 1.0,Opera 8.0,IE6。
<br>在線說明文檔 <a href="http://jiarry.blogchina.com/5599587.html">http://jiarry.blogchina.com/5599587.html</a><br>靜態頁面演示地址：<A href="http://jarryli.googlepages.com/checkbox_test.html">http://jarryli.googlepages.com/checkbox_test.html</A> (詳細的說明，隨后補充)<BR>源文件下載地址：<A href="http://jarryli.googlepages.com/checkbox.rar">http://jarryli.googlepages.com/checkbox.rar</A>
<br>
另外之前做的<br>
PHP+Ajax 發帖程序實例:<a href="http://jiarry.blogchina.com/5555296.html">http://jiarry.blogchina.com/5555296.html</a> 源碼下載:<a href="http://jarryli.googlepages.com/post_ajax.rar">http://jarryli.googlepages.com/post_ajax.rar</a><br>
JSP登錄證碼無刷新提示:<a href="http://jiarry.blogchina.com/5287654.html">http://jiarry.blogchina.com/5287654.html</a> 源碼下載:<a href="http://jarryli.googlepages.com/imgValidate.rar">http://jarryli.googlepages.com/imgValidate.rar</a><br>
<br>
<div class="drag" rel="drag" id="siteMainDarg" style="left:10px;top:10px;" onMouseDown="dargit(this,event);">
<div class="da" ><span class="max_min_btn" id="max_min" style="background-color:#333"><font style="font-family:webdings">2</font>CLOSE</span> 拖拽區</div>
<div id="sitelistDiv" >
<form name="sitelist" onSubmit="return addSite(this);" style="border:1px groove blue;margin:0;padding:0;border-top:0;"><br clear="all">
http:// <INPUT TYPE="text" size="30" NAME="url" onmouseover="this.focus()"> <INPUT TYPE="button" NAME="add" value="添加網址至列表" onClick="addSite(this.form)">
<div id="list">
<div onMouseOver="showDelete(this);" onmouseout="hideDelete(this);" style="padding:5px;border-bottom:1px dashed gray"><input type=checkbox value="example.com" name="url_chkbox" onClick="clickchk(this.form)">example1.com </div>
<div onMouseOver="showDelete(this);" onMouseOut="hideDelete(this);" style="padding:5px;border-bottom:1px dashed gray"><input type=checkbox value="example.com" name="url_chkbox" onClick="clickchk(this.form)">example2.com </div>
</div>
<INPUT TYPE="button" NAME="check" value="全選" disabled onClick="checkall(this.form)"> <input type="button" value="反選" name="recheck" disabled onclick="reverseCheck(this.form)"> <INPUT TYPE="button" NAME="remove" disabled value="刪除" onClick="del($('list'),this.form)"><br><br>
</form>
</div>
<div class="shadowBottom"> </div>
</div><br><br><br>
Cody by JarryLi@gmail.com;
<br>
CopyRight?Jarry,All right reserved!<br>
本例僅供個人參考，引用請保留版權信息。謝謝！
<br>
homepage:<a href="http://jiarry.126.com">jiarry.126.com</a><br>
Blog:<a href="http://jiarry.blogchina.com">http://jiarry.blogchina.com</a>
<script>
//頁面加載時初始化
function init(l,f){
var list=l;
f.check.disabled=list.childNodes.length>1?false:true;
f.recheck.disabled=list.childNodes.length>1?false:true;
f.check.value=strAll;
f.remove.disabled=list.childNodes.length>1?false:true;
}
window.onload=function(){
init($("list"),document.sitelist);
}
activeCookie = true;
if(document.cookie==null){
//alert("cookie沒有開啟！");
activeCookie = false;
}
function getCookie(name) {
if( !activeCookie ) return;
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function setCookie(name , value)
{
if( !activeCookie ) return;
var expdate = new Date();
expdate.setTime(expdate.getTime() + (365*24*120));
document.cookie=""+ name + "=" + value +";expires="+ expdate.toGMTString();
}
var theLeft = getCookie("siteMainDargLeft")!=null ? getCookie("siteMainDargLeft") : 10;
var theTop = getCookie("siteMainDargTop")!=null ? getCookie("siteMainDargTop") : 10;
var listDivDisplay = getCookie("sitelistDivDisplay")!=null ? getCookie("sitelistDivDisplay") : "";
$("siteMainDarg").style.top = theTop;
$("siteMainDarg").style.left = theLeft;
$("sitelistDiv").style.display = listDivDisplay;
//cookie end;
////////////////////////
var d_width = 550;
var d_height = 30;
var ey=0,ex=0,lx=0,ly=0,canDrg=false,thiso=null;//
var x, y,rw,rh;
var divs=document.getElementsByTagName("div");
for (var i=0;i<divs.length;i++){
if(divs[i].getAttribute("rel")=="drag"){
divs[i].onmousemove=function(){
thismove(this);//實時得到當前對象與鼠標的值以判斷拖動及關閉區域;
}
}
}
function thismove(o){
rw = parseInt(x)-parseInt(getAbsoluteLeft(o));
rh = parseInt(y)-parseInt(getAbsoluteTop(o));
}
function dargit(o,e){
thiso = o;
canDrg = true;
if(!document.all){
lx = e.clientX; ly = e.clientY;
}else{
lx = event.x; ly = event.y;
}
try{//設置漸變色;
if(rh<=d_height && rw<d_width &&rh>0){//設定在拖動區域
if(document.all)thiso.filters.Alpha.opacity=80;
else thiso.style.MozOpacity=80/100;
}
}catch(e){
}
st(o);
}
document.onmousemove = function(e){
if(!document.all){ x = e.clientX; y = e.clientY; }else{ x = event.x; y = event.y; }
if(canDrg){
if(rh<=d_height && rw<d_width &&rh>0){//如果要設定拖動區域可以作判斷
var ofsx = x - lx;
thiso.style.left = (parseInt(thiso.style.left) + ofsx) +"px";
lx = x;
var ofsy = y - ly;
thiso.style.top = (parseInt(thiso.style.top) + ofsy) +"px";
ly = y;
}else{
canDrg=false;
}
}
}
document.onmouseup=function(){
canDrg=false;//拖拽變量設為false
try{
if(document.all)thiso.filters.Alpha.opacity=100;
else thiso.style.MozOpacity=100;
}catch(e){}
if(document.all && thiso != null){
thiso.releaseCapture();
thiso = null;
}
}
function st(o){
if(rh <= d_height && rw >= d_width){
canDrg=false;
showHide($("sitelistDiv"));
}
}
function showHide(obj,self){
obj.style.display = obj.style.display=="none"?"":"none";
//$("del_icon").display="none";
var icon = "1";
var text = "OPEN";
if(obj.style.display==""){
icon = "2";
text = "CLOSE";
}
$("max_min").childNodes[0].innerHTML = icon;
$("max_min").childNodes[1].nodeValue = text;
}
window.onunload = function(){
setCookie("siteMainDargLeft",getAbsoluteLeft( $("siteMainDarg") ) );
setCookie("siteMainDargTop",getAbsoluteTop( $("siteMainDarg") ) );
setCookie("sitelistDivDisplay",$("sitelistDiv").style.display );
}
</script>
</BODY>
</HTML>
[/html]
[b]
由于時間有限，難免有很多問題，希望大家提出來。其實本例做的并不怎么好，拿出來希望眾位多多入指點，同時也希望對同樣是初學者的朋友來說有幫助，也希望大家一起交流進步，謝謝！:p[b]
另外之前做的有關Ajax的東東，順便請供參考，謝謝！
PHP+Ajax 發帖程序實例:[url]http://jiarry.blogchina.com/5555296.html[/url] 源碼下載:[url]http://jarryli.googlepages.com/post_ajax.rar[/url]
JSP登錄證碼無刷新提示:[url]http://jiarry.blogchina.com/5287654.html[/url] 源碼下載:[url]http://jarryli.googlepages.com/imgValidate.rar[/url]
[b]代碼沒有整理，優化，所以本例子只供大家交流參考用，希望可以通過這種方式得到各位的幫助，謝謝！[/b]
/////////////////////////////////////////////
[b]本例是采用JSP + Ajax + 文本來演示多選、全選，添加、刪除、更新checkbox多選框的效果。
本例充分展現了利用JavaScript控制HTML DOM以及利用XML http 傳遞數據，利用JSP操作文本的效果。[/b]
1，JavaScript 用來控制頁面內容的現實與增刪效果;
2，JSP作為后臺，對文本進行讀取、寫入、更新等操作;
3，文本格式是用來存儲數據的，數據編碼UTF-8;4, 本例子在win32,Red hat Linux 9下 jdk1.5,Tomcat 5.0,Apache 2.5下調試通過，同時兼容Firefox 1.0,Opera 8.0,IE6。
4，本例把開發過程中的注釋全部保留下來了，并且保存了不同時間的版本，以供查閱。
[color=red]
在線說明文檔 [url]http://jiarry.blogchina.com/5599587.html[/url]
靜態頁面演示地址：[url]http://jarryli.googlepages.com/checkbox_test.html[/url] (詳細的說明，隨后補充)
源文件下載地址：[url]http://jarryli.googlepages.com/checkbox.rar[/url]
[/color]
[b]
由于時間有限，難免有很多問題，希望大家提出來。其實本例做的并不怎么好，拿出來希望眾位多多入指點，同時也希望對同樣是初學者的朋友來說有幫助，也希望大家一起交流進步，謝謝！:p[b]
另外之前做的有關Ajax的東東，順便請供參考，謝謝！
PHP+Ajax 發帖程序實例:[url]http://jiarry.blogchina.com/5555296.html[/url] 源碼下載:[url]http://jarryli.googlepages.com/post_ajax.rar[/url]
JSP登錄證碼無刷新提示:[url]http://jiarry.blogchina.com/5287654.html[/url] 源碼下載:[url]http://jarryli.googlepages.com/imgValidate.rar[/url]
[b]代碼沒有整理，優化，所以本例子只供大家交流參考用，希望可以通過這種方式得到各位的幫助，謝謝！[/b]?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -