第 2 頁 怎么用javascript進行拖拽 [2]
第 3 頁 怎么用javascript進行拖拽 [3]
第 4 頁 怎么用javascript進行拖拽 [4]
第 5 頁 怎么用javascript進行拖拽 [5]
嘿嘿……今天看到很好用的一個js表格效果,有時間研究下^_^
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>mytable</title>
<script language="JavaScript">
// src="anole.js"
// about this: javapig修改 源自 忘了。
// Date: 2006-04-29
function anole(
str_tableid, // table id
num_header_offset,// 表頭行數(shù)
str_odd_color, // 奇數(shù)行的顏色
str_even_color,// 偶數(shù)行的顏色
str_mover_color, // 鼠標(biāo)經(jīng)過行的顏色
str_onclick_color // 選中行的顏色
) {
// 表格ID參數(shù)驗證
if(!str_tableid) return alert(str_tableid+"表格不存在");
var obj_tables=(document.all ? document.all[str_tableid]:document.getElementById(str_tableid));
if(!obj_tables) return alert("ID為("+str_tableid+")不存在!");
// 設(shè)置個參數(shù)的缺省值
var col_config=[];
col_config.header_offset=(num_header_offset?num_header_offset:0 );
col_config.odd_color=(str_odd_color?str_odd_color:'#ffffff');
col_config.even_color=(str_even_color?str_even_color:'#dbeaf5');
col_config.mover_color=(str_mover_color?str_mover_color:'#6699cc');
col_config.onclick_color=(str_onclick_color?str_onclick_color:'#4C7DAB');
// 初始化表格(可能多個表格用同一個ID)
if(obj_tables.length)
for(var i=0;i<obj_tables.length;i++ )
tt_init_table(obj_tables[i],col_config);
else
tt_init_table(obj_tables,col_config);
}
function tt_init_table(obj_table,col_config) {
var col_lconfig=[],
col_trs=obj_table.rows;
if(!col_trs) return ;
for(var i=col_config.header_offset;i<col_trs.length;i++) { // i 從 表頭以下開始
col_trs[i].config=col_config;
col_trs[i].lconfig=col_lconfig;
col_trs[i].set_color=tt_set_color;
col_trs[i].onmouseover=tt_mover;
col_trs[i].onmouseout=tt_mout;
col_trs[i].onmousedown=tt_onclick;
col_trs[i].order=(i-col_config.header_offset)%2 ;
col_trs[i].onmouseout();
}
}
function tt_set_color(str_color) {
this.style.backgroundColor=str_color;
}
// 事件操作
function tt_mover() {
if(this.lconfig.clicked!=this )
this.set_color(this.config.mover_color);
}
function tt_mout() {
if(this.lconfig.clicked!=this )
this.set_color(this.order?this.config.odd_color:this.config.even_color);
}
function tt_onclick() {
if( this.lconfig.clicked==this) {
this.lconfig.clicked=null;
this.onmouseover();
}
else {
var last_clicked=this.lconfig.clicked;
this.lconfig.clicked=this ;
if(last_clicked) last_clicked.onmouseout();
this.set_color(this.config.onclick_color);
}
}
</script>
</head>
<table bgcolor="#9933ff" align="center" cellpadding="1" cellspacing="0" width="80%">
<tr>
<td>
<table id="demo" cellpadding="1" cellspacing="1" border="0" width="100%" align="center">
<tr><th colspan="2" bgcolor="ffffff">HTML document object properties</th></tr>
<tr><td width="20%">activeElement</td><td>Retrieves the object that has the focus.</td></tr>
<tr><td>aLinkColor</td><td>Sets or retrieves the color of all links in the document.</td></tr>
<tr><td>bgColor</td><td>Sets or retrieves the background color behe document object.</td></tr>
<tr><td>body</td><td>Specifies the beginning and end of the document body.</td></tr>
<tr><td>contentEditable</td><td>Sets or retrieves whether the userdocument object.</td></tr>
<tr><td>cookie</td><td>Sets or retrieves the string value of a cookie.</td></tr>
<tr><td>defaultCharset</td><td>Sets or retrieves the default chara of the document.</td></tr>
<tr><td>designMode</td><td>Sets or retrieves whether the document can be edited.</td></tr>
<tr><td>documentElement</td><td>Retrieves a reference to the root node of the document.</td></tr>
<tr><td>domain</td><td>Sets or retrieves the security domain of the document.</td></tr>
</table>
</td>
</tr>
</table>
<script language="JavaScript">
anole('demo',1,'#ffffff','#ccccff','#ffccff','#cc99ff');
</script>
</body>
</html>
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>runcode</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Author" content="Sheneyan" />
<script type="text/javascript">
function s(n){
var o=document.getElementById(n);
if (!o) return ;
var t=[],tt=o.options;
while(tt.length>0){
t[t.length]=tt[0].text;
tt.remove(0);
}
t.sort();
for(var i=0,c;c=t[i];i++){
tt.add(new Option(c));
}
}
</script>
</head>
<body onload="s('abc')">
<select id="abc">
<option>華碩</option>
<option>.NET </option>
<option>360 安全衛(wèi)士</option>
<option>ACDSee</option>
<option>Adobe</option>
<option>Firewall</option>
<option>Alcohol 120%</option>
<option>AMD</option>
<option>AnyDVD</option>
<option>Apple</option>
<option>ATi</option>
<option>AutoDesk</option>
<option>羅技</option>
<option>BitComet</option>
<option>BitSpirit(比特精靈)</option>
<option>BlackIce</option>
<option>BlueTooth</option>
<option>Cisco </option>
<option>CloneCD</option>
<option>CloneDVD</option>
<option>CS-半條命</option>
<option>CuteFTP</option>
<option>千千靜聽</option>
<option>趨勢科技(PC-cillin)</option>
<option>DAEMON Tools</option>
<option>DELL</option>
<option>DirectX</option>
<option>DivX</option>
<option>DreamMail</option>
<option>PowerDVD</option>
<option>Easy CD-DA</option>
<option>瑞星(Rising)</option>
<option>Editplus</option>
<option>EmEditor</option>
<option>eMule</option>
<option>eMule Plus</option>
<option>FeedDemon</option>
<option>FileZilla</option>
<option>FlashFXP</option>
<option>Flashget</option>
<option>foobar2000</option>
<option>Foxit PDF Reader</option>
<option>Foxmail</option>
<option>FreeBSD</option>
<option>FTPRush</option>
<option>Gmail</option>
<option>Google talk</option>
<option>Google</option>
<option>GoogleToolbar</option>
<option>GoSURF</option>
<option>GreenBrowser</option>
<option>HP</option>
<option>HyperSnap-DX</option>
<option>IBM</option>
<option>ICQ</option>
<option>iMac G5</option>
<option>Intel</option>
<option>Internet Explorer</option>
<option>IPB</option>
<option>iTune</option>
<option>騰訊</option>
<option>微軟</option>
<option>木馬克星(iparmor)</option>
<option>天網(wǎng)防火墻</option>
<option>木馬捆綁克星</option>
<option>風(fēng)云防火墻個人版</option>
<option>卡巴斯基(Kaspersky)</option>
<option>Maxthon 傲游</option>
<option>Media Player Classic</option>
<option>Windows Media Player</option>
<option>Windows Live Messenger</option>
<option>Microsoft AntiSpyware</option>
<option>Microsoft Office</option>
<option>Mozilla FireFox</option>
<option>Mozilla ThunderBird</option>
<option>MySQL</option>
<option>Nero</option>
<option>NetCaptor</option>
<option>Nettransport</option>
<option>nVIDIA nForce</option>
<option>魚魚桌面秀</option>
<option>Opera</option>
<option>PHP</option>
<option>QQ病毒專殺工具</option>
<option>QuickTime</option>
<option>RealPlayer</option>
<option>skype</option>
<option>SQL Server 2005</option>
<option>stylexp</option>
<option>TheWorld Browser</option>
<option>TuneUp Utilities</option>
<option>UltraEdit</option>
<option>UltraISO</option>
<option>Winamp</option>
<option>Windows OneCare</option>
<option>Windows優(yōu)化王</option>
<option>Windows優(yōu)化大師</option>
<option>WinDVD</option>
<option>WinRAR</option>
<option>WinZip</option>
<option>XnView</option>
<option>Zonealarm</option>
<option>Zoom Player</option>
<option>超級兔子</option>
<option>風(fēng)雷影音</option>
<option>急速啟動 HurryRun</option>
</select>
</body>
</html>
主要有以下幾點總結(jié):
1,select控件本身支持字母索引。比如select控件處于焦點中的時候,按B鍵,option中相應(yīng)的以B開頭的選項就會顯示出來。
2,這段代碼寫的較好!這段代碼的作用是一項一項賦值select空間列表內(nèi)容賦給另一個數(shù)組。
var t=[],tt=o.options;
while (tt.length>0){
t[t.length]=tt[0].text;
tt.remove(0);
}
首先定義數(shù)組t=[],用于存儲原select控件列表內(nèi)容。
tt=o.options;讀取select空間內(nèi)容,以數(shù)組形式存儲在tt數(shù)組中。
t[t.length]=tt[0].text;這里時一個技巧,因為t.length總是比當(dāng)前t的最大索引大1,所以這樣寫數(shù)組t可以自動增加空間。tt[0].text這里每次都讀取第一個內(nèi)容,然后用tt.remove(0);刪除第一項內(nèi)容,直至讀取完畢。
3,這段代碼對新數(shù)組內(nèi)容按字母派訊,然后寫入原select空間列表。
t.sort();
for (var i=0,c;c=t[i];i++){
tt.add(new Option(c));
}
<STYLE type=text/css>
body {
font-size: 12px;
font-family: Tahoma, Arial;
background: #C4C8CB;
margin: 0px;
padding: 0px;
}
td {
padding-left: 5px;
font-size: 12px;
font-family: Tahoma, Arial;
}
.blueFont {color: #6699CC}
.redFont {color: #FF0000}
/***** Other Elements in Page Content *****/
.pwd-strength {
padding: 2px;
padding-left: 5px;
padding-right: 5px;
width: 180px;
border: solid 1px #CCCCCC;
}
.pwd-strength-box,
.pwd-strength-box-low,
.pwd-strength-box-med,
.pwd-strength-box-hi
{
color: #464646;
text-align: center;
width: 33%;
}
.pwd-strength-box-low
{
color: #990000;
background-color: #FFECEC;
}
.pwd-strength-box-med
{
color: #000066;
background-color: #D2E9FF;
}
.pwd-strength-box-hi
{
color: #003300;
background-color: #DDFFDD;
}
</STYLE>
<SCRIPT language=javascript>
function checkPassword(pwd){
var objLow=document.getElementById("pwdLow");
var objMed=document.getElementById("pwdMed");
var objHi=document.getElementById("pwdHi");
objLow.className="pwd-strength-box";
objMed.className="pwd-strength-box";
objHi.className="pwd-strength-box";
if(pwd.length<6){
objLow.className="pwd-strength-box-low";
}else{
var p1= (pwd.search(/[a-zA-Z]/)!=-1) ? 1 : 0;
var p2= (pwd.search(/[0-9]/)!=-1) ? 1 : 0;
var p3= (pwd.search(/[^A-Za-z0-9_]/)!=-1) ? 1 : 0;
var pa=p1+p2+p3;
if(pa==1){
objLow.className="pwd-strength-box-low";
}else if(pa==2){
objMed.className="pwd-strength-box-med";
}else if(pa==3){
objHi.className="pwd-strength-box-hi";
}
}
}
</SCRIPT>
<BR>
<TABLE borderColor=#ffffff cellSpacing=0 borderColorDark=#eeeeee cellPadding=0 width=400 align=center bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD align=middle bgColor=#ffffcc colSpan=2 height=22><SPAN class=blueFont><B>校驗密碼安全性</B></SPAN></TD></TR>
<TR>
<TD style="WIDTH: 100px">請輸入密碼:</TD>
<TD><INPUT onkeyup=checkPassword(this.value); type=password value="" name=password></TD></TR>
<TR>
<TD style="WIDTH: 100px">安全性等級:</TD>
<TD>
<TABLE class="pwd-strength FCK__ShowTableBorders" cellSpacing=0 cellPadding=0 width="100%">
<TBODY>
<TR>
<TD class=pwd-strength-box id=pwdLow>低</TD>
<TD class=pwd-strength-box id=pwdMed>中</TD>
<TD class=pwd-strength-box id=pwdHi>高</TD></TR></TBODY></TABLE></TD></TR>
<TR>
<TD colSpan=2><SPAN class=redFont>建議至少 6 個字符. 請使用強密碼以保證安全.</SPAN></TD></TR></TBODY></TABLE>