IT博客-asfman-文章分类-Dhtml DOmhttp://www.cnitblog.com/asfman/category/2311.html有些事，我们明知道是错的，也要去坚持，因为不甘心；有些人，我们明知道是爱的，也要去放弃，因为没结局；有时候，我们明知道没路了，却还在前行，因为习惯了。zh-cnMon, 26 Sep 2011 13:39:45 GMTMon, 26 Sep 2011 13:39:45 GMT60popuphttp://www.cnitblog.com/asfman/articles/36873.html汪杰汪杰Mon, 26 Nov 2007 06:12:00 GMThttp://www.cnitblog.com/asfman/articles/36873.htmlhttp://www.cnitblog.com/asfman/comments/36873.htmlhttp://www.cnitblog.com/asfman/articles/36873.html#Feedback0http://www.cnitblog.com/asfman/comments/commentRss/36873.htmlhttp://www.cnitblog.com/asfman/services/trackbacks/36873.html<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新建网页 1</title>
</head>

<body>
<SCRIPT>
var oPopup = window.createPopup();
var PopW=250; //窗口宽
var PopH=100; //窗口高,建议个位数为0
var PopT=50; //越小越快
var PopO=3000; //越大显示越久
var popR=10; //距离右边
var popF=20; //距离底部
//以下不用修改
var popTop=10;
var PopTimer;
popF=popF+34;
function popmsg(msgtitle,msgstr){
var Popwin="<div style=\"border:1px #3B82BD solid;width:"+PopW+"px;height:"+(PopH-0)+"px;padding:3px\">";
Popwin+="<div style=\"height:100%;border:1px #6D93C8 solid;background:#7BACD4;color:#ffffff;padding:2px;font-size:12px;line-height:18px;overflow:auto\"><b>"+msgtitle+"：</b><br>"+msgstr+"</div></div>";
oPopup.document.body.innerHTML = Popwin;
PopOpen();
}

function PopOpen(){
if(popTop<PopH+10){
oPopup.show(screen.width-(PopW+popR),screen.height-(PopH+popF),PopW,popTop);
popTop+=10;
}else{
return;
}
setTimeout("PopOpen()",PopT);
}
setTimeout("oPopup.hide()",PopO)
popmsg("温馨提示","提示内容提示内容提提示内容提示内容提提示内容提示内容提提示内容提示内容提");
</SCRIPT>
</body>

</html>



汪杰 2007-11-26 14:12 发表评论
]]>CreateDocumentFragment的用处http://www.cnitblog.com/asfman/articles/32614.html汪杰汪杰Wed, 29 Aug 2007 17:14:00 GMThttp://www.cnitblog.com/asfman/articles/32614.htmlhttp://www.cnitblog.com/asfman/comments/32614.htmlhttp://www.cnitblog.com/asfman/articles/32614.html#Feedback2http://www.cnitblog.com/asfman/comments/commentRss/32614.htmlhttp://www.cnitblog.com/asfman/services/trackbacks/32614.html一旦把节点添加到document.body(或其后的节点)中，页面就会立即反映出这个变化。对于少量的更新，这是很好的。然而，当要向document.body添加大量数据时，如果逐个添加这些节点，这个过程有可能会十分缓慢。为解决这个问题，可以创建一个文档碎片，把所有的新节点附加其上，然后把文档碎片的内容一次性添加到document中。

     假设你想创建十个新段落。你可能这样写：

var arrText=["1","2","3","4","5","6","7","8","9","10"];
for(var i=0;i<arrText.length;i++)
{
    var op=document.createElement("P");
    var oText=document.createTextNode(arrText[i]);
    op.appendChild(oText);
    document.body.appendChild(op);
}

 这段代码运行良好，但问题是它调用了十次document.body.appendChild(),每次要产生一次页面刷新。这时，文档碎片会更高效：

var arrText=["1","2","3","4","5","6","7","8","9","10"];
var oFrag=document.createDocumentFragment();

for(var i=0;i<arrText.length;i++)
{
    var op=document.createElement("P");
    var oText=document.createTextNode(arrText[i]);
    op.appendChild(oText);
    oFrag.appendChild(op);
    
}
document.body.appendChild(oFrag);
这段代码中,document.body.appendChild()仅调用了一次，这意味首只需要进行一次屏幕的刷新。

汪杰 2007-08-30 01:14 发表评论
]]>HTML文档中的metahttp://www.cnitblog.com/asfman/articles/22181.html汪杰汪杰Mon, 22 Jan 2007 00:29:00 GMThttp://www.cnitblog.com/asfman/articles/22181.htmlhttp://www.cnitblog.com/asfman/comments/22181.htmlhttp://www.cnitblog.com/asfman/articles/22181.html#Feedback0http://www.cnitblog.com/asfman/comments/commentRss/22181.htmlhttp://www.cnitblog.com/asfman/services/trackbacks/22181.html
name 属性

＜meta name="Generator" contect=""＞用以说明生成工具（如Microsoft FrontPage 4.0）等；

＜meta name="KEYWords" contect=""＞向搜索引擎说明你的网页的关键词；

＜meta name="DEscription" contect=""＞告诉搜索引擎你的站点的主要内容；

＜meta name="Author" contect="你的姓名"＞告诉搜索引擎你的站点的制作的作者；

＜meta name="Robots" contect="all|none|index|noindex|follow|nofollow"＞


其中的属性说明如下：

设定为all：文件将被检索，且页面上的链接可以被查询；

设定为none：文件将不被检索，且页面上的链接不可以被查询；

设定为index：文件将被检索；

设定为follow：页面上的链接可以被查询；

设定为noindex：文件将不被检索，但页面上的链接可以被查询；

设定为nofollow：文件将不被检索，页面上的链接可以被查询。


http-equiv属性

＜meta http-equiv="Content-Type" contect="text/html";charset=gb_2312-80"＞和 ＜meta http-equiv="Content-Language" contect="zh-CN"＞用以说明主页制作所使用的文字以及语言；又如英文是ISO-8859-1字符集，还有BIG5、utf-8、shift-Jis、Euc、Koi8-2等字符集；

＜meta http-equiv="Refresh" contect="n;url=http://yourlink" ＞定时让网页在指定的时间n内，跳转到页面http;//yourlink；

＜meta http-equiv="Expires" contect="Mon,12 May 2001 00:20:00 GMT"＞可以用于设定网页的到期时间，一旦过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式；

＜meta http-equiv="Pragma" contect="no-cache"＞是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出；

＜meta http-equiv="set-cookie" contect="Mon,12 May 2001 00:20:00 GMT"＞cookie设定，如果网页过期，存盘的cookie将被删除。需要注意的也是必须使用GMT时间格式；

＜meta http-equiv="Pics-label" contect=""＞网页等级评定，在IE的internet选项中有一项内容设置，可以防止浏览一些受限制的网站，而网站的限制级别就是通过meta属性来设置的；

＜meta http-equiv="windows-Target" contect="_top"＞强制页面在当前窗口中以独立页面显示，可以防止自己的网页被别人当作一个frame页调用；

＜meta http-equiv="Page-Enter" contect="revealTrans(duration=10,transtion=50)"＞和＜meta http-equiv="Page-Exit"contect="revealTrans(duration=20，transtion=6)"＞设定进入和离开页面时的特殊效果，这个功能即FrontPage中的“格式/网页过渡”，不过所加的页面不能够是一个frame页面。

汪杰 2007-01-22 08:29 发表评论
]]>显示隐藏nextSibling.style.displayhttp://www.cnitblog.com/asfman/articles/20979.html汪杰汪杰Fri, 22 Dec 2006 08:13:00 GMThttp://www.cnitblog.com/asfman/articles/20979.htmlhttp://www.cnitblog.com/asfman/comments/20979.htmlhttp://www.cnitblog.com/asfman/articles/20979.html#Feedback1http://www.cnitblog.com/asfman/comments/commentRss/20979.htmlhttp://www.cnitblog.com/asfman/services/trackbacks/20979.html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="JavaScript" type="text/javascript">
var curr=null;

function initFaq(){
  var faq=document.getElementById("faq");
  var hs=faq.getElementsByTagName("h5");
  var ps=faq.getElementsByTagName("p");
  for (var i=0;i<hs.length;i++){
    hs[i].onclick=function(){
      if (curr!=null)
        curr.nextSibling.style.display='none';
      var s=this.nextSibling.style;
      s.display=((s.display=='none')?'':'none');
      if (s.display!='none')
        curr=this;
      else
        curr=null;
    }
    hs[i].style.cursor='pointer';
    ps[i].style.display='none';
 
  }
}
</script>
</head>
<body onload="initFaq()">
<ul id="faq">
  <li>
    <h5>问题1</h5>
    <p>答：1略略略略略略略略略略略略略略略略略略略略略略略略略略</p>
  </li>
  <li>
    <h5>问题2</h5>
    <p>答：2略略略略略略略略略略略略略略略略略略略略略略略略略略</p>
  </li>
  <li>
    <h5>问题3</h5>
    <p>答：3略略略略略略略略略略略略略略略略略略略略略略略略略略</p>
  </li>
  <li>
    <h5>问题4</h5>
    <p>答：4略略略略略略略略略略略略略略略略略略略略略略略略略略</p>
  </li>
</ul>
</body>
</html>



汪杰 2006-12-22 16:13 发表评论
]]>图片飘飘http://www.cnitblog.com/asfman/articles/17765.html汪杰汪杰Mon, 09 Oct 2006 07:50:00 GMThttp://www.cnitblog.com/asfman/articles/17765.htmlhttp://www.cnitblog.com/asfman/comments/17765.htmlhttp://www.cnitblog.com/asfman/articles/17765.html#Feedback1http://www.cnitblog.com/asfman/comments/commentRss/17765.htmlhttp://www.cnitblog.com/asfman/services/trackbacks/17765.html

汪杰 2006-10-09 15:50 发表评论
]]>utf-8在responseBody中得编码方式 http://www.cnitblog.com/asfman/articles/9195.html汪杰汪杰Sat, 15 Apr 2006 07:10:00 GMThttp://www.cnitblog.com/asfman/articles/9195.htmlhttp://www.cnitblog.com/asfman/comments/9195.htmlhttp://www.cnitblog.com/asfman/articles/9195.html#Feedback1http://www.cnitblog.com/asfman/comments/commentRss/9195.htmlhttp://www.cnitblog.com/asfman/services/trackbacks/9195.html utf-8在responseBody中得编码方式
239|187| 191|233| xxx|xxx| 233|xxx|xxx|233| xxx|xxx| ...
应用示例代码：
<html>
<body>
<div id="mt"></div>
<script language="VBScript" type="text/VBScript">
Function rsCode(vIn,num)
rsCode=AscB(MidB(vIn,num,1))
End Function

Function rsLength(vIn)
rsLength=LenB(vIn)
End Function

Function rsChar(num)
rsChar=Chr(num)
End Function
</script>
<script language="JavaScript" type="text/JavaScript">
//虽然也是参考了很多别人的资料才写出来的，但也花了不少功夫，转载请注明出处
//you can use if freely, but you should keep the words below!
//Copyright shouhaimu(QQ:30836570)
self.onerror=null;
var Http = new ActiveXObject("Microsoft.XMLHTTP");
Http.open("GET","2.htm",false);
//我存了俩个文件，1.htm为utf-8格式，2.htm为gb2312格式，现在用此程序均成功加载并正常显示。
Http.send();
var x=Http.responseBody;
var utf_8=(rsCode(x,1)==239&&rsCode(x,2)==187&&rsCode(x,3)==191)
if(utf_8)mt.innerHTML=Http.responseText;
Http=null;
if(!utf_8)
{
var y=rsLength(x),z,i=1,t="";
while(i<=y)
{
z=rsCode(x,i++);
if(z<128)
{
t+=z;
}
else
{
t+=rsChar(z*256+rsCode(x,i++));
}
}
mt.innerHTML=t;
}
</script>
</body>
</html>
添加评论 | 阅读评论 (2)
13:45:41  |  固定链接 | 引用通告 (0) | 记录它 | 脚本技术
xmlHttp.responseBody的重编码函数

function reCode(b){
//***Author: Hutia
//last modified by shouhaimu(QQ:30836570)
//速度已提高近50倍
var glbEncode=new Array();
var t=rsB(b);
t=escape(t).replace(/%u/g,"").replace(/(.{2})(.{2})/g,"%$2%$1").replace(/%([A-Z].)%(.{2})/g,"@$1$2");
t=t.split("@");
var i=0,j=t.length,k;
while(++i<j)
{
k=t[i].substring(0,4);
if(!glbEncode[k])glbEncode[k]=escape(rsChar(eval("0x"+k))).substring(1,6);
t[i]=glbEncode[k]+t[i].substring(4);
}
return unescape(t.join("%"));
}

调用得VBS函数

Function rsB(vIn)
rsB = MidB(vIn,1)
End Function

Function rsChar(vIn)
rsChar = Chr(vIn)
End Function


汪杰 2006-04-15 15:10 发表评论
]]>利用userData实现客户端保存表单数据http://www.cnitblog.com/asfman/articles/8972.html汪杰汪杰Tue, 11 Apr 2006 00:07:00 GMThttp://www.cnitblog.com/asfman/articles/8972.htmlhttp://www.cnitblog.com/asfman/comments/8972.htmlhttp://www.cnitblog.com/asfman/articles/8972.html#Feedback0http://www.cnitblog.com/asfman/comments/commentRss/8972.htmlhttp://www.cnitblog.com/asfman/services/trackbacks/8972.html
作者：bencalie  整理日期：2004年6月15日 

对于多数网页制作的朋友，实现在客户端保存在网页表单上的信息，比较多的是采用Cookie技术来实现，这些功能例如：下拉列表框选择的选项，文本框输入的数据等。事实上，我们可以利用微软DHTML默认行为中的userData行为来实现这个功能。


因为很多网友问到这样的问题，整理了一下，并提供了三个示例。下面将就该行为的使用做一个介绍：


UserData 行为（userData Behavior）：


1、说明：

userData行为通过将数据写入一个UserData存储区（UserData store）来保存数据，userData可以将数据以XML格式保存在客户端计算机上，如果你用的是 Windows 2000 或者 Windows XP，是保存在C:\Documents and Settings\Liming\UserData\文件夹下（如果操作系统不是安装在C盘，那么C就应该是操作系统所在的分区）。


该数据将一直存在，除非你人为删除或者用脚本设置了该数据的失效期。


userData行为提供了一个比Cookie更具有动态性和更大容量的数据结构。每页的UserData存储区数据大小可以达到64 Kb，每个域名可以达到640 Kb。

userData行为通过sessions为每个对象分配UserData存储区。使用save和load方法将UserData存储区数据保存在缓存（cache）中。一旦UserData存储区保存以后，即使IE浏览器关闭或者刷新了，下一次进入该页面，数据也能够重新载入而不会丢失。

出于安全的考虑，相同协议使用同一个文件夹保存UserData存储区数据。

For security reasons, a UserData store is available only in the same directory and with the same protocol used to persist the store.


在HTML、HEAD、TITLE和STYLE标记上应用了userData行为后使用save和load方法将会出错。
Setting the userData behavior (proposed) class on the HTML, HEAD, TITLE, or STYLE object causes an error when the save or load method is called.


必须在行内或者文档的HEAD部分宣告如下样式：


   <STYLE>
      .userData {behavior:url(#default#userdata);}
   </STYLE>


userData行为可用于Microsoft? Win32?和Unix平台上的IE 5.0以上版本，不支持Netscape。


2、语法：

HTML     <ELEMENT STYLE="behavior:url('#default#userData')" ID=sID>

Script     object.style.behavior = "url('#default#userData')" 

             object.addBehavior ("#default#userData")

注：sID参数是一个可以描述该标记的唯一id。ID是可选的，但如果有，可以在脚本中方便地对该标记加以控制。


3、成员：


expires

  设置或取得使用userData行为保存数据的失效日期。

    脚本语法：对象ID.expires = 参数

    参数是一个使用UTC（Universal Time Coordinate，世界调整时间）格式表示失效日期的字符串。该属性可以读写，没有默认值。浏览器会对比这个日期和当前日期，如果到期，该数据就自动失效。


getAttribute()

  取得指定的属性值。


load(存储区名)

  从UserData存储区载入存储的对象数据。


removeAttribute()

  从对象中删除指定的属性值。


save(存储区名)

  将对象数据存入一个UserData存储区。


setAttribute()

  设置指定的属性值。


XMLDocument

  取得存储该对象数据的XML DOM引用。


具体用法可以查看MSDN（http://msdn.microsoft.com）


4、示例

示例一：文本框标记的应用（Microsoft）
<HTML>
<HEAD>
<STYLE>
   .userData {behavior:url(#default#userdata);}
</STYLE>
<SCRIPT>
function fnSaveInput(){
   var oPersist=oPersistForm.oPersistInput;
   oPersist.setAttribute("sPersist",oPersist.value); //将oPersist.value存储为sPersist属性
   oPersist.save("oXMLBranch");  //存储在名为oXMLBranch的UserData存储区
}
function fnLoadInput(){
   var oPersist=oPersistForm.oPersistInput;
   oPersist.load("oXMLBranch");  //载入在名为oXMLBranch的UserData存储区
   oPersist.value=oPersist.getAttribute("sPersist"); //将sPersist属性赋值给oPersist.value
}
</SCRIPT>
</HEAD>
<BODY>
<FORM ID="oPersistForm">
<INPUT CLASS="userData" TYPE="text" ID="oPersistInput">
<INPUT TYPE="button" VALUE="Load" onclick="fnLoadInput()">
<INPUT TYPE="button" VALUE="Save" onclick="fnSaveInput()">
</FORM>
</BODY>
</HTML>
   提示：你可以先修改部分代码再运行

示例二：Checkbox标记的应用
<style>
      .userData {behavior:url(#default#userdata);}
</style>
<input type=checkbox id=chkbox1 class=userData>
<script>
var obj=document.all.chkbox1;
obj.attachEvent('onclick',saveChecked)
function saveChecked(){
obj.setAttribute("bCheckedValue",obj.checked);
obj.save("oChkValue");
}
window.attachEvent('onload',loadChecked)
function loadChecked(){
obj.load("oChkValue");
var chk=(obj.getAttribute("bCheckedValue")=="true")?true:false;
obj.checked=chk;
}
</script>
   提示：你可以先修改部分代码再运行

示例三：Select标记的应用
<style>
      .userData {behavior:url(#default#userdata);}
</style>
<select id="select1"  class="userData">
<option>option1</option>
<option>option2</option>
<option>option3</option>
<option>option4</option>
</select>
<script>
var obj=document.all.select1;
obj.attachEvent('onchange',saveSelectedIndex)
function saveSelectedIndex(){
obj.setAttribute("sSelectValue",obj.selectedIndex);
obj.save("oSltIndex");
}
window.attachEvent('onload',loadSelectedIndex)
function loadSelectedIndex(){
obj.load("oSltIndex");
obj.selectedIndex=obj.getAttribute("sSelectValue");
}
</script>


汪杰 2006-04-11 08:07 发表评论
]]>DHTML Scriptlets 容器对象参考手册http://www.cnitblog.com/asfman/articles/8959.html汪杰汪杰Mon, 10 Apr 2006 13:10:00 GMThttp://www.cnitblog.com/asfman/articles/8959.htmlhttp://www.cnitblog.com/asfman/comments/8959.htmlhttp://www.cnitblog.com/asfman/articles/8959.html#Feedback0http://www.cnitblog.com/asfman/comments/commentRss/8959.htmlhttp://www.cnitblog.com/asfman/services/trackbacks/8959.html
DHTML DHTML小脚本窗口对象扩展参考

说明
    在以一种DHTML小脚本创建脚本时，可以使用动态HTML（DHTML）对象模型的下述专门扩展内容。所有扩展可在DHTML window.external对象中找到。
属性
    frozen , scrollbar, selectableContent, version
方法
    bubbleEvent , raiseEvent, setContextMenu

bubbleEvent方法
    按照标准事件，从一个DHTML小脚本向宿主应用程序发送事件通知。
适用于
    DHTML window.external对象
语法
    window.external.bubbleEvent ()
说明
    使用这种方法把一个标准DHTML事件（例如onbuttonclick、onmousemove、onkeypress）从一个DHTML小脚本传递到宿主应用程序。
frozen属性
    表示小脚本容器对象是否准备好处理来自DHTML小脚本的事件。
适用于
    DHTML window.external对象
语法
    boolean = window.external.frozen
说明
    这个属性是只读型的。当其为真时，事件不能被小脚本容器对象所接受，原因是这个容器尚未准备好。当其为假时，容器将接受事件通知。
raiseEvent方法
    把一个定制事件通知从一个DHTML小脚本传递给宿主应用程序。
适用于
    DHTML window.external对象
语法
    window.external.raiseEvent (eventName, eventObject)
参量
    eventName
    一个串，作为典型标识要传递的事件
    eventObject
    一种变式类型，典型情况包含一个引用，这个引用指向DHTML小脚本上触发事件的对象。
说明
    这个方法是小脚本容器对象的onscriptletevent事件的补充。使用这种方法把有关非标准事件的情况通知给宿主应用程序。
scrollbar属性
    规定小脚本容器对象是否让DHTML小脚本显示滚动条。
适用于
    DHTML Window.external对象
语法
    window.external.scrollbar = boolean
    －或者－
    ScriptContainer.scrollbar = boolean
说明
    这个属性可以在设计期间和在运行期间设置。作为默认，这个属性的值是假。如果把这个属性设置为真，则：
    纵向滚动条总出现在该小脚本容器对象中。如果DHTML小脚本的高度小于小脚本容器对象的窗口高度，则纵向滚动条关闭。
    如果这个小脚本的宽度大于小脚本容器对象的窗口宽度出现横向滚动条。
selectableContent属性
    规定用户是否可以选择DHTML小脚本的内容。
适用于
    DHTML Window.external对象
语法
    window.external.selectableContent = boolean
说明
    按照默认，这个属性的值是假。如果这个属性是真，用户可以在DHTML小脚本中选择文本或对象，并且在小脚本容器对象中显示出来，然后复制或拖动它们。如果这个属性是假，用户可以点击小脚本中的事件，但是可以不选择它们。
setContextMenu方法
    构造一个描述体菜单，并在用户右击小脚本容器对象中的DHTML小脚本时显示出来。
适用于
    DHTML window.external对象
语法
    window.external.setContextMenu(menuDefinition)
参量
    menuDefinition
    定义包含在描述体菜单中的命令文本和命令。一个一维阵列，在这个阵列中使用两个元素阵列，n和n + 1，定义菜单项：
    Element命令文本。快捷键定义为开始用“&”字符
    Element n + 1 在命令被选中时调用的方法。不能把参量传递给该方法。
注意：
    描述体菜单只能在由VBScript或JavaScript编写的脚本中定义，因为这两种语言建立的阵列可被setContextMenu方法访问。
举例
    下边的脚本定义一个描述体菜单，带有三个命令：

<script language="VBScript" for ="Menu" Event="onclick">
    'define array
    dim menuItems(6) '3 commands 
    'First menu item
    menuItems(0) = "Display the &time" 'Command text
    menuItems(1) = "SetTime"
    'Second menu item
    menuItems(2) = "Display the &date"     'Command text   
    menuItems(3) = "SetDate"
    'Third menu item
    menuItems(4) = "Display the document t&itle" 'Command text
    menuItems(5) = "SetTitle"
    'Assigns the menu to the scriptlet
    window.external.setContextMenu(MenuItems)
</script>

version属性
    返回版本和用于DHTML小脚本的小脚本容器对象平台。
适用于
    DHTML Window.external对象
语法
    version = window.external.version
说明
    这个属性是只读型的。版本返回到格式N.nnnn platform中。其中N是表示主版本号的整数；nnnn是任意个字符（空格除外），表示次版本号；platform是平台（win32、mac和alpha等）。下边是版本号的一个例子：
    1.0a win32
    可以使用version属性确定页面是作为一个DHTML小脚本来使用还是作为一个单独Web页面来使用。使用下边这样一个语句：
    contro1Mode = (typeof(window.external.version) == "string"
    如果在这个语句执行之后，contro1Mode的值是真，这个页面就作为一个DHTML小脚本来使用。否则，这个页面就作为一个独立页面来使用。
DHTML参考
说明
    小脚本容器对象用作一个应用程序中的宿主DHTML小脚本。它所提供的属性和事件都作为所有DHTML小脚本的标准扩展内容而随时可用。当人们在应用程序中用DHTML小脚本进行工作时，可以使用下述小脚本容器对象中的属性与事件。
属性
    scrollbar、event、readyState和url
事件
    onclick事件, ondblclick事件, onkeydown事件, onkeypress事件, onkeyup事件, onmousedown, onmousedown事件, onmousemove事件, onreadystatechange事件, onscriptletevent事件
EVENT属性
    提供从一个DHTML小脚本传递出来的有关标准DHTML事件的状态信息。
适用于
    Scriptlet Container对象
语法
    value = ScriptContainer.event.member
说明
    这个属性是只读型的。该event属性提供一种获取有关标准事件状态信息的方式。这些来自小脚本的标准事件是：onclick、ondblclick、onkeydown、onkeypress、onkeyup、onmousedown、onmousemove和onmouseup。这个属性负责对DHTML event对象作出响应。
    要想获取状态信息，可以查询event属性成员的值。这些成员包括：altKey、ctrlKey、keyCode、offsetX、offsetY、shiftKey、srcElement和type等。下边脚本例子说明如何使用event属性获取有关标准事件的更多信息：
sub ScriptContainer1_onkeyup( )
    MsgBox "The character typed was" & ScriptContainer1.event.keyCode
    MsgBox "The Alt key state was" & ScriptContainer1.event.altkey
    MsgBox "The Ctrl key state was" & ScriptContainer1.event.ctrlkey
    MsgBox "The Shift key state was" & ScriptContainer1.event.shiftkey
    MsgBox "The mouse was at" & offsetX & ", " & offsetY
    MsgBox "The affedcted control was" & ScriptContainer1.event.srcElement
    MsgBox "The event was" & ScriptContainer1.event.type
End Sub

    关于event属性的信息，详见DHTML文档中的event对象。

ONCLICK事件
    在一个DHTML小脚本转发一个onclick事件时发送。
适用于
    Scriptlet Container对象
Visual Basic语法
    ScriptContainer_onclick()
JavaScript语法
    <SCRIPT LANGUAGE="JavaScript" FOR="ScriptContainer" EVENT="onclick">
说明
    如果下述两个条件都是真，则这个小脚本容器对象就接受这个事件：
    · DHTML小脚本包含onclick事件的处理程序
    · DHTML小脚本处理程序调用bubbleEvent方法，把这个事件传递给宿主应用程序。
可以借助于查询小脚本对象容器事件属性的办法获得有关这个事件的状态信息。
ONDBLCLICK事件
    在一个DHTML小脚本转发一个ondblclick事件的时候发送。
适用于
    Scriptlet Container对象
Visual Basic语法
    ScriptContainer_ondblClick()
JavaScript语法
    <SCRIPT LANGUAGE="JavaScript" FOR="ScriptContainer" EVENT="ondblClick">
说明
    如果下述两个条件都是真，则这个小脚本容器对象就接受这个事件：
    · DHTML小脚本包含ondblclick事件的处理程序
    · DHTML小脚本处理程序调用bubbleEvent方法，把这个事件传递给宿主应用程序。
    可以借助于查询小脚本对象容器事件属性的办法获得有关这个事件的状态信息。
ONKEYDOWN事件
    在一个DHTML小脚本转发一个onkeydown事件的时候发送。
适用于
    Scriptlet Container对象
Visual Basic语法
    ScriptContainer_onkeydown()
JavaScript语法
    <SCRIPT LANGUAGE="JavaScript" FOR="ScriptContainer" EVENT"="onkeydown">
说明
    如果下述两个条件都是真，这个小脚本容器对象就接受这个事件：
    DHTML小脚本包含onkeydown事件的处理程序
    DHTML小脚本处理程序调用bubbleEvent方法，把这个事件传递给宿主应用程序。
    可以借助于查询小脚本对象容器事件属性的办法获得有关这个事件的状态信息。
ONKEYPRESS事件
    在一个DHTML小脚本转发一个onkeypress事件的时候发送。
适用于
    Scriptlet Container对象
Visual Basic语法
    ScriptContainer_onkeypress()
JavaScript语法
    <SCRIPT LANGUAGE="JavaScript" FOR="ScriptContainer" EVENT"="onkeypress">
说明
    如果下述两个条件都是真，则这个小脚本容器对象就接受这个事件：
    DHTML小脚本包含onkeypress事件的处理程序 
    DHTML小脚本处理程序调用bubbleEvent方法，把这个事件传递给宿主应用程序。 
    可以借助于查询小脚本对象容器事件属性的办法获得有关这个事件的状态信息。
ONKEYUP事件
    在一个DHTML小脚本转发一个onkeyup事件的时候发送。
适用于
    Scriptlet Container对象
Visual Basic语法
    ScriptContainer_onkeyup()
JavaScript语法
    <SCRIPT LANGUAGE="javaScript" FOR="ScriptContainer" EVENT="onkeyup">
说明
    如果下述两个条件都是真，则这个小脚本容器对象就接受这个事件：
    · DHTML小脚本包含onkeyup事件的处理程序
    · DHTML小脚本处理程序调用bubbleEvent方法，把这个事件传递给宿主应用程序。
    可以借助于查询小脚本对象容器事件属性的办法获得有关这个事件的状态信息。
ONMOUSEDOWN, ONMOUSEUP事件
    在一个DHTML小脚本转发一个onmousedown 或 onmouseup事件时发送。
适用于
    Scriptlet Container对象
Visual Basic语法
    ScriptContainer_ onmousedown()
    ScriptContainer_ onmouseup()
JavaScript语法
    <SCRIPT LANGUAGE="JavaScript" FOR="ScriptContainer" EVENT="onmousedown"> 
    <SCRIPT LANGUAGE="JavaScript" FOR="ScriptContainer" EVENT="onmouseup">
说明
    如果下述两个条件都是真，则这个小脚本容器对象就接受这个事件：
    · DHTML小脚本包含onmousedown 或 onmouseup事件的处理程序
    · DHTML小脚本处理程序调用bubbleEvent方法，把这个事件传递给宿主应用程序。
    可以借助于查询小脚本对象容器事件属性的办法获得有关这个事件的状态信息。
ONMOUSEMOVE事件
    发送这个事件，表示一个DHTML小脚本是否装载完毕。
适用于
    Scriptlet Container对象
Visual Basic语法
    ScriptContainer_ onmousemove()
JavaScript语法
    <SCRIPT LANGUAGE="JavaScript" FOR="ScriptContainer" EVENT="onmousemove">
说明
    如果下述两个条件都是真，则这个小脚本容器对象就接受这个事件：
    · DHTML小脚本包含onmousemove事件的处理程序
    · DHTML小脚本处理程序调用bubbleEvent方法，把这个事件传递给宿主应用程序。
    可以借助于查询小脚本对象容器事件属性的办法获得有关这个事件的状态信息。

ONREADYSTATECHANGE事件
    发送这个事件，表示一个DHTML小脚本是否装载完毕。
适用于
    Scriptlet Container对象
Visual Basic语法
    ScriptContainer_ onreadystatechange()
JavaScript语法
    <SCRIPT LANGUAGE="JavaScript" FOR="ScriptContainer" EVENT="onreadystatechange">
说明
    在一个DHTML小脚本装载过程中，这个事件激发多次。最后一次激发表示小脚本的HTML页面已经完全装载，因而它的脚本可以调用。为测试当前状态，要获取小脚本容器对象的readystate（就绪状态）属性的值。

ONSCRIPTLETEVENT事件
    通知小脚本容器对象：在一个DHTML小脚本中已经出现了一个客户事件。
适用于
    Scriptlet Container对象
语法
    ScriptContainer_ onscriptletevent(eventName, eventObject)
参量
    eventName
    一个串，典型情况是表示正在传递的事件
    eventObject
    一种变式类型，典型情况是到小脚本上一个对象的引用子。
注意：
    这两种参量的确切内容取决在小脚本对应的raiseEvent方法中传递的信息是什么。
说明
    这个事件是小脚本raiseEvent方法的一种补充。
READYSTATE属性
    返回寄宿在容器对象中一个DHTML小脚本装载状态的有关信息。
适用于
    Scriptlet Container对象
语法
    ScriptContainer.readyState = integer
说明
    这个属性是只读型的。只在运行期间使用。
    这个readyState属性返回1与4之间的一个整数，表示小脚本的装载状态。这些数及说明如下：
    值 说明 
    1或2 未定义 
    3 小脚本文本已经装载，但是小脚本的HTML页面上控件尚不能起作用 
    4 小脚本装载完毕在一般情况下 
    在readyState属性置为4之前，不要企图访问小脚本的功能。可以使用一个处理程序（handler）通告查看onreadystatechange事件的办法来检查这个属性的值。
URL程序
    规定DHTML小脚本 .htm文件的“统一资源定位程序”（URL），并显示在小脚本容器对象中。
适用于
    Scriptlet Container对象
语法
    ScriptContainer.url = URLString
说明
    在本地也可以在Web服务器上规定任何 .htm文件的URL。这个属性只能在设计期间设置。
重点：
    如果想把小脚本加到一个Web页面上，不要把这个属性设置成当前页面的URL。这样做导致页面的重复调用，从而使得浏览器功能停止。
    如果在拥有一个Web描述体（例如Microsoft Internet Explorer）的宿主应用程序中使用DHTML小脚本，可以规定绝对路径（例如http://myserver/start.htm）或者规定不包含协议、域名路径的相对路径（例如page2.htm）。如果规定一个相对URL，这个路径就是相对于小脚本出现的页面的。
    如果规定的URL是无效的，便显示出错信息，但是小脚本容器对象依然空着。

posted on 2005-04-15 21:42 birdshome 阅读(480) 评论(1)  编辑 收藏收藏至365Key 所属分类: Jscript&Dhtml开发



汪杰 2006-04-10 21:10 发表评论
]]>使用DOM来创建页面元素的一些问题 http://www.cnitblog.com/asfman/articles/8958.html汪杰汪杰Mon, 10 Apr 2006 13:00:00 GMThttp://www.cnitblog.com/asfman/articles/8958.htmlhttp://www.cnitblog.com/asfman/comments/8958.htmlhttp://www.cnitblog.com/asfman/articles/8958.html#Feedback0http://www.cnitblog.com/asfman/comments/commentRss/8958.htmlhttp://www.cnitblog.com/asfman/services/trackbacks/8958.html
    对于动态HTML编程，IE实现了两套模型：一套是以操作innerHTML为主的狭义的DHTML，一套是以集合方式操作(appendChild)页面元素对象的DOM(Document Object Model)。DHTML方式(我本文说的DHTML都默认指的对于innerHTML进行操作的编程方式，不是广义的DHTML。)直接操作html代码片断，主要靠Web程序员使用字符串拼接来生成页面元素，这是一种高效的动态页面操作方式，不过似乎少些编程逻辑的味道，代码中往往散布着大量不完整的html代码片断。而DOM方式进行动态页面编程，在逻辑上是一种对集合和元素对象的操作，编程逻辑比较清晰，不过效率上有一些差别。具体使用什么方式来实现动态Web页面，大多数情况下是个人的喜好问题，除非在效率上必须锱铢必较。

    使用DOM，最常用的方法就是document.createElement(sTag)，sTag是一个合法的html标签名字(tagName)。我们创建好一个html元素对象后，对它的属性进行赋值，然后insertBefore或appendChild到页面的DOM对象树中。这里msdn提醒了几个注意事项：

    1、不能通过编程方式动态创建frame和iframe元素(IE 5.0及以下)；
    2、input元素被创建后默认的类型是input type='text'；
    3、需要使用其他类型的input元素，需要在把input对象放入DOM对象树之前给input.type赋予你希望的类型，否则在input insert或append进入DOM对象树后不能再修改；
    4、button元素被创建后默认的类型是普通按钮，要使用其它类型按钮，需要遵循和问题3相同的注意事项；
    5、不能为通过向元素对象赋值得方式，为元素对象添加NAME属性(这个在"细说HTML元素的ID和NAME属性详解"一文里也是提过的)。
    6、sTag其实不只限于html标签名，任何合法的html元素语句都可以。

    下面说一下我遇到的问题，当我在使用DOM方式进行动态页面创建的时候，发现不能使用普通的DOM方式为input type='checkbox'和input type='radio'赋初值。即下面的语句：
 var input = document.createElement('INPUT');
 input.type = 'checkbox';
 input.checked = true;
 document.body.appendChild(input);

 input = document.createElement('INPUT');
 input.type = 'radio';
 input.checked = true;
 document.body.appendChild(input);

    不能得到我期望的效果： ，而只能得到： 。

    而要得到我期望的效果，需要混合DHTML和DOM两种方式就是说我必须在sTag里就构建好的属性，使用如下代码：

 var input = document.createElement('<INPUT checked>');
 input.type = 'checkbox';
 document.body.appendChild(input);

 input = document.createElement('<INPUT checked>');
 input.type = 'radio';
 document.body.appendChild(input);

    才能得到被赋予初值得INPUT元素： 。

posted on 2005-04-17 19:25 birdshome 阅读(1871) 评论(8)  编辑 收藏收藏至365Key 所属分类: Jscript&Dhtml开发

评论

# re: 使用DOM来创建页面元素的一些问题  回复  

交换一下顺序就行了：
var input = document.createElement('INPUT');
input.type = 'checkbox';
document.body.appendChild(input);
input.checked = true;

input = document.createElement('INPUT');
input.type = 'radio';
document.body.appendChild(input);
input.checked = true;
2005-04-17 19:43 | skywood

# re: 使用DOM来创建页面元素的一些问题  回复  

good:) 仔细想想，由于input没有被append之前，它的类型是可变更的，而除了checkbox和radio外，其它类型的INPUT元素对象的checked属性是没有意义的@_@。IE这么处理看来也就没有错了。
2005-04-17 20:15 | birdshome

# re: 使用DOM来创建页面元素的一些问题  回复  

IFRAME每问题啊。一直都是直接创建一个的。
2005-04-17 20:44 | Lostinet

# re: 使用DOM来创建页面元素的一些问题  回复  

@Lostinet
偶faint！没有注意，msdn说的是IE5.0。不过现在很难找了，好像win2k默认带的5.0，而且win2k+sp4默认是啥我还不确定...
2005-04-17 20:58 | birdshome

# re: 使用DOM来创建页面元素的一些问题  回复  

kaka,果然有帮助，上次就是遇到一个问题，在google上好一顿搜，最后在你的blog上找到了几乎是唯一的答案:)
2005-04-18 11:19 | robaggio

# re: 使用DOM来创建页面元素的一些问题  回复  

可是为什么创建了一个text类型的input之后
想再要移动它，无论怎么设置left值都没有效果呢
2005-05-11 16:39 | dfdf

# re: 使用DOM来创建页面元素的一些问题  回复  

@dfdf
把创建的代码贴来看一下，设置position了吗？
2005-05-11 16:47 | birdshome

# re: 使用DOM来创建页面元素的一些问题  回复  

不錯，正是我需要，非常感謝！


汪杰 2006-04-10 21:00 发表评论
]]>IE功能汇总http://www.cnitblog.com/asfman/articles/8728.html汪杰汪杰Mon, 03 Apr 2006 07:56:00 GMThttp://www.cnitblog.com/asfman/articles/8728.htmlhttp://www.cnitblog.com/asfman/comments/8728.htmlhttp://www.cnitblog.com/asfman/articles/8728.html#Feedback0http://www.cnitblog.com/asfman/comments/commentRss/8728.htmlhttp://www.cnitblog.com/asfman/services/trackbacks/8728.html      classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2></OBJECT>
<INPUT onclick=document.all.WebBrowser.ExecWB(1,1) type=button value=打开 name=Button1>
<INPUT onclick=document.all.WebBrowser.ExecWB(4,1) type=button value=另存为 name=Button2>
<INPUT onclick=document.all.WebBrowser.ExecWB(10,1) type=button value=属性 name=Button3>
<INPUT onclick=document.all.WebBrowser.ExecWB(6,1) type=button value=打印 name=Button>
<INPUT onclick=document.all.WebBrowser.ExecWB(8,1) type=button value=页面设置 name=Button4>
<INPUT onclick=window.location.reload() type=button value=刷新 name=refresh>
<INPUT onclick="window.external.ImportExportFavorites(true,'');" type=button value=导入收藏夹 name=Button5>
<INPUT onclick="window.external.ImportExportFavorites(false,'');" type=button value=导出收藏夹 name=Button32>
<INPUT onclick="window.external.AddFavorite(location.href, document.title)" type=button value=加入收藏夹 name=Button22>
 <INPUT onclick="window.external.ShowBrowserUI('OrganizeFavorites', null)" type=button value=整理收藏夹 name=Submit2>
<INPUT onclick='window.location="view-source:" + window.location.href' type=button value=查看源文件 name=Button7>
<INPUT onclick="window.external.ShowBrowserUI('LanguageDialog', null)" type=button value=语言设置 name=Button6>
 <INPUT onclick="document.execCommand('Cut')" type=button value=剪切>
 <INPUT onclick="document.execCommand('Copy')" type=button value=拷贝>
 <INPUT onclick="document.execCommand('Paste')" type=button value=粘贴>
<INPUT onclick="document.execCommand('Undo')" type=button value=撤消>
 <INPUT onclick="document.execCommand('Delete')" type=button value=删除>
<INPUT onclick="document.execCommand('Bold')" type=button value=黑体>
 <INPUT onclick="document.execCommand('Italic')" type=button value=斜体>
 <INPUT onclick="document.execCommand('Underline')" type=button value=下划线>
 <INPUT onclick="document.execCommand('stop')" type=button value=停止>
 <INPUT onclick="document.execCommand('SaveAs')" type=button value=保存>
 <INPUT onclick="document.execCommand('Saveas',false,'c:\\test.htm')" type=button value=另存为>
<INPUT onclick="document.execCommand('FontName',false,fn)" type=button value=字体>
<INPUT onclick="document.execCommand('FontSize',false,fs)" type=button value=字体大小>
<INPUT onclick="document.execCommand('refresh',false,0)" type=button value=刷新>
<INPUT onclick=window.location.reload() type=button value=刷新>
 <INPUT onclick=history.go(1) type=button value=前进>
 <INPUT onclick=history.go(-1) type=button value=后退>
 <INPUT onclick=history.forward() type=button value=前进>
 <INPUT onclick=history.back() type=button value=后退>
 <INPUT onclick='window.external.ImportExportFavorites(true,"http://localhost");' type=button value=导入收藏夹>
<INPUT onclick='window.external.ImportExportFavorites(false,"http://localhost");' type=button value=导出收藏夹>
<INPUT onclick="window.external.ShowBrowserUI('OrganizeFavorites', null)" type=button value=整理收藏夹>
<INPUT onclick="window.location = 'view-source:'+ window.location.href" type=button value=查看源文件>
<INPUT onclick="window.external.ShowBrowserUI('LanguageDialog', null)" type=button value=语言设置>
<INPUT onclick="window.external.AddFavorite('http://www.cnblogs.com/hbzxf/', 阿好空间)" type=button value=加入收藏夹>
<INPUT onclick="window.external.addChannel('http://www.cnblogs.com/hbzxf/')" type=button value=加入到频道>
<INPUT onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.cnblogs.com/hbzxf/')" type=button value=设成主页>

汪杰 2006-04-03 15:56 发表评论
]]>表格斜线http://www.cnitblog.com/asfman/articles/8725.html汪杰汪杰Mon, 03 Apr 2006 07:54:00 GMThttp://www.cnitblog.com/asfman/articles/8725.htmlhttp://www.cnitblog.com/asfman/comments/8725.htmlhttp://www.cnitblog.com/asfman/articles/8725.html#Feedback0http://www.cnitblog.com/asfman/comments/commentRss/8725.htmlhttp://www.cnitblog.com/asfman/services/trackbacks/8725.html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

 <script Language="javascript">
function a(x,y,color)
{document.write("<img border='0' style='position: absolute; left: "+(x+20)+"; top: "+(y+20)+";background-color: "+color+"' src='px.gif' width=1 height=1>")}
</script>

<body leftmargin=20 topmargin=20>
<TABLE border=0 bgcolor="000000" cellspacing="1" width=400>
<TR bgcolor="FFFFFF">
    <TD id="td1"> </TD>
    <TD>张三</TD>
    <TD>李四</TD>
    <TD>王五</TD>
</TR>
<TR bgcolor="FFFFFF">
    <TD>数学</TD>
    <TD>55</TD>
    <TD>66</TD>
    <TD>77</TD>
</TR>
<TR bgcolor="FFFFFF">
    <TD>英语</TD>
    <TD>99</TD>
    <TD>68</TD>
    <TD>71</TD>
</TR>
<TR bgcolor="FFFFFF">
    <TD>语文</TD>
    <TD>33</TD>
    <TD>44</TD>
    <TD>55</TD>
</TR>
</TABLE>
<script>
function line(x1,y1,x2,y2,color)
{
    var tmp
    if(x1>=x2)
    {
        tmp=x1;
        x1=x2;
        x2=tmp;
        tmp=y1;
        y1=y2;
        y2=tmp;
    }
    for(var i=x1;i<=x2;i++)
    {
        x = i;
        y = (y2 - y1) / (x2 - x1) * (x - x1) + y1;
        a(x,y,color);
    }
}
//line(1,1,100,100,"000000");
line(td1.offsetLeft,td1.offsetTop,td1.offsetLeft+td1.offsetWidth,td1.offsetTop+td1.offsetHeight,'#000000')
</script>
</BODY>
</HTML>



汪杰 2006-04-03 15:54 发表评论
]]>如何在一段文字里点一下就可以在里面插入一段文字http://www.cnitblog.com/asfman/articles/8723.html汪杰汪杰Mon, 03 Apr 2006 07:53:00 GMThttp://www.cnitblog.com/asfman/articles/8723.htmlhttp://www.cnitblog.com/asfman/comments/8723.htmlhttp://www.cnitblog.com/asfman/articles/8723.html#Feedback0http://www.cnitblog.com/asfman/comments/commentRss/8723.htmlhttp://www.cnitblog.com/asfman/services/trackbacks/8723.html

如何在一段文字里点一下就可以在里面插入一段文字？
<SCRIPT LANGUAGE="JavaScript">
<!--
document.onclick =function(){
    var sel = document.selection;
    if (sel!=null) {
            var rng = sel.createRange();
            if (rng!=null)
                    rng.pasteHTML("<font color=red>插入的文字</font>");
    }
}

//-->
</SCRIPT>



汪杰 2006-04-03 15:53 发表评论
]]>在Web页面中控制其元素的选择状态http://www.cnitblog.com/asfman/articles/8697.html汪杰汪杰Mon, 03 Apr 2006 07:41:00 GMThttp://www.cnitblog.com/asfman/articles/8697.htmlhttp://www.cnitblog.com/asfman/comments/8697.htmlhttp://www.cnitblog.com/asfman/articles/8697.html#Feedback0http://www.cnitblog.com/asfman/comments/commentRss/8697.htmlhttp://www.cnitblog.com/asfman/services/trackbacks/8697.html    操作元素选择区，我们可以使用对应对象的select()方法选择页面内容，其中包括INPUT元素中的内容、TextRange对象中的文字和controlRange Collection对象中的控件。

    1、 Select Input 

<input id="txb" type="text" value="Text Box"/>
<a href="#" onclick="document.getElementById('txb').select()">Select</a>
    2、this is a span.     Select Text

<span id="spn">this is a span.</span>
<a href="#" onclick="SelectText();">Select</a>
<script language="javascript">
function SelectText()
{
    var range = document.body.createTextRange();
    range.findText("this is a span.");
    range.select();
}
</script>
    3、 select  select   Select Control

<select id="slt1"><option>select</option></select>
<select id="slt2"><option>select</option></select>
<a href="#" onclick="SelectControl();">Select</a>
<script language="javascript">
function SelectControl()
{
    var controlRange = document.body.createControlRange();
    controlRange.add(document.getElementById('slt1'));
    controlRange.add(document.getElementById('slt2'));
    controlRange.select();
}
</script>
    上面是主动操作页面元素的选择状态，下面说说怎么屏蔽页面中的选中状态。

    在IE5.5及以上版本中，我们可以使用这两种方便的方法来屏蔽对元素的选择。一是使用元素的属性unselectable，另一种方法是使用元素的事件onselectstart。比如我们让一个span内的文字不能不选择，我们可以使用： <span unselectable="on">这是一段不能被选中的文本。</span>    或者使用：
<span onselectstart="return false;">这也是一段不能被选中的文本。</span>
    这两种方法有什么异同呢？第一种使用unselectable属性，只能使该元素内的直接内容不能被选中，如果里面包含子元素，子元素内容不受影响；使用onselectstart事件，由于IE本身使用bubble up事件处理模型，使用这种方法，将可以屏蔽掉容器元素内任何元素的被选择特性。但是这两个方法却都有一个共同的缺陷，就是如果选择开始于被屏蔽元素之外时，这些被屏蔽的元素还是可以被选中。看下面的事例：

    这是一段不能被选中的文本。(子元素文本例外)


    这也是一段不能被选中的文本。(子元素文本依旧)

    如果我们使用鼠标在蓝框或绿框内托拽，我们是不能选中内部文本的，同时如果我们选中了其它的元素，点击蓝框内部，不能取消其它元素的选中状态；点击绿框内部则可以取消。可是如果我们使用鼠标从框外开始选取，或者直接按Ctrl+A，这两个本身已经屏蔽选择状态的元素，还是被选中了。所以我们如果要屏蔽页面的任何选取操作，最简单的方法就是在body元素上添加onselectstart="return false;"。这样就是不管使用什么方法，也不能选中页面里的元素了。
<body onselectstart="return false;">
    . . .
</body>
    这样一来似乎是一劳永逸了，可是当我们使用input type=text、textarea等控件时，我们会发现这里面也不能使用选择操作了，真是晕死！怎么办呢？

    解铃还须系铃人不是，既然onselectstart使用bubble up特性，那么我们同样在return false之前做检查就行了。比如我们要完全屏蔽页面的选择操作，但是input type=text、textarea内还需要使用选择，解决示例如下：
<body onselectstart="var srcElmt = event.srcElement; if ( srcElmt && ( srcElmt.tagName != 'INPUT' || srcElmt.tagName != 'TEXTAREA' ) return false;">
    . . .
</body>
 



汪杰 2006-04-03 15:41 发表评论
]]>DHTML方法基础 - 对DIV的一些简单控制http://www.cnitblog.com/asfman/articles/8694.html汪杰汪杰Mon, 03 Apr 2006 07:40:00 GMThttp://www.cnitblog.com/asfman/articles/8694.htmlhttp://www.cnitblog.com/asfman/comments/8694.htmlhttp://www.cnitblog.com/asfman/articles/8694.html#Feedback0http://www.cnitblog.com/asfman/comments/commentRss/8694.htmlhttp://www.cnitblog.com/asfman/services/trackbacks/8694.html<head>
<style type="text/css">
#d1 {
position: absolute;
width: 300px;
height: 300px;
visibility: hidden;
color: #fff;
background: #555;
}
#d2 {
position: absolute;
width: 300px;
height: 300px;
visibility: hidden;
color: #fff;
background: #777;
}
#d3 {
position: absolute;
width: 150px;
height: 150px;
visibility: hidden;
color: #fff;
background: #999;
}
</style>
<script>
var d1, d2, d3, w, h;
window.onload = function() {
d1 = document.getElementById('d1');
d2 = document.getElementById('d2');
d3 = document.getElementById('d3');
back();
w = window.innerWidth;
h = window.innerHeight;
resizeCheck();
}
function resizeCheck() {
if (w != window.innerWidth || h != window.innerHeight) {
location.replace(location.href);
return;
} 
setTimeout("resizeCheck()", 1000);
}
function back() {
divMoveTo(d1,200,50);
divMoveTo(d2,250,75);
divMoveTo(d3,75,75);
divZIndex(d1,1);
divZIndex(d2,2);
divZIndex(d3,3);
divBgColor(d1,'#555');
divBgColor(d2,'#777');
divBgColor(d3,'#999');
divTxtColor(d1,'#fff');
divTxtColor(d2,'#fff');
divTxtColor(d3,'#fff');
divShow(d1);
divShow(d2);
divShow(d3);
}
function color() {
divBgColor(d1,'#f02d2d');
divBgColor(d2,'#f040d1');
divBgColor(d3,'#55afe0');
divTxtColor(d1,'#fff');
divTxtColor(d2,'#fff');
divTxtColor(d3,'#fff');
}
function divMoveTo(d, x, y) {
d.style.pixelLeft = x;
d.style.pixelTop = y;
}
function divMoveBy(d, dx, dy) {
d.style.pixelLeft += dx;
d.style.pixelTop += dy;
}
function divShow(d) {
d.style.visibility = 'visible';
}
function divHide(d) {
d.style.visibility = 'hidden';
}
function divSizeTo(d, w, h) {
d.style.pixelWidth = w;
d.style.pixelHeight = h;
}
function divSizeBy(d, dw, dh) {
d.style.pixelWidth += dw;
d.style.pixelHeight += dh;
}
function divZIndex(d, z) {
d.style.zIndex = z;
}
function divBgColor(d, c) {
d.style.background = c;
}
function divTxtColor(d, c) {
d.style.color = c;
}
</script>
</head>
<body id="bodyId">
<form name="form1">
<h3>DHTML方法基础 - 对DIV的一些简单控制 BY 51js zdzhuo</h3>
<p>
<input type="button" value="移动d2" onclick="divMoveBy(d2,10,10)"><br>
<input type="button" value="移动d3到d2(0,0)" onclick="divMoveTo(d3,0,0)"><br>
<input type="button" value="移动d3到d2(75,75)" onclick="divMoveTo(d3,75,75)"><br>
</p>
<p>
<input type="button" value="放大d1" onclick="divSizeBy(d1,15,15)"><br>
<input type="button" value="缩小d1" onclick="divSizeBy(d1,-15,-15)"><br>
</p>
<p>
<input type="button" value="隐藏d2" onclick="divHide(d2)"><br>
<input type="button" value="显示d2" onclick="divShow(d2)"><br>
</p>
<p>
<input type="button" value="优先显示d1" onclick="divZIndex(d1,2);divZIndex(d2,1)"><br>
<input type="button" value="优先显示d2" onclick="divZIndex(d1,1);divZIndex(d2,2)"><br>
</p>
<p>
<input type="button" value="填充颜色" onclick="color()"><br>
</p>
<p>
<input type="button" value="返回默认状态" onclick="back()"><br>
</p>
</form>
<div id="d1">
<b>d1</b>
</div>
<div id="d2">
<b>d2</b><br><br>
d2包含d3
<div id="d3">
<b>d3</b><br><br>
d3是d2的子层
</div>      
</div>
</body>
</html>

汪杰 2006-04-03 15:40 发表评论
]]>[dhtml]连续滚动的代码 http://www.cnitblog.com/asfman/articles/8686.html汪杰汪杰Mon, 03 Apr 2006 07:36:00 GMThttp://www.cnitblog.com/asfman/articles/8686.htmlhttp://www.cnitblog.com/asfman/comments/8686.htmlhttp://www.cnitblog.com/asfman/articles/8686.html#Feedback0http://www.cnitblog.com/asfman/comments/commentRss/8686.htmlhttp://www.cnitblog.com/asfman/services/trackbacks/8686.html<div id=rolllink style=overflow:hidden;height:180;width:100%><div id=rolllink1>
<table width="442" border="0" cellspacing="0" cellpadding="0">

  <tr>
    <td width="20"></td>
    <td><a href=/ToBuy/show.asp?info_id=548>代行:塑料手推车婴儿座位(J200510270098)</a></td>
    <td width="20" align="center"></td>
  </tr>

  <tr>
    <td width="20"></td>
    <td><a href=/ToBuy/show.asp?info_id=547>代行:焊条，焊丝(J200511010100)</a></td>
    <td width="20" align="center"></td>
  </tr>

  <tr>
    <td width="20"></td>
    <td><a href=/ToBuy/show.asp?info_id=484>代行:汽车用的加热器/气化器(J200510270099)</a></td>
    <td width="20" align="center"></td>
  </tr>

  <tr>
    <td width="20"></td>
    <td><a href=/ToBuy/show.asp?info_id=400>代行:铝加工(J200510100092)</a></td>
    <td width="20" align="center"></td>
  </tr>

  <tr>
    <td width="20"></td>
    <td><a href=/ToBuy/show.asp?info_id=399>代行:科瓦铁镍钴合金加工(J200510080091)</a></td>
    <td width="20" align="center"></td>
  </tr>

  <tr>
    <td width="20"></td>
    <td><a href=/ToBuy/show.asp?info_id=398>代行:不锈钢零部件(J200510080090)</a></td>
    <td width="20" align="center"></td>
  </tr>

  <tr>
    <td width="20"></td>
    <td><a href=/ToBuy/show.asp?info_id=391>代行:芯片回收容器(J200509220085)</a></td>
    <td width="20" align="center"></td>
  </tr>

  <tr>
    <td width="20"></td>
    <td><a href=/ToBuy/show.asp?info_id=377>代行:寻找焊条，磨石，回丝的供应商(J200509100079)</a></td>
    <td width="20" align="center"></td>
  </tr>

  <tr>
    <td width="20"></td>
    <td><a href=/ToBuy/show.asp?info_id=376>代行:数码像机和手提式照相机的OEM和ODM(D200509170070)</a></td>
    <td width="20" align="center"></td>
  </tr>

  <tr>
    <td width="20"></td>
    <td><a href=/ToBuy/show.asp?info_id=375>代行:寻找钣金加工件（铝板，钢板）供应商(J200509150081)</a></td>
    <td width="20" align="center"></td>
  </tr>

  <tr>
    <td width="20"></td>
    <td><a href=/ToBuy/show.asp?info_id=374>代行:寻找注塑件加工的供应商(J200509100080)</a></td>
    <td width="20" align="center"></td>
  </tr>

  <tr>
    <td width="20"></td>
    <td><a href=/ToBuy/show.asp?info_id=373>代行:寻找钣金零部件加工的供应商(J200509100079)</a></td>
    <td width="20" align="center"></td>
  </tr>

  <tr>
    <td width="20"></td>
    <td><a href=/ToBuy/show.asp?info_id=329>代行:法兰加工(J200508260076)</a></td>
    <td width="20" align="center"></td>
  </tr>

  <tr>
    <td width="20"></td>
    <td><a href=/ToBuy/show.asp?info_id=328>代行:4层PCB(D200508190062)</a></td>
    <td width="20" align="center"></td>
  </tr>

  <tr>
    <td width="20"></td>
    <td><a href=/ToBuy/show.asp?info_id=327>代行:轴(J200508230073)</a></td>
    <td width="20" align="center"></td>
  </tr>

  <tr>
    <td width="20"></td>
    <td><a href=/ToBuy/show.asp?info_id=326>代行:金属滚压加工(J200508230074)</a></td>
    <td width="20" align="center"></td>
  </tr>

  <tr>
    <td width="20"></td>
    <td><a href=/ToBuy/show.asp?info_id=325>代行:投影仪镜头盖丝带(J200508220072)</a></td>
    <td width="20" align="center"></td>
  </tr>

  <tr>
    <td width="20"></td>
    <td><a href=/ToBuy/show.asp?info_id=324>代行:迷你组合音响的转换器的加工(D200508190060)</a></td>
    <td width="20" align="center"></td>
  </tr>

  <tr>
    <td width="20"></td>
    <td><a href=/ToBuy/show.asp?info_id=323>代行:迷你组合音响的散热片加工(D200508190061)</a></td>
    <td width="20" align="center"></td>
  </tr>

  <tr>
    <td width="20"></td>
    <td><a href=/ToBuy/show.asp?info_id=322>螺栓、简单部件机械加工</a></td>
    <td width="20" align="center"></td>
  </tr>

</table>
</div><div id=rolllink2></div></div>

<script>
   var rollspeed=30
   rolllink2.innerHTML=rolllink1.innerHTML //克隆rolllink1为rolllink2
   function Marquee(){
   if(rolllink2.offsetTop-rolllink.scrollTop<=0) //当滚动至rolllink1与rolllink2交界时
   rolllink.scrollTop-=rolllink1.offsetHeight  //rolllink跳到最顶端
   else{
   rolllink.scrollTop++
   }
   }
   var MyMar=setInterval(Marquee,rollspeed) //设置定时器
   rolllink.onmouseover=function() {clearInterval(MyMar)}//鼠标移上时清除定时器达到滚动停止的目的
   rolllink.onmouseout=function() {MyMar=setInterval(Marquee,rollspeed)}//鼠标移开时重设定时器
</script>



汪杰 2006-04-03 15:36 发表评论
]]>