﻿<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/"><channel><title>BlogJava-szhswl-文章分类-JAVASCRIPT</title><link>http://www.blogjava.net/szhswl/category/27804.html</link><description>宋针还的个人空间</description><language>zh-cn</language><lastBuildDate>Tue, 25 Dec 2007 06:48:55 GMT</lastBuildDate><pubDate>Tue, 25 Dec 2007 06:48:55 GMT</pubDate><ttl>60</ttl><item><title>javascript table delete row</title><link>http://www.blogjava.net/szhswl/articles/169132.html</link><dc:creator>宋针还</dc:creator><author>宋针还</author><pubDate>Thu, 20 Dec 2007 11:28:00 GMT</pubDate><guid>http://www.blogjava.net/szhswl/articles/169132.html</guid><wfw:comment>http://www.blogjava.net/szhswl/comments/169132.html</wfw:comment><comments>http://www.blogjava.net/szhswl/articles/169132.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/szhswl/comments/commentRss/169132.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/szhswl/services/trackbacks/169132.html</trackback:ping><description><![CDATA[<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>如何实现运行代码框功能</title>
<script language=javascript>
function runCode()  //定义一个运行代码的函数，
{
 if(1 == arguments.length)
  try{event = arguments[0];}catch(e){}
  var code=(event.target || event.srcElement).parentNode.childNodes[0].value;//即要运行的代码。
  var newwin=window.open('','','');  //打开一个窗口并赋给变量newwin。
  newwin.opener = null // 防止代码对原页面修改
  newwin.document.write(code);  //向这个打开的窗口中写入代码code，这样就实现了运行代码功能。
  newwin.document.close();
}
function copycode(obj) {
 var rng = document.body.createTextRange();
 rng.moveToElementText(obj);
 rng.scrollIntoView();
 rng.select();
 rng.execCommand("Copy");
 rng.collapse(false);
}
</script>
<style>
textarea {
 font-size: 12px;FONT-FAMILY: "Tahoma", "MS Shell Dlg";
}
.codetextarea {
 font-family: "宋体";
 font-size: 12px;
 height: 310px;
 width: 515px;
 word-wrap:normal;
 word-break:keep-all;
}
</style>
</head><body>
<span><textarea class="codeTextarea" name="run_Code"><html>
<head>
<script type="text/javascript">
function deleteRow(i){
    document.getElementById('myTable').deleteRow(i)
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
  <td>Row 1</td>
  <td><input type="button" value="Delete" onclick="deleteRow(this.parentNode.parentNode.rowIndex)" /></td>
</tr>
<tr>
  <td>Row 2</td>
  <td><input type="button" value="Delete" onclick="deleteRow(this.parentNode.parentNode.rowIndex)" /></td>
</tr>
<tr>
  <td>Row 3</td>
  <td><input type="button" value="Delete" onclick="deleteRow(this.parentNode.parentNode.rowIndex)" /></td>
</tr>
</table>
</body></html> 
</textarea><br /><input onclick="runCode()" type="button" value="运行代码" /> <input type="button" value="复制代码" onclick="copycode(run_Code)" />[提示：你可先修改部分代码，再按运行]</span>
</body></html><img src ="http://www.blogjava.net/szhswl/aggbug/169132.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/szhswl/" target="_blank">宋针还</a> 2007-12-20 19:28 <a href="http://www.blogjava.net/szhswl/articles/169132.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>javascript insert table row</title><link>http://www.blogjava.net/szhswl/articles/168841.html</link><dc:creator>宋针还</dc:creator><author>宋针还</author><pubDate>Wed, 19 Dec 2007 12:05:00 GMT</pubDate><guid>http://www.blogjava.net/szhswl/articles/168841.html</guid><wfw:comment>http://www.blogjava.net/szhswl/comments/168841.html</wfw:comment><comments>http://www.blogjava.net/szhswl/articles/168841.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/szhswl/comments/commentRss/168841.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/szhswl/services/trackbacks/168841.html</trackback:ping><description><![CDATA[<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>如何实现运行代码框功能</title>
<script language=javascript>
function runCode()  //定义一个运行代码的函数，
{
 if(1 == arguments.length)
  try{event = arguments[0];}catch(e){}
  var code=(event.target || event.srcElement).parentNode.childNodes[0].value;//即要运行的代码。
  var newwin=window.open('','','');  //打开一个窗口并赋给变量newwin。
  newwin.opener = null // 防止代码对原页面修改
  newwin.document.write(code);  //向这个打开的窗口中写入代码code，这样就实现了运行代码功能。
  newwin.document.close();
}
function copycode(obj) {
 var rng = document.body.createTextRange();
 rng.moveToElementText(obj);
 rng.scrollIntoView();
 rng.select();
 rng.execCommand("Copy");
 rng.collapse(false);
}
</script>
<style>
textarea {
 font-size: 12px;FONT-FAMILY: "Tahoma", "MS Shell Dlg";
}
.codetextarea {
 font-family: "宋体";
 font-size: 12px;
 height: 310px;
 width: 515px;
 word-wrap:normal;
 word-break:keep-all;
}
</style>
</head><body>
<span><textarea class="codeTextarea" name="run_Code"><html>
<head>
<script type="text/javascript">
function insRow(){
    var x=document.getElementById('myTable').insertRow(2)
    var y=x.insertCell(0)
    var z=x.insertCell(1)
    y.innerHTML="NEW CELL1"
    z.innerHTML="NEW CELL2"
}
</script>
</head>
<body>
<table id="myTable" border="1">
    <tr>
        <td>d</td>
        <td>d</td>
    </tr>
    <tr>
        <td>d</td>
        <td>d</td>
    </tr>
    <tr>
        <td>Row3 cell1</td>
        <td>Row3 cell2</td>
    </tr>
    <tr>
        <td>Row4 cell1</td>
        <td>Row4 cell2</td>
    </tr>
    <tr>
        <td>Row5 cell1</td>
        <td>Row5 cell2</td>
    </tr>
</table>
<form>
<input type="button" onclick="insRow()" value="Insert row" />
</form>
</body>
</html> 
Inserting/Removing Row Elements 
<HTML>
<HEAD>
<TITLE>Modifying Table Cell Content</TITLE>
<STYLE TYPE="text/css">
THEAD {background-color:lightyellow; font-weight:bold}
TFOOT {background-color:lightgreen; font-weight:bold}
#myTABLE {background-color:bisque}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
var theTable, theTableBody
function init() {
    theTable = (document.all) ? document.all.myTABLE : 
        document.getElementById("myTABLE")
    theTableBody = theTable.tBodies[0]
}
function appendRow(form) {
    insertTableRow(form, -1)
}
function addRow(form) {
    insertTableRow(form, form.insertIndex.value)
}
function insertTableRow(form, where) {
    var now = new Date()
    var nowData = [now.getHours(), now.getMinutes(), now.getSeconds(), 
        now.getMilliseconds()]
    clearBGColors()
    var newCell
    var newRow = theTableBody.insertRow(where)
    for (var i = 0; i < nowData.length; i++) {
        newCell = newRow.insertCell(i)
        newCell.innerHTML = nowData[i]
        newCell.style.backgroundColor = "salmon"
    }
    updateRowCounters(form)
}
function removeRow(form) {
    theTableBody.deleteRow(form.deleteIndex.value)
    updateRowCounters(form)
}
function insertTHEAD(form) {
    var THEADData = ["Hours","Minutes","Seconds","Milliseconds"]
    var newCell
    var newTHEAD = theTable.createTHead()
    newTHEAD.id = "myTHEAD"
    var newRow = newTHEAD.insertRow(-1)
    for (var i = 0; i < THEADData.length; i++) {
        newCell = newRow.insertCell(i)
        newCell.innerHTML = THEADData[i]
    }
    updateRowCounters(form)
    form.addTHEAD.disabled = true
    form.deleteTHEAD.disabled = false
}
function removeTHEAD(form) {
    theTable.deleteTHead()    
    updateRowCounters(form)
    form.addTHEAD.disabled = false
    form.deleteTHEAD.disabled = true
}
function insertTFOOT(form) {
    var TFOOTData = ["Hours","Minutes","Seconds","Milliseconds"]
    var newCell
    var newTFOOT = theTable.createTFoot()
    newTFOOT.id = "myTFOOT"
    var newRow = newTFOOT.insertRow(-1)
    for (var i = 0; i < TFOOTData.length; i++) {
        newCell = newRow.insertCell(i)
        newCell.innerHTML = TFOOTData[i]
    }
    updateRowCounters(form)
    form.addTFOOT.disabled = true
    form.deleteTFOOT.disabled = false
}
function removeTFOOT(form) {
    theTable.deleteTFoot()    
    updateRowCounters(form)
    form.addTFOOT.disabled = false
    form.deleteTFOOT.disabled = true
}
function insertCaption(form) {
    var captionData = form.captionText.value
    var newCaption = theTable.createCaption()
    newCaption.innerHTML = captionData
    form.addCaption.disabled = true
    form.deleteCaption.disabled = false
}
function removeCaption(form) {
    theTable.deleteCaption()    
    form.addCaption.disabled = false
    form.deleteCaption.disabled = true
}
// housekeeping functions
function updateRowCounters(form) {
    var sel1 = form.insertIndex
    var sel2 = form.deleteIndex
    sel1.options.length = 0
    sel2.options.length = 0
    for (var i = 0; i < theTableBody.rows.length; i++) {
        sel1.options[i] = new Option(i, i)
        sel2.options[i] = new Option(i, i)
    }
    form.removeRowBtn.disabled = (i==0)
}
function clearBGColors() {
    for (var i = 0; i < theTableBody.rows.length; i++) {
        for (var j = 0; j < theTableBody.rows[i].cells.length; j++) {
            theTableBody.rows[i].cells[j].style.backgroundColor = ""        
        }
    }
}
</SCRIPT>
</HEAD>
<BODY onLoad="init()">
<H1>Modifying Tables</H1>
<HR>
<FORM NAME="controls">
<FIELDSET>
<LEGEND>Add/Remove Rows</LEGEND>
<TABLE WIDTH="100%" CELLSPACING=20><TR>
<TD><INPUT TYPE="button" VALUE="Append 1 Row" 
    onClick="appendRow(this.form)"></TD>
<TD><INPUT TYPE="button" VALUE="Insert 1 Row" onClick="addRow(this.form)"> at index: 
    <SELECT NAME="insertIndex">
        <OPTION VALUE="0">0
    </SELECT></TD>
<TD><INPUT TYPE="button" NAME="removeRowBtn" VALUE="Delete 1 Row" DISABLED 
    onClick="removeRow(this.form)"> at index: 
    <SELECT NAME="deleteIndex">
        <OPTION VALUE="0">0
    </SELECT></TD>
</TR>
</TABLE>
</FIELDSET>
<FIELDSET>
<LEGEND>Add/Remove THEAD and TFOOT</LEGEND>
<TABLE WIDTH="100%" CELLSPACING=20><TR>
<TD><INPUT TYPE="button" NAME="addTHEAD" VALUE="Insert THEAD" 
    onClick="insertTHEAD(this.form)"><BR>
    <INPUT TYPE="button" NAME="deleteTHEAD" VALUE="Remove THEAD" DISABLED 
        onClick="removeTHEAD(this.form)">
</TD>
<TD><INPUT TYPE="button" NAME="addTFOOT" VALUE="Insert TFOOT" 
    onClick="insertTFOOT(this.form)"><BR>
    <INPUT TYPE="button" NAME="deleteTFOOT" VALUE="Remove TFOOT" DISABLED 
        onClick="removeTFOOT(this.form)">
</TD>
</TR>
</TABLE>
</FIELDSET>
<FIELDSET>
<LEGEND>Add/Remove Caption</LEGEND>
<TABLE WIDTH="100%" CELLSPACING=20><TR>
<TD><INPUT TYPE="button" NAME="addCaption" VALUE="Add Caption" 
    onClick="insertCaption(this.form)"></TD>
<TD>Text: <INPUT TYPE="text" NAME="captionText" SIZE=40 VALUE="Sample Caption">
<TD><INPUT TYPE="button" NAME="deleteCaption" VALUE="Delete Caption" DISABLED 
    onClick="removeCaption(this.form)"></TD>
</TR>
</TABLE>
</FIELDSET>
</FORM>
<HR>
<TABLE ID="myTABLE" CELLPADDING=10 BORDER=1>
<TBODY>
</TABLE>
</BODY>
</HTML>
</textarea><br /><input onclick="runCode()" type="button" value="运行代码" /> <input type="button" value="复制代码" onclick="copycode(run_Code)" />[提示：你可先修改部分代码，再按运行]</span>
</body></html><img src ="http://www.blogjava.net/szhswl/aggbug/168841.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/szhswl/" target="_blank">宋针还</a> 2007-12-19 20:05 <a href="http://www.blogjava.net/szhswl/articles/168841.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>JQuery技巧总结(转载) </title><link>http://www.blogjava.net/szhswl/articles/167048.html</link><dc:creator>宋针还</dc:creator><author>宋针还</author><pubDate>Tue, 11 Dec 2007 12:36:00 GMT</pubDate><guid>http://www.blogjava.net/szhswl/articles/167048.html</guid><wfw:comment>http://www.blogjava.net/szhswl/comments/167048.html</wfw:comment><comments>http://www.blogjava.net/szhswl/articles/167048.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/szhswl/comments/commentRss/167048.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/szhswl/services/trackbacks/167048.html</trackback:ping><description><![CDATA[一、简介
<p>1.1、概述 <br />
随着WEB2.0及 ajax思想在互联网上的快速发展传播，陆续出现了一些优秀的Js框架，其中比较著名的有Prototype、YUI、jQuery、mootools、 Bindows以及国内的JSVM框架等，通过将这些JS框架应用到我们的项目中能够使程序员从设计和书写繁杂的JS应用中解脱出来，将关注点转向功能需 求而非实现细节上，从而提高项目的开发速度。 <br />
jQuery是继prototype 之后的又一个优秀的Javascript框架。它是由 John Resig 于 2006 年初创建的，它有助于简化 JavaScript&#8482; 以及Ajax 编程。有人使用这样的一比喻来比较prototype和jQuery：prototype就像Java，而jQuery就像ruby. 它是一个简洁快速灵活的JavaScript框架，它能让你在你的网页上简单的操作文档、处理事件、实现特效并为Web页面添加Ajax交互。</p>
<p>它具有如下一些特点： <br />
1、代码简练、语义易懂、学习快速、文档丰富。 <br />
2、jQuery是一个轻量级的脚本，其代码非常小巧，最新版的JavaScript包只有20K左右。 <br />
3、jQuery支持CSS1-CSS3,以及基本的xPath。 <br />
4、jQuery是跨浏览器的，它支持的浏览器包括IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+。 <br />
5、可以很容易的为jQuery扩展其他功能。 <br />
6、能将JS代码和HTML代码完全分离，便于代码和维护和修改。 <br />
7、插件丰富，除了jQuery本身带有的一些特效外，可以通过插件实现更多功能，如表单验证、tab导航、拖放效果、表格排序、DataGrid，树形菜单、图像特效以及ajax上传等。</p>
<p>jQuery的设计会改变你写JavaScript代码的方式，降低你学习使用JS操作网页的复杂度，提高网页JS开发效率，无论对于js初学者还是资深专家，jQuery都将是您的首选。 <br />
jQuery适合于设计师、开发者以及那些还好者，同样适合用于商业开发，可以说jQuery适合任何JavaScript应用的地方，可用于不同的Web应用程序中。 <br />
官方站点：http://jquery.com/ 中文站点：http://jquery.org.cn/ </p>
<p>1.2、目的 <br />
通过学习本文档，能够对jQuery有一个简单的认识了解，清楚JQuery与其他JS框架的不同，掌握jQuery的常用语法、使用技巧及注意事项。</p>
<p>二、使用方法 <br />
在需要使用JQuery的页面中引入JQuery的js文件即可。 <br />
例如：&lt;script type="text/javascript" src="js/jquery.js"&gt;&lt;/script&gt; <br />
引入之后便可在页面的任意地方使用jQuery提供的语法。</p>
<p>三、学习教程及参考资料 <br />
请参照《jQuery中文API手册》和http://jquery.org.cn/visual/cn/index.xml <br />
推荐两篇不错的jquery教程：《jQuery的起点教程》和《使用 jQuery 简化 Ajax 开发》 <br />
(说明：以上文档都放在了【附件】中)</p>
<p>四、语法总结和注意事项</p>
<p>1、关于页面元素的引用 <br />
通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法。</p>
<p>2、jQuery对象与dom对象的转换 <br />
只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的，调用方法时要注意操作的是dom对象还是jquery对象。 <br />
普通的dom对象一般可以通过$()转换成jquery对象。 <br />
如：$(document.getElementById("msg"))则为jquery对象，可以使用jquery的方法。 <br />
由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。 <br />
如：$("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5]这些都是dom对象，可以使用dom中的方法，但不能再使用Jquery的方法。 <br />
以下几种写法都是正确的： <br />
$("#msg").html(); <br />
$("#msg")[0].innerHTML; <br />
$("#msg").eq(0)[0].innerHTML; <br />
$("#msg").get(0).innerHTML;</p>
<p>3、如何获取jQuery集合的某一项 <br />
对于获取的元素集合，获取其中的某一项（通过索引指定）可以使用eq或get(n)方法或者索引号获取，要注意，eq返回的是jquery对象，而get(n)和索引返回的是dom元素对象。对于jquery对象只能使用jquery的方法，而dom对象只能使用dom的方法，如要获取第三个&lt;div&gt;元素的内容。有如下两种方法： <br />
$("div").eq(2).html(); //调用jquery对象的方法 <br />
$("div").get(2).innerHTML; //调用dom的方法属性</p>
<p>4、同一函数实现set和get <br />
Jquery中的很多方法都是如此，主要包括如下几个： <br />
$("#msg").html(); //返回id为msg的元素节点的html内容。 <br />
$("#msg").html("&lt;b&gt;new content&lt;/b&gt;"); <br />
//将&#8220;&lt;b&gt;new content&lt;/b&gt;&#8221; 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content</p>
<p>$("#msg").text(); //返回id为msg的元素节点的文本内容。 <br />
$("#msg").text("&lt;b&gt;new content&lt;/b&gt;"); <br />
//将&#8220;&lt;b&gt;new content&lt;/b&gt;&#8221; 作为普通文本串写入id为msg的元素节点内容中,页面显示&lt;b&gt;new content&lt;/b&gt;</p>
<p>$("#msg").height(); //返回id为msg的元素的高度 <br />
$("#msg").height("300"); //将id为msg的元素的高度设为300 <br />
$("#msg").width(); //返回id为msg的元素的宽度 <br />
$("#msg").width("300"); //将id为msg的元素的宽度设为300</p>
<p>$("input").val("); //返回表单输入框的value值 <br />
$("input").val("test"); //将表单输入框的value值设为test</p>
<p>$("#msg").click(); //触发id为msg的元素的单击事件 <br />
$("#msg").click(fn); //为id为msg的元素单击事件添加函数 <br />
同样blur,focus,select,submit事件都可以有着两种调用方法</p>
<p>5、集合处理功能 <br />
对于jquery返回的集合内容无需我们自己循环遍历并对每个对象分别做处理，jquery已经为我们提供的很方便的方法进行集合的处理。 <br />
包括两种形式： <br />
$("p").each(function(i){this.style.color=['#f00','#0f0','#00f'][i]}) <br />
//为索引分别为0，1，2的p元素分别设定不同的字体颜色。</p>
<p>$("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]}) <br />
//实现表格的隔行换色效果</p>
<p>$("p").click(function(){alert($(this).html())}) <br />
//为每个p元素增加了click事件，单击某个p元素则弹出其内容</p>
<p>6、扩展我们需要的功能 <br />
$.extend({ <br />
min: function(a, b){return a &lt; b?a:b; }, <br />
max: function(a, b){return a &gt; b?a:b; } <br />
}); //为jquery扩展了min,max两个方法 <br />
使用扩展的方法（通过&#8220;$.方法名&#8221;调用）： <br />
alert("a=10,b=20,max="+$.max(10,20)+",min="+$.min(10,20));</p>
<p>7、支持方法的连写 <br />
所谓连写，即可以对一个jquery对象连续调用各种不同的方法。 <br />
例如： <br />
$("p").click(function(){alert($(this).html())}) <br />
.mouseover(function(){alert('mouse over event')}) <br />
.each(function(i){this.style.color=['#f00','#0f0','#00f'][i]});</p>
<p>8、操作元素的样式 <br />
主要包括以下几种方式： <br />
$("#msg").css("background"); //返回元素的背景颜色 <br />
$("#msg").css("background","#ccc") //设定元素背景为灰色 <br />
$("#msg").height(300); $("#msg").width("200"); //设定宽高 <br />
$("#msg").css({ color: "red", background: "blue" });//以名值对的形式设定样式 <br />
$("#msg").addClass("select"); //为元素增加名称为select的class <br />
$("#msg").removeClass("select"); //删除元素名称为select的class <br />
$("#msg").toggleClass("select"); //如果存在（不存在）就删除（添加）名称为select的class</p>
<p>9、完善的事件处理功能 <br />
Jquery已经为我们提供了各种事件处理方法，我们无需在html元素上直接写事件，而可以直接为通过jquery获取的对象添加事件。 <br />
如： <br />
$("#msg").click(function(){alert("good")}) //为元素添加了单击事件 <br />
$("p").click(function(i){this.style.color=['#f00','#0f0','#00f'][i]}) <br />
//为三个不同的p元素单击事件分别设定不同的处理 <br />
jQuery中几个自定义的事件： <br />
（1）hover(fn1,fn2)：一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。 <br />
//当鼠标放在表格的某行上时将class置为over，离开时置为out。 <br />
$("tr").hover(function(){ <br />
$(this).addClass("over"); <br />
}, <br />
function(){ <br />
$(this).addClass("out"); <br />
}); <br />
（2）ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。 <br />
$(document).ready(function(){alert("Load Success")}) <br />
//页面加载完毕提示&#8220;Load Success&#8221;,相当于onload事件。与$(fn)等价 <br />
（3）toggle(evenFn,oddFn): 每次点击时切换要调用的函数。如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。 <br />
//每次点击时轮换添加和删除名为selected的class。 <br />
$("p").toggle(function(){ <br />
$(this).addClass("selected"); <br />
},function(){ <br />
$(this).removeClass("selected"); <br />
}); <br />
（4）trigger(eventtype): 在每一个匹配的元素上触发某类事件。 <br />
例如： <br />
$("p").trigger("click"); //触发所有p元素的click事件 <br />
（5）bind(eventtype,fn)，unbind(eventtype): 事件的绑定与反绑定 <br />
从每一个匹配的元素中（添加）删除绑定的事件。 <br />
例如： <br />
$("p").bind("click", function(){alert($(this).text());}); //为每个p元素添加单击事件 <br />
$("p").unbind(); //删除所有p元素上的所有事件 <br />
$("p").unbind("click") //删除所有p元素上的单击事件</p>
<p>10、几个实用特效功能 <br />
其中toggle()和slidetoggle()方法提供了状态切换功能。 <br />
如toggle()方法包括了hide()和show()方法。 <br />
slideToggle()方法包括了slideDown()和slideUp方法。</p>
<p>11、几个有用的jQuery方法 <br />
$.browser.浏览器类型：检测浏览器类型。有效参数：safari, opera, msie, mozilla。如检测是否ie：$.browser.isie，是ie浏览器则返回true。 <br />
$.each(obj, fn)：通用的迭代函数。可用于近似地迭代对象和数组（代替循环）。 <br />
如 <br />
$.each( [0,1,2], function(i, n){ alert( "Item #" + i + ": " + n ); }); <br />
等价于： <br />
var tempArr=[0,1,2]; <br />
for(var i=0;i&lt;tempArr.length;i++){ <br />
alert("Item #"+i+": "+tempArr[i]); <br />
} <br />
也可以处理json数据，如 <br />
$.each( { name: "John", lang: "JS" }, function(i, n){ alert( "Name: " + i + ", Value: " + n ); }); <br />
结果为： <br />
Name:name, Value:John <br />
Name:lang, Value:JS <br />
$.extend(target,prop1,propN)：用一个或多个其他对象来扩展一个对象，返回这个被扩展的对象。这是jquery实现的继承方式。 <br />
如： <br />
$.extend(settings, options); <br />
//合并settings和options，并将合并结果返回settings中，相当于options继承setting并将继承结果保存在setting中。 <br />
var settings = $.extend({}, defaults, options); <br />
//合并defaults和options，并将合并结果返回到setting中而不覆盖default内容。 <br />
可以有多个参数（合并多项并返回） <br />
$.map(array, fn)：数组映射。把一个数组中的项目(处理转换后)保存到到另一个新数组中，并返回生成的新数组。 <br />
如： <br />
var tempArr=$.map( [0,1,2], function(i){ return i + 4; }); <br />
tempArr内容为：[4,5,6] <br />
var tempArr=$.map( [0,1,2], function(i){ return i &gt; 0 ? i + 1 : null; }); <br />
tempArr内容为：[2,3] <br />
$.merge(arr1,arr2):合并两个数组并删除其中重复的项目。 <br />
如：$.merge( [0,1,2], [2,3,4] ) //返回[0,1,2,3,4] <br />
$.trim(str)：删除字符串两端的空白字符。 <br />
如：$.trim(" hello, how are you? "); //返回"hello,how are you? "</p>
<p>12、解决自定义方法或其他类库与jQuery的冲突 <br />
很多时候我们自己定义了$(id)方法来获取一个元素，或者其他的一些js类库如prototype也都定义了$方法，如果同时把这些内容放在一起就会引起变量方法定义冲突，Jquery对此专门提供了方法用于解决此问题。 <br />
使用jquery中的jQuery.noConflict();方法即可把变量$的控制权让渡给第一个实现它的那个库或之前自定义的$方法。之后应用Jquery的时候只要将所有的$换成jQuery即可，如原来引用对象方法$("#msg")改为jQuery("#msg")。 <br />
如： <br />
jQuery.noConflict(); <br />
// 开始使用jQuery <br />
jQuery("div p").hide(); <br />
// 使用其他库的 $() <br />
$("content").style.display = 'none'; <br />
<br />
本文转自:http://hi.baidu.com/ismayday/blog/item/960954fb7ec38b156d22ebc5.html </p>
  <img src ="http://www.blogjava.net/szhswl/aggbug/167048.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/szhswl/" target="_blank">宋针还</a> 2007-12-11 20:36 <a href="http://www.blogjava.net/szhswl/articles/167048.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>JS实现table里单元格排序</title><link>http://www.blogjava.net/szhswl/articles/166765.html</link><dc:creator>宋针还</dc:creator><author>宋针还</author><pubDate>Mon, 10 Dec 2007 11:32:00 GMT</pubDate><guid>http://www.blogjava.net/szhswl/articles/166765.html</guid><wfw:comment>http://www.blogjava.net/szhswl/comments/166765.html</wfw:comment><comments>http://www.blogjava.net/szhswl/articles/166765.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/szhswl/comments/commentRss/166765.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/szhswl/services/trackbacks/166765.html</trackback:ping><description><![CDATA[<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>如何实现运行代码框功能</title>
<script language=javascript>
function runCode()  //定义一个运行代码的函数，
{
 if(1 == arguments.length)
  try{event = arguments[0];}catch(e){}
  var code=(event.target || event.srcElement).parentNode.childNodes[0].value;//即要运行的代码。
  var newwin=window.open('','','');  //打开一个窗口并赋给变量newwin。
  newwin.opener = null // 防止代码对原页面修改
  newwin.document.write(code);  //向这个打开的窗口中写入代码code，这样就实现了运行代码功能。
  newwin.document.close();
}
function copycode(obj) {
 var rng = document.body.createTextRange();
 rng.moveToElementText(obj);
 rng.scrollIntoView();
 rng.select();
 rng.execCommand("Copy");
 rng.collapse(false);
}
</script>
<style>
textarea {
 font-size: 12px;FONT-FAMILY: "Tahoma", "MS Shell Dlg";
}
.codetextarea {
 font-family: "宋体";
 font-size: 12px;
 height: 310px;
 width: 515px;
 word-wrap:normal;
 word-break:keep-all;
}
</style>
</head><body>
<span><textarea class="codeTextarea" name="run_Code"><html>
<head>
<meta http-equiv="Content-Language" content="zh-cn" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>001</title>
<script language=javascript type=text/javascript>
function paixu(){
var obj=document.getElementsByTagName("table")[0],obj2=obj.cloneNode(true).rows,a=new Array();
while(obj.rows.length!=1)
obj.rows[1].removeNode(true);
for(var i=1;i<obj2.length;i++)
a[a.length]=obj2[i];
a.sort(function(a,b){
return b.cells[1].innerText-a.cells[1].innerText;}
);
for(var i=0;i<a.length;i++)
obj.firstChild.appendChild(a[i]);
}
</script>
</head>
<body>
<table border="1" width="100%" id="table1" cellspacing="1">
    <tr>
        <td width="172">代 码</td>
        <td>名 称</td>
    </tr>
    <tr>
        <td width="172">001</td>
        <td>11111</td>
    </tr>
    <tr>
        <td width="172">002</td>
        <td>3333</td>
    </tr>
    <tr>
        <td width="172">00101</td>
        <td>22222</td>
    </tr>
    <tr>
        <td width="172">00201</td>
        <td>4444</td>
    </tr>
</table>
    <p><button name="B3" onclick='paixu();'>排 序</button></p>
</body>
</html>
</textarea><br /><input onclick="runCode()" type="button" value="运行代码" /> <input type="button" value="复制代码" onclick="copycode(run_Code)" />[提示：你可先修改部分代码，再按运行]</span>
</body></html><img src ="http://www.blogjava.net/szhswl/aggbug/166765.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/szhswl/" target="_blank">宋针还</a> 2007-12-10 19:32 <a href="http://www.blogjava.net/szhswl/articles/166765.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>模拟QQ菜单效果</title><link>http://www.blogjava.net/szhswl/articles/166747.html</link><dc:creator>宋针还</dc:creator><author>宋针还</author><pubDate>Mon, 10 Dec 2007 10:01:00 GMT</pubDate><guid>http://www.blogjava.net/szhswl/articles/166747.html</guid><wfw:comment>http://www.blogjava.net/szhswl/comments/166747.html</wfw:comment><comments>http://www.blogjava.net/szhswl/articles/166747.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/szhswl/comments/commentRss/166747.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/szhswl/services/trackbacks/166747.html</trackback:ping><description><![CDATA[<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>如何实现运行代码框功能</title>
<script language=javascript>
function runCode()  //定义一个运行代码的函数，
{
 if(1 == arguments.length)
  try{event = arguments[0];}catch(e){}
  var code=(event.target || event.srcElement).parentNode.childNodes[0].value;//即要运行的代码。
  var newwin=window.open('','','');  //打开一个窗口并赋给变量newwin。
  newwin.opener = null // 防止代码对原页面修改
  newwin.document.write(code);  //向这个打开的窗口中写入代码code，这样就实现了运行代码功能。
  newwin.document.close();
}
function copycode(obj) {
 var rng = document.body.createTextRange();
 rng.moveToElementText(obj);
 rng.scrollIntoView();
 rng.select();
 rng.execCommand("Copy");
 rng.collapse(false);
}
</script>
<style>
textarea {
 font-size: 12px;FONT-FAMILY: "Tahoma", "MS Shell Dlg";
}
.codetextarea {
 font-family: "宋体";
 font-size: 12px;
 height: 310px;
 width: 515px;
 word-wrap:normal;
 word-break:keep-all;
}
</style>
</head><body>
<span><textarea class="codeTextarea" name="run_Code"><html>
<head>
<title>模拟QQ菜单效果</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>
<body>
<STYLE type="text/css">
A:link { COLOR: #000000; FONT-SIZE: 12px; TEXT-DECORATION: none}
A:visited { COLOR: #000000; FONT-SIZE: 12px; TEXT-DECORATION: none}
A:hover { COLOR: #006CD9; FONT-SIZE: 12px; TEXT-DECORATION: none}
BODY { FONT-SIZE: 12px;}
TD { FONT-SIZE: 12px; line-height: 150%}
</style>
<script language="JavaScript">
<!--
function showitem(id,name)
{
 return ("<span><a href='"+id+"' target=_blank>"+name+"</a></span><br />")
}
function switchoutlookBar(number)
{
 var i = outlookbar.opentitle;
 outlookbar.opentitle=number;
 var id1,id2,id1b,id2b
 if (number!=i && outlooksmoothstat==0){
  if (number!=-1)
  {
   if (i==-1){
    id2="blankdiv";
    id2b="blankdiv";
   }
   else{
    id2="outlookdiv"+i;
    id2b="outlookdivin"+i;
    document.all("outlooktitle"+i).style.border="1px none navy";
    document.all("outlooktitle"+i).style.background=outlookbar.maincolor;
    document.all("outlooktitle"+i).style.color="#ffffff";
    document.all("outlooktitle"+i).style.textalign="center";
   }
   id1="outlookdiv"+number
   id1b="outlookdivin"+number
   document.all("outlooktitle"+number).style.border="1px none white";
   document.all("outlooktitle"+number).style.background=outlookbar.maincolor; //title
   document.all("outlooktitle"+number).style.color="#ffffff";
   document.all("outlooktitle"+number).style.textalign="center";
   smoothout(id1,id2,id1b,id2b,0);
  }
  else
  {
   document.all("blankdiv").style.display="";
   document.all("blankdiv").sryle.height="100%";
   document.all("outlookdiv"+i).style.display="none";
   document.all("outlookdiv"+i).style.height="0%";
   document.all("outlooktitle"+i).style.border="1px none navy";
   document.all("outlooktitle"+i).style.background=outlookbar.maincolor;
   document.all("outlooktitle"+i).style.color="#ffffff";
   document.all("outlooktitle"+i).style.textalign="center";
  }
 }
}
function smoothout(id1,id2,id1b,id2b,stat)
{
 if(stat==0){
  tempinnertext1=document.all(id1b).innerHTML;
  tempinnertext2=document.all(id2b).innerHTML;
  document.all(id1b).innerHTML="";
  document.all(id2b).innerHTML="";
  outlooksmoothstat=1;
  document.all(id1b).style.overflow="hidden";
  document.all(id2b).style.overflow="hidden";
  document.all(id1).style.height="0%";
  document.all(id1).style.display="";
  setTimeout("smoothout('"+id1+"','"+id2+"','"+id1b+"','"+id2b+"',"+outlookbar.inc+")",outlookbar.timedalay);
 }
 else
 {
  stat+=outlookbar.inc;
  if (stat>100)
   stat=100;
  document.all(id1).style.height=stat+"%";
  document.all(id2).style.height=(100-stat)+"%";
  if (stat<100) 
   setTimeout("smoothout('"+id1+"','"+id2+"','"+id1b+"','"+id2b+"',"+stat+")",outlookbar.timedalay);
  else
  {
   document.all(id1b).innerHTML=tempinnertext1;
   document.all(id2b).innerHTML=tempinnertext2;
   outlooksmoothstat=0;
   document.all(id1b).style.overflow="auto";
   document.all(id2).style.display="none";
  }
 }
}
function getOutLine()
{
 outline="<table "+outlookbar.otherclass+">";
 for (i=0;i<(outlookbar.titlelist.length);i++)
 {
  outline+="<tr><td name=outlooktitle"+i+" id=outlooktitle"+i+" "; 
  if (i!=outlookbar.opentitle) 
   outline+=" nowrap align=center style='cursor:hand;background-color:"+outlookbar.maincolor+";color:#ffffff;height:20;border:1 none navy' ";
  else
   outline+=" nowrap align=center style='cursor:hand;background-color:"+outlookbar.maincolor+";color:white;height:20;border:1 none white' ";
  outline+=outlookbar.titlelist[i].otherclass
  outline+=" onclick='switchoutlookBar("+i+")'><span class=smallFont>";
  outline+=outlookbar.titlelist[i].title+"</span></td></tr>";
  outline+="<tr><td name=outlookdiv"+i+" valign=top align=center id=outlookdiv"+i+" style='width:100%"
  if (i!=outlookbar.opentitle) 
   outline+=";display:none;height:0%;";
  else
   outline+=";display:;height:100%;";
  outline+="'><div name=outlookdivin"+i+" id=outlookdivin"+i+" style='overflow:auto;width:100%;height:100%'>";
  for (j=0;j<outlookbar.itemlist[i].length;j++)
   outline+=showitem(outlookbar.itemlist[i][j].key,outlookbar.itemlist[i][j].title);
  outline+="</div></td></tr>"
 }
 outline+="</table>"
 return outline
}
function show()
{
 var outline;
 outline="<div id=outLookBarDiv name=outLookBarDiv style='width=100%;height:100%'>"
 outline+=outlookbar.getOutLine();
 outline+="</div>"
 document.write(outline);
}
function theitem(intitle,instate,inkey)
{
 this.state=instate;
 this.otherclass=" nowrap ";
 this.key=inkey;
 this.title=intitle;
}
function addtitle(intitle)
{
 outlookbar.itemlist[outlookbar.titlelist.length]=new Array();
 outlookbar.titlelist[outlookbar.titlelist.length]=new theitem(intitle,1,0);
 return(outlookbar.titlelist.length-1);
}
function additem(intitle,parentid,inkey)
{
 if (parentid>=0 && parentid<=outlookbar.titlelist.length)
 {
  outlookbar.itemlist[parentid][outlookbar.itemlist[parentid].length]=new theitem(intitle,2,inkey);
  outlookbar.itemlist[parentid][outlookbar.itemlist[parentid].length-1].otherclass=" nowrap align=left style='height:5' ";
  return(outlookbar.itemlist[parentid].length-1);
 }
 else
  additem=-1;
}
function outlook()
{
 this.titlelist=new Array();
 this.itemlist=new Array();
 this.divstyle="style='height:100%;width:100%;overflow:auto' align=center";
 this.otherclass="border=0 cellspacing='0' cellpadding='0' style='height:100%;width:100%'valign=middle align=center ";
 this.addtitle=addtitle;
 this.additem=additem;
 this.starttitle=-1;
 this.show=show;
 this.getOutLine=getOutLine;
 this.opentitle=this.starttitle;
 this.reflesh=outreflesh;
 this.timedelay=50;
 this.inc=10;
 this.maincolor = "#336699"
}
function outreflesh()
{
 document.all("outLookBarDiv").innerHTML=outlookbar.getOutLine();
}
function locatefold(foldname)
{
 if (foldname=="")
  foldname = outlookbar.titlelist[0].title
 for (var i=0;i<outlookbar.titlelist.length;i++)
 {
  if(foldname==outlookbar.titlelist[i].title)
  {
   outlookbar.starttitle=i;
   outlookbar.opentitle=i;
  }
 }
}
var outlookbar=new outlook();
var tempinnertext1,tempinnertext2,outlooksmoothstat
outlooksmoothstat = 0;

var t;
t=outlookbar.addtitle('技术文档')
outlookbar.additem('Web开发',t,'http://sc.jcwcn.com/tx/js/index.asp')
outlookbar.additem('数据库',t,'http://sc.jcwcn.com/tx/js/index.asp')
t=outlookbar.addtitle('计算机技术')
outlookbar.additem('操作系统',t,'http://sc.jcwcn.com/tx/js/index.asp')
outlookbar.additem('网络安全',t,'http://sc.jcwcn.com/tx/js/index.asp')
outlookbar.additem('小技巧',t,'http://sc.jcwcn.com/tx/js/index.asp')
outlookbar.additem('硬件相关',t,'http://sc.jcwcn.com/tx/js/index.asp')
t=outlookbar.addtitle('文摘')
outlookbar.additem('求职 ',t,'http://sc.jcwcn.com/tx/js/index.asp')
outlookbar.additem('杂文 ',t,'http://sc.jcwcn.com/tx/js/index.asp')
outlookbar.additem('生活 ',t,'http://sc.jcwcn.com/tx/js/index.asp')
outlookbar.additem('人生 ',t,'http://sc.jcwcn.com/tx/js/index.asp')
outlookbar.additem('健康 ',t,'http://sc.jcwcn.com/tx/js/index.asp')
outlookbar.additem('知识 ',t,'http://sc.jcwcn.com/tx/js/index.asp')
outlookbar.additem('爱情 ',t,'http://sc.jcwcn.com/tx/js/index.asp')
outlookbar.additem('幽默笑话 ',t,'http://sc.jcwcn.com/tx/js/index.asp')
outlookbar.additem('寓言 ',t,'http://sc.jcwcn.com/tx/js/index.asp')
outlookbar.additem('教育 ',t,'http://sc.jcwcn.com/tx/js/index.asp')
outlookbar.additem('散文 ',t,'http://sc.jcwcn.com/tx/js/index.asp')
t=outlookbar.addtitle('技术文档2')
outlookbar.additem('Web开发',t,'http://sc.jcwcn.com/tx/js/index.asp')
outlookbar.additem('数据库',t,'http://sc.jcwcn.com/tx/js/index.asp')
t=outlookbar.addtitle('计算机技术2')
outlookbar.additem('操作系统',t,'http://sc.jcwcn.com/tx/js/index.asp')
outlookbar.additem('网络安全',t,'http://sc.jcwcn.com/tx/js/index.asp')
outlookbar.additem('小技巧',t,'http://sc.jcwcn.com/tx/js/index.asp')
outlookbar.additem('硬件相关',t,'http://sc.jcwcn.com/tx/js/index.asp')
t=outlookbar.addtitle('文摘2')
outlookbar.additem('求职 ',t,'http://sc.jcwcn.com/tx/js/index.asp')
outlookbar.additem('杂文 ',t,'http://sc.jcwcn.com/tx/js/index.asp')
outlookbar.additem('生活 ',t,'http://sc.jcwcn.com/tx/js/index.asp')
outlookbar.additem('人生 ',t,'http://sc.jcwcn.com/tx/js/index.asp')
outlookbar.additem('健康 ',t,'http://sc.jcwcn.com/tx/js/index.asp')
outlookbar.additem('知识 ',t,'http://sc.jcwcn.com/tx/js/index.asp')
outlookbar.additem('爱情 ',t,'http://sc.jcwcn.com/tx/js/index.asp')
outlookbar.additem('幽默笑话 ',t,'http://sc.jcwcn.com/tx/js/index.asp')
outlookbar.additem('寓言 ',t,'http://sc.jcwcn.com/tx/js/index.asp')
outlookbar.additem('教育 ',t,'http://sc.jcwcn.com/tx/js/index.asp')
outlookbar.additem('散文 ',t,'http://sc.jcwcn.com/tx/js/index.asp')
//-->
</script>
<table id=mnuList style="WIDTH:150px;HEIGHT: 100%" cellspacing=0 cellpadding=0 align=center border=0>
 <tr> 
  <td bgcolor=#F0F0E5 id=outLookBarShow style="HEIGHT: 100%" valign=top align=center name="outLookBarShow">
   <script language="JavaScript">
   <!--
   locatefold("")
   outlookbar.show() 
   //-->
   </script>
  </td>
 </tr>
</table>
</body>
</html>
</textarea><br /><input onclick="runCode()" type="button" value="运行代码" /> <input type="button" value="复制代码" onclick="copycode(run_Code)" />[提示：你可先修改部分代码，再按运行]</span>
</body></html><img src ="http://www.blogjava.net/szhswl/aggbug/166747.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/szhswl/" target="_blank">宋针还</a> 2007-12-10 18:01 <a href="http://www.blogjava.net/szhswl/articles/166747.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>js触发弹出层</title><link>http://www.blogjava.net/szhswl/articles/166724.html</link><dc:creator>宋针还</dc:creator><author>宋针还</author><pubDate>Mon, 10 Dec 2007 09:21:00 GMT</pubDate><guid>http://www.blogjava.net/szhswl/articles/166724.html</guid><wfw:comment>http://www.blogjava.net/szhswl/comments/166724.html</wfw:comment><comments>http://www.blogjava.net/szhswl/articles/166724.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/szhswl/comments/commentRss/166724.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/szhswl/services/trackbacks/166724.html</trackback:ping><description><![CDATA[<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>如何实现运行代码框功能</title>
<script language=javascript>
function runCode()  //定义一个运行代码的函数，
{
 if(1 == arguments.length)
  try{event = arguments[0];}catch(e){}
  var code=(event.target || event.srcElement).parentNode.childNodes[0].value;//即要运行的代码。
  var newwin=window.open('','','');  //打开一个窗口并赋给变量newwin。
  newwin.opener = null // 防止代码对原页面修改
  newwin.document.write(code);  //向这个打开的窗口中写入代码code，这样就实现了运行代码功能。
  newwin.document.close();
}
function copycode(obj) {
 var rng = document.body.createTextRange();
 rng.moveToElementText(obj);
 rng.scrollIntoView();
 rng.select();
 rng.execCommand("Copy");
 rng.collapse(false);
}
</script>
<style>
textarea {
 font-size: 12px;FONT-FAMILY: "Tahoma", "MS Shell Dlg";
}
.codetextarea {
 font-family: "宋体";
 font-size: 12px;
 height: 310px;
 width: 515px;
 word-wrap:normal;
 word-break:keep-all;
}
</style>
</head><body>
<span><textarea class="codeTextarea" name="run_Code"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>messagBox</title>
<style>
#messWindow{
position:absolute;z-index:1;filter:alpha(opacity=0);background-color:#000000;visibility:hidden;
}
#promptWindow{
position:absolute; z-index:3; width: 540px; height:300px;background-color:#fff;display:none;
}
#titleBar{
background-color:#f1edcf;color:#000;padding-left:4px;padding-top:2px;font-weight:bold;font-size:14px; width:540px;height:22px;line-height:22px;
}
#titleBar span{
float:left; cursor:hand;
font-weight:normal;
}
#mainContent{
width:540px;height:255px;
}
#bottomBar{
background-color:#f7f7f7; width:540px; height:23px;
}
#bottomBar span{
float:right;
}
</style>
</head>
<body topmargin=0 leftmargin=0>
<div id="messWindow"></div>
<div id="promptWindow" align="center">
  <div  id="titleBar"><span onClick="hide()">&#215;</span><span>   标题栏</span></div>
  <div  id="mainContent">主要显示区域</div>
  <div  id="bottomBar"><span>
    <input type="button" value=" 关 闭 " onClick="hide()" />
    </span> </div>
  <!-- <iframe style="position:absolute; visibility:inherit; top:0px; left:0px; width:540px; height:300px; z-index:-1; filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';"></iframe>-->
</div>
<li><a href="#" onClick="show()">触发弹出层</a></li>
<script type="text/javascript">
var obj=document.getElementById("messWindow")
var  t = new Object();
function show(){
 obj.style.visibility="visible";
 obj.style.width=document.documentElement.clientWidth  /* document.body.clientWidth */;
 obj.style.height=document.documentElement.clientHeight;
 document.getElementById('promptWindow').style.top= (document.documentElement.offsetHeight-300)/2;
 document.getElementById('promptWindow').style.left= (document.documentElement.offsetWidth-540)/2;
 document.getElementById('promptWindow').style.display='block';
 if(obj.filters.alpha.opacity>5){
  obj.filters.alpha.opacity=25;
  clearTimeout(t.timer1);
  return;
 }else{
  obj.filters.alpha.opacity+=5;
  t.timer1=setTimeout("show()",5)
 }
 return;
}
function hide(){
    // alert();
 if(obj.filters.alpha.opacity<=0){
  obj.filters.alpha.opacity=0;
  obj.style.visibility="hidden"
  document.getElementById('promptWindow').style.display='none';
  clearTimeout(t.timer2)
  return;
 }else{
  obj.filters.alpha.opacity-=5;
  t.timer2=setTimeout("hide()",5);
 }
 return;
}
</script>
</body></html>
</textarea><br /><input onclick="runCode()" type="button" value="运行代码" /> <input type="button" value="复制代码" onclick="copycode(run_Code)" />[提示：你可先修改部分代码，再按运行]</span>
</body></html><img src ="http://www.blogjava.net/szhswl/aggbug/166724.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/szhswl/" target="_blank">宋针还</a> 2007-12-10 17:21 <a href="http://www.blogjava.net/szhswl/articles/166724.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>javascript框架编程</title><link>http://www.blogjava.net/szhswl/articles/166655.html</link><dc:creator>宋针还</dc:creator><author>宋针还</author><pubDate>Mon, 10 Dec 2007 06:31:00 GMT</pubDate><guid>http://www.blogjava.net/szhswl/articles/166655.html</guid><wfw:comment>http://www.blogjava.net/szhswl/comments/166655.html</wfw:comment><comments>http://www.blogjava.net/szhswl/articles/166655.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/szhswl/comments/commentRss/166655.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/szhswl/services/trackbacks/166655.html</trackback:ping><description><![CDATA[<p><font size="4"><strong>使用JavaScript框架<br />
　　在讲述 window 对象的时候，我们提到过，一个框架内的网页也是 window 对象，也就是说，Frame 对象也是 window 对象。用最容易理解的话说，每一个 HTML 文件占用一个 window 对象，包括定义框架的网页（&#8220;框架网页&#8221;）。在 IE 里用&#8220;&lt;iframe&gt;&#8221;标记在文档中插入的框架也是 window 对象，但是用&#8220;包含网页&#8221;的方法（在 HTML 中显示为&#8220;&lt;!--webbot bot="include" ...--&gt;&#8221;）读取的 HTML 就不占用独自的 window 对象。每一个框架都是包含它的页的 window 对象的一个子对象（不知道应该叫&#8220;属性&#8221;不该），要引用它，可以用以下几种方法之一： </strong></p>
<div class="blockcode"><strong><code id="code0">window.frames[x]<br />
window.frames['frameName']<br />
window.frameName</code><br />
</strong></div>
<p><strong>　　其中，x 指的是该 window 对象中指定的第几个框架，与其它数组一样，x 也是从零开始的。frameName 指的是该框架的名字，跟&lt;frame&gt;里的&#8220;name&#8221;属性一样。<br />
<br />
　　如果使用 window.frameName 指定的 window 对象又是一个框架网页，那么引用它的框架的方法：window.frameName.subFrameName。以此类推。<br />
<br />
　　要注意的时，无论在何处，引用&#8220;window&#8221;对象所返回的，都是&#8220;当前&#8221;window 对象。如果要访问其它 window 对象，就要用到 parent 和 top 属性。parent 指的是&#8220;父级&#8221;window 对象，也就是包含当前 window 对象的框架网页；top 指的是窗口最顶端的 window 对象。<br />
<br />
　　使用框架还要密切留意你的 JavaScript 中定义的全局变量和自定义函数。它们都有它们的所属——所在的 window 对象。要引用其它框架中的全局变量或自定义函数，都要用&#8220;窗口对象.框架对象[.框架对象&#8230;].全局变量或自定义函数&#8221;这种很烦的方法。<br />
<br />
　　以上这个问题在建立连接时经常会被忽略：如果在&lt;head&gt;中定义了一个默认目标窗口（&lt;base target="..."&gt;），在&lt;a href="javascript:..."&gt;中，要知道输入的 JavaScript 语句是在默认目标窗口中运行的，必要时加一些&#8220;parent&#8221;&#8220;top&#8221;属性。<br />
<br />
</strong><strong><font size="4">框架编程概述<br />
</font><font size="2">一个HTML页面可以有一个或多个子框架，这些子框架以&lt;iframe&gt;来标记，用来显示一个独立的HTML页面。这里所讲的框架编程包括框架的自我控制以及框架之间的互相访问，例如从一个框架中引用另一个框架中的JavaScript变量、调用其他框架内的函数、控制另一个框架中表单的行为等。</font><br />
</strong><font size="4"><strong>框架间的互相引用<br />
</strong></font><font size="2"><strong>一个页面中的所有框架以集合的形式作为window对象的属性提供，例如：window.frames就表示该页面内所有框架的集合，这和表单对象、链接对象、图片对象等是类似的，不同的是，这些集合是document的属性。因此，要引用一个子框架，可以使用如下语法： </strong></p>
<div class="blockcode"><code id="code1"><span style="font-size: 12pt"><strong><code id="code1">window.frames["frameName"];<br />
window.frames.frameName<br />
window.frames[index]</code><br />
</strong></span></code></div>
<p><strong>其中，window字样也可以用self代替或省略，假设frameName为页面中第一个框架，则以下的写法是等价的： </strong></p>
<div class="blockcode"><strong><code id="code2" style="font-size: 12pt">self.frames["frameName"]<br />
self.frames[0]<br />
frames[0]<br />
frameName</code><br />
</strong></div>
<p><strong>每个框架都对应一个HTML页面，所以这个框架也是一个独立的浏览器窗口，它具有窗口的所有性质，所谓对框架的引用也就是对window对象的引用。有了这个window对象，就可以很方便地对其中的页面进行操作，例如使用window.document对象向页面写入数据、使用window.location属性来改变框架内的页面等。<br />
下面分别介绍不同层次框架间的互相引用：</strong></font><br />
<font size="2"><br />
<strong>1．父框架到子框架的引用<br />
知道了上述原理，从父框架引用子框架变的非常容易，即： </strong></p>
<div class="blockcode"><strong><code id="code3" style="font-size: 12pt">window.frames["frameName"];</code><br />
</strong></div>
<p><strong>这样就引用了页面内名为frameName的子框架。如果要引用子框架内的子框架，根据引用的框架实际就是window对象的性质，可以这样实现： </strong></p>
<div class="blockcode"><strong><code id="code4" style="font-size: 12pt">window.frames["frameName"].frames["frameName2"];</code><br />
</strong></div>
<p><strong>这样就引用到了二级子框架，以此类推，可以实现多层框架的引用。<br />
<br />
</strong></font><strong><font size="2">2．子框架到父框架的引用<br />
每个window对象都有一个parent属性，表示它的父框架。如果该框架已经是顶层框架，则window.parent还表示该框架本身。</font><br />
</strong><font size="2"><br />
<strong>3．兄弟框架间的引用<br />
如果两个框架同为一个框架的子框架，它们称为兄弟框架，可以通过父框架来实现互相引用，例如一个页面包括2个子框架： </strong></p>
<div class="blockcode" style="font-size: 12pt"><strong><code id="code5">&lt;frameset rows="50%,50%"&gt;<br />
&nbsp; &nbsp;&nbsp; &nbsp;&lt;frame src="1.html" /&gt;<br />
&nbsp; &nbsp;&nbsp; &nbsp;&lt;frame src="2.html" /&gt;<br />
&lt;/frameset&gt;</code><br />
</strong></div>
<p><strong>在frame1中可以使用如下语句来引用frame2： </strong></p>
<div class="blockcode"><strong><code id="code6" style="font-size: 12pt">self.parent.frames["frame2"];</code><br />
</strong></div>
<p><strong>4．不同层次框架间的互相引用<br />
框架的层次是针对顶层框架而言的。当层次不同时，只要知道自己所在的层次以及另一个框架所在的层次和名字，利用框架引用的window对象性质，可以很容易地实现互相访问，例如： </strong></p>
<div class="blockcode" style="font-size: 12pt"><strong><code id="code7">self.parent.frames["childName"].frames["targetFrameName"];</code><br />
</strong></div>
<p><strong>5．对顶层框架的引用<br />
和parent属性类似，window对象还有一个top属性。它表示对顶层框架的引用，这可以用来判断一个框架自身是否为顶层框架，例如： </strong></p>
<div class="blockcode"><strong><code id="code8" style="font-size: 12pt">//判断本框架是否为顶层框架<br />
if(self==top){<br />
&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;//dosomething<br />
}</code><br />
</strong></div>
<p></font><br />
<br />
<br />
<font size="4"><strong>改变框架的载入页面<br />
</strong></font><font size="2"><strong>对框架的引用就是对window对象的引用，利用window对象的location属性，可以改变框架的导航，例如： </strong></p>
<div class="blockcode"><strong><code id="code9" style="font-size: 12pt">window.frames[0].location="1.html";</code><br />
</strong></div>
<p><strong>这就将页面中第一个框架的页面重定向到1.html，利用这个性质，甚至可以使用一条链接来更新多个框架。 </strong></p>
<div class="blockcode"><strong><code id="code10" style="font-size: 12pt">&lt;frameset rows="50%,50%"&gt;<br />
&nbsp; &nbsp;&nbsp; &nbsp;&lt;frame src="1.html" /&gt;<br />
&nbsp; &nbsp;&nbsp; &nbsp;&lt;frame src="2.html" /&gt;<br />
&lt;/frameset&gt;<br />
&lt;!--somecode--&gt;<br />
&lt;a href="frame1.location='3.html;frame2.location='4.html'" &gt;link&lt;/a&gt;<br />
&lt;!--somecode--&gt;</code><br />
</strong></div>
<p></font><br />
<font size="2"></font><br />
<font size="2"></font><br />
<br />
<font size="4"><strong>引用其他框架内的JavaScript变量和函数<br />
</strong></font><font size="2"><strong>在介绍引用其他框架内JavaScript变量和函数的技术之前，先来看以下代码： </strong></p>
<div class="blockcode"><strong><code id="code11" style="font-size: 12pt">&lt;script language="JavaScript" type="text/javascript"&gt;<br />
&lt;!--<br />
function hello(){<br />
&nbsp; &nbsp;&nbsp; &nbsp; alert("hello,ajax!");<br />
}<br />
window.hello();<br />
//--&gt;<br />
&lt;/script&gt;</code><br />
</strong></div>
<p><strong>如果运行了这段代码，会弹出&#8220;hello,ajax!&#8221;的窗口，这正是执行hello()函数的结果。那为什么hello()变成了window对象的方法呢？因为在一个页面内定义的所有全局变量和全局函数都是作为window对象的成员。例如： </strong></p>
<div class="blockcode"><strong><code id="code12" style="font-size: 12pt">var a=1;<br />
alert(window.a);</code><br />
</strong></div>
<p><strong>就会弹出对话框显示为1。同样的原理，在不同框架之间共享变量和函数，就是要通过window对象来调用。<br />
例如：一个商品浏览页面由两个子框架组成，左侧表示商品分类的链接；当用户单击分类链接时，右侧显示相应的商品列表；用户可以单击商品旁的【购买】链接将商品加入购物车。<br />
在这个例子中，可以利用左侧导航页面来存储用户希望购买的商品，因为当用户单击导航链接时，变化的是另外一个页面，即商品展示页面，而导航页面本身是不变的，因此其中的JavaScript变量不会丢失，可以用来存储全局数据。其实现原理如下：<br />
假设左侧页面为link.html，右侧页面为show.html，页面结构如下： </strong></p>
<div class="blockcode"><strong><code id="code13" style="font-size: 12pt">&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt;<br />
&lt;html&gt;<br />
&lt;head&gt;<br />
&lt;title&gt; New Document &lt;/title&gt;<br />
&lt;/head&gt;<br />
&lt;frameset cols="20%,80%"&gt;<br />
&nbsp; &nbsp;&nbsp; &nbsp; &lt;frame src="link.html" /&gt;<br />
&nbsp; &nbsp;&nbsp; &nbsp; &lt;frame src="show.html" /&gt;<br />
&lt;/frameset&gt;<br />
&lt;/html&gt;</code><br />
</strong></div>
<p><strong>在show.html中展示的商品旁边可以加入这样一条语句：<br />
&lt;a href="void(0)" &gt;加入购物车&lt;/a&gt;<br />
其中link表示导航框架，在link.html页面中定义了arrOrders数组来存储商品的id，函数addToOrders()用来响应商品旁边【购买】链接的单击事件，它接收的参数id表示商品的id，例子中是一个id为32068的商品： </strong></p>
<div class="blockcode"><strong><code id="code14" style="font-size: 12pt">&lt;script language="JavaScript" type="text/javascript"&gt;<br />
&lt;!--<br />
var arrOrders=new Array();<br />
function addToOrders(id){<br />
&nbsp; &nbsp;&nbsp; &nbsp; arrOrders.push(id);<br />
}<br />
//--&gt;<br />
&lt;/script&gt;</code><br />
</strong></div>
<p><strong>这样，在结帐页面或是购物车浏览页面就可以用arrOrders来获取所有准备购买的商品。<br />
框架可以使一个页面划分为功能独立的多个模块，每个模块之间彼此独立，但又可以通过window对象的引用来建立联系，是Web开发中的一个重要机制。在Ajax开发中，还可以利用隐藏框架实现各种技巧，在后面介绍Ajax实例编程时可以发现，无刷新上传文件以及解决Ajax的前进后退问题都会用到这种技术。<br />
</strong></font><br />
<span style="font-size: 8pt">本文转自:http://www.ijavascript.cn/jiaocheng/javascript-frames-programme-101.html</span><br />
</font></p>
<img src ="http://www.blogjava.net/szhswl/aggbug/166655.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/szhswl/" target="_blank">宋针还</a> 2007-12-10 14:31 <a href="http://www.blogjava.net/szhswl/articles/166655.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>仿MSN效果</title><link>http://www.blogjava.net/szhswl/articles/166635.html</link><dc:creator>宋针还</dc:creator><author>宋针还</author><pubDate>Mon, 10 Dec 2007 05:41:00 GMT</pubDate><guid>http://www.blogjava.net/szhswl/articles/166635.html</guid><wfw:comment>http://www.blogjava.net/szhswl/comments/166635.html</wfw:comment><comments>http://www.blogjava.net/szhswl/articles/166635.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/szhswl/comments/commentRss/166635.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/szhswl/services/trackbacks/166635.html</trackback:ping><description><![CDATA[<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>如何实现运行代码框功能</title>
<script language=javascript>
function runCode()  //定义一个运行代码的函数，
{
 if(1 == arguments.length)
  try{event = arguments[0];}catch(e){}
  var code=(event.target || event.srcElement).parentNode.childNodes[0].value;//即要运行的代码。
  var newwin=window.open('','','');  //打开一个窗口并赋给变量newwin。
  newwin.opener = null // 防止代码对原页面修改
  newwin.document.write(code);  //向这个打开的窗口中写入代码code，这样就实现了运行代码功能。
  newwin.document.close();
}
function copycode(obj) {
 var rng = document.body.createTextRange();
 rng.moveToElementText(obj);
 rng.scrollIntoView();
 rng.select();
 rng.execCommand("Copy");
 rng.collapse(false);
}
</script>
<style>
textarea {
 font-size: 12px;FONT-FAMILY: "Tahoma", "MS Shell Dlg";
}
.codetextarea {
 font-family: "宋体";
 font-size: 12px;
 height: 310px;
 width: 515px;
 word-wrap:normal;
 word-break:keep-all;
}
</style>
</head><body>
<span><textarea class="codeTextarea" name="run_Code"><html>
<head>
<title>类似MSN提示的页面效果</title>
</head>
<body scroll=no>
看到右下角的提示了吗？如果没有看到，<button onclick=location.reload();>刷新</button>一下
<script language="JavaScript">
window.onload = getMsg;
window.onresize = resizeDiv;
window.onerror = function(){}
//短信提示使用(asilas添加)
var divTop,divLeft,divWidth,divHeight,docHeight,docWidth,objTimer,i = 0;
function getMsg()
{
 try{
 divTop = parseInt(document.getElementById("eMeng").style.top,10)
 divLeft = parseInt(document.getElementById("eMeng").style.left,10)
 divHeight = parseInt(document.getElementById("eMeng").offsetHeight,10)
 divWidth = parseInt(document.getElementById("eMeng").offsetWidth,10)
 docWidth = document.body.clientWidth;
 docHeight = document.body.clientHeight;
 document.getElementById("eMeng").style.top = parseInt(document.body.scrollTop,10) + docHeight + 10;//  divHeight
 document.getElementById("eMeng").style.left = parseInt(document.body.scrollLeft,10) + docWidth - divWidth
 document.getElementById("eMeng").style.visibility="visible"
 objTimer = window.setInterval("moveDiv()",10)
 }
 catch(e){}
}
function resizeDiv()
{
 i+=1
 if(i>500) closeDiv()
 try{
 divHeight = parseInt(document.getElementById("eMeng").offsetHeight,10)
 divWidth = parseInt(document.getElementById("eMeng").offsetWidth,10)
 docWidth = document.body.clientWidth;
 docHeight = document.body.clientHeight;
 document.getElementById("eMeng").style.top = docHeight - divHeight + parseInt(document.body.scrollTop,10)
 document.getElementById("eMeng").style.left = docWidth - divWidth + parseInt(document.body.scrollLeft,10)
 }
 catch(e){}
}
function moveDiv()
{
 try
 {
 if(parseInt(document.getElementById("eMeng").style.top,10) <= (docHeight - divHeight + parseInt(document.body.scrollTop,10)))
 {
 window.clearInterval(objTimer)
 objTimer = window.setInterval("resizeDiv()",1)
 }
 divTop = parseInt(document.getElementById("eMeng").style.top,10)
 document.getElementById("eMeng").style.top = divTop - 1
 }
 catch(e){}
}
function closeDiv()
{
 document.getElementById('eMeng').style.visibility='hidden';
 if(objTimer) window.clearInterval(objTimer)
}
</script>
<DIV id=eMeng style="BORDER-RIGHT: #455690 1px solid; BORDER-TOP: #a6b4cf 1px solid; Z-INDEX:99999; LEFT: 0px; VISIBILITY: hidden; BORDER-LEFT: #a6b4cf 1px solid; WIDTH: 180px; BORDER-BOTTOM: #455690 1px solid; POSITION: absolute; TOP: 0px; HEIGHT: 116px; BACKGROUND-COLOR: #c9d3f3">
 <TABLE style="BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid" cellSpacing=0 cellPadding=0 width="100%" bgColor=#cfdef4 border=0>
 <TBODY>
  <TR>
   <TD style="FONT-SIZE: 12px; BACKGROUND-IMAGE: url(msgTopBg.gif); COLOR: #0f2c8c" width=30 height=24></TD>
   <TD style="FONT-WEIGHT: normal; FONT-SIZE: 12px; BACKGROUND-IMAGE: url(msgTopBg.gif); COLOR: #1f336b; PADDING-TOP: 4px;PADDING-left: 4px" valign=middle width="100%"> 短消息提示：</TD>
   <TD style="BACKGROUND-IMAGE: url(msgTopBg.gif); PADDING-TOP: 2px;PADDING-right:2px" valign=middle align=right width=19><span title=关闭 style="CURSOR: hand;color:red;font-size:12px;font-weight:bold;margin-right:4px;" onclick=closeDiv() >&#215;</span><!-- <img src="msgClose.jpg" onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)"  alt="" /> --></TD>
  </TR>
  <TR>
   <TD style="PADDING-RIGHT: 1px; BACKGROUND-IMAGE: url(1msgBottomBg.jpg); PADDING-BOTTOM: 1px" colSpan=3 height=90>
    <DIV style="BORDER-RIGHT: #b9c9ef 1px solid; PADDING-RIGHT: 13px; BORDER-TOP: #728eb8 1px solid; PADDING-LEFT: 13px; FONT-SIZE: 12px; PADDING-BOTTOM: 13px; BORDER-LEFT: #728eb8 1px solid; WIDTH: 100%; COLOR: #1f336b; PADDING-TOP: 18px; BORDER-BOTTOM: #b9c9ef 1px solid; HEIGHT: 100%">您有<font color=#FF0000>1封新短消息<BR><BR>
    <DIV align=center style="word-break:break-all"><a href="javascript:alert('你好')"><font color=#FF0000>点击查看短信</a></DIV
    </DIV>
   </TD>
  </TR>
 </TBODY>
 </TABLE>
</DIV>
</body>
</html>
</textarea><br /><input onclick="runCode()" type="button" value="运行代码" /> <input type="button" value="复制代码" onclick="copycode(run_Code)" />[提示：你可先修改部分代码，再按运行]</span>
</body></html><img src ="http://www.blogjava.net/szhswl/aggbug/166635.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/szhswl/" target="_blank">宋针还</a> 2007-12-10 13:41 <a href="http://www.blogjava.net/szhswl/articles/166635.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>FOCUS效果输入框</title><link>http://www.blogjava.net/szhswl/articles/166612.html</link><dc:creator>宋针还</dc:creator><author>宋针还</author><pubDate>Mon, 10 Dec 2007 03:32:00 GMT</pubDate><guid>http://www.blogjava.net/szhswl/articles/166612.html</guid><wfw:comment>http://www.blogjava.net/szhswl/comments/166612.html</wfw:comment><comments>http://www.blogjava.net/szhswl/articles/166612.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/szhswl/comments/commentRss/166612.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/szhswl/services/trackbacks/166612.html</trackback:ping><description><![CDATA[<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>如何实现运行代码框功能</title>
<script language=javascript>
function runCode()  //定义一个运行代码的函数，
{
 if(1 == arguments.length)
  try{event = arguments[0];}catch(e){}
  var code=(event.target || event.srcElement).parentNode.childNodes[0].value;//即要运行的代码。
  var newwin=window.open('','','');  //打开一个窗口并赋给变量newwin。
  newwin.opener = null // 防止代码对原页面修改
  newwin.document.write(code);  //向这个打开的窗口中写入代码code，这样就实现了运行代码功能。
  newwin.document.close();
}
function copycode(obj) {
 var rng = document.body.createTextRange();
 rng.moveToElementText(obj);
 rng.scrollIntoView();
 rng.select();
 rng.execCommand("Copy");
 rng.collapse(false);
}
</script>
<style>
textarea {
 font-size: 12px;FONT-FAMILY: "Tahoma", "MS Shell Dlg";
}
.codetextarea {
 font-family: "宋体";
 font-size: 12px;
 height: 310px;
 width: 515px;
 word-wrap:normal;
 word-break:keep-all;
}
</style>
</head><body>
<span><textarea class="codeTextarea" name="run_Code"><script>
function suckerfish(type, tag, parentId) {
if (window.attachEvent) {
window.attachEvent("onload", function() {
var sfEls = (parentId==null)?document.getElementsByTagName(tag):document.getElementById(parentId).getElementsByTagName(tag);
type(sfEls);
});
}
}
sfFocus = function(sfEls) {
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onfocus=function() {
this.className+=" sffocus";
}
sfEls[i].onblur=function() {
this.className=this.className.replace(new RegExp(" sffocus\\b"), "");
}
}
}
suckerfish(sfFocus, "INPUT");
suckerfish(sfFocus, "TEXTAREA"); 
</script>
<style type="text/css">
form{
margin: 0px auto;
width: 450px;
border: solid 1px #CCC;
}
.bo{
border-bottom: solid 1px #CCC; 
}
label{
float: left;
padding: 10px 0px 4px 30px; 
}
input{
padding: 1px; 
}
input,textarea{
border: 1px solid #CCC;
margin: 5px 0px; 
}
textarea{
padding: 2px;
}
.bt{
width: 38px;
height: 20px;
font-size: 11px;
border: solid 1px #CCC;
background: #FBFBFB;
text-align: center;
}
.btcenter{
text-align: center;
clear: left; 
padding: 4px 0px 0px;
}
.sffocus {/*----for IE----*/
background: #F0F9FB;
border: 1px solid #1D95C7;
}
textarea:focus, input:focus {/*----for firefox......----*/
background: #F0F9FB;
border: 1px solid #1D95C7;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666666;
margin-top:20px;
}
</style>
<form action="#" method="post" name="myform" id="myform">
<div class="bo">
<label>姓名：</label>
<input type="text"size="20" maxlength="10" /> 
</div>
<div class="bo">
<label>电话：</label>
<input type="text" size="20" maxlength="16" />
</div>
<div class="bo">
<label>主题：</label>
<input type="text" size="30" maxlength="20" /> 
</div>
<div class="bo">
<label>内容：</label>
<textarea cols="40" rows="8"></textarea> 
</div>
<div class="btcenter">
<input type="submit" class="bt" value="Send" />
 
<input type="reset" class="bt" value="Reset" />
</div>
</form>
</textarea><br /><input onclick="runCode()" type="button" value="运行代码" /> <input type="button" value="复制代码" onclick="copycode(run_Code)" />[提示：你可先修改部分代码，再按运行]</span>
</body></html><img src ="http://www.blogjava.net/szhswl/aggbug/166612.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/szhswl/" target="_blank">宋针还</a> 2007-12-10 11:32 <a href="http://www.blogjava.net/szhswl/articles/166612.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>用CSS实现的几个非常漂亮的按钮</title><link>http://www.blogjava.net/szhswl/articles/166597.html</link><dc:creator>宋针还</dc:creator><author>宋针还</author><pubDate>Mon, 10 Dec 2007 02:57:00 GMT</pubDate><guid>http://www.blogjava.net/szhswl/articles/166597.html</guid><wfw:comment>http://www.blogjava.net/szhswl/comments/166597.html</wfw:comment><comments>http://www.blogjava.net/szhswl/articles/166597.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/szhswl/comments/commentRss/166597.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/szhswl/services/trackbacks/166597.html</trackback:ping><description><![CDATA[<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>如何实现运行代码框功能</title>
<script language=javascript>
function runCode()  //定义一个运行代码的函数，
{
 if(1 == arguments.length)
  try{event = arguments[0];}catch(e){}
  var code=(event.target || event.srcElement).parentNode.childNodes[0].value;//即要运行的代码。
  var newwin=window.open('','','');  //打开一个窗口并赋给变量newwin。
  newwin.opener = null // 防止代码对原页面修改
  newwin.document.write(code);  //向这个打开的窗口中写入代码code，这样就实现了运行代码功能。
  newwin.document.close();
}
function copycode(obj) {
 var rng = document.body.createTextRange();
 rng.moveToElementText(obj);
 rng.scrollIntoView();
 rng.select();
 rng.execCommand("Copy");
 rng.collapse(false);
}
</script>
<style>
textarea {
 font-size: 12px;FONT-FAMILY: "Tahoma", "MS Shell Dlg";
}
.codetextarea {
 font-family: "宋体";
 font-size: 12px;
 height: 310px;
 width: 515px;
 word-wrap:normal;
 word-break:keep-all;
}
</style>
</head><body>
<span><textarea class="codeTextarea" name="run_Code"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>用CSS实现的几个非常漂亮的按钮</title>
<style>
.btn {
BORDER-RIGHT: #7b9ebd 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7b9ebd 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cecfde); BORDER-LEFT: #7b9ebd 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7b9ebd 1px solid
}
.btn1_mouseout {
BORDER-RIGHT: #7EBF4F 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7EBF4F 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#B3D997); BORDER-LEFT: #7EBF4F 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7EBF4F 1px solid
}
.btn1_mouseover {
BORDER-RIGHT: #7EBF4F 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7EBF4F 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#CAE4B6); BORDER-LEFT: #7EBF4F 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7EBF4F 1px solid
}
.btn2 {padding: 2 4 0 4;font-size:12px;height:23;background-color:#ece9d8;border-width:1;}
.btn3_mouseout {
BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid
}
.btn3_mouseover {
BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#D7E7FA); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid
}
.btn3_mousedown
{
BORDER-RIGHT: #FFE400 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #FFE400 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #FFE400 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #FFE400 1px solid
}
.btn3_mouseup {
BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid
}
.btn_2k3 {
BORDER-RIGHT: #002D96 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #002D96 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#FFFFFF, EndColorStr=#9DBCEA); BORDER-LEFT: #002D96 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #002D96 1px solid
}
</style>
</head>
<body>
<button class=btn title="好看的按钮">好看的按钮</button><p>&nbsp;</p>
<button 
class=btn1_mouseout onmouseover="this.className='btn1_mouseover'"
onmouseout="this.className='btn1_mouseout'"
title="好看的按钮">好看的按钮</button>  
<button 
class=btn1_mouseout onmouseover="this.className='btn1_mouseover'"
onmouseout="this.className='btn1_mouseout'" DISABLED>好看的按钮</button>
<P>
<button class=btn2 title="好看的按钮">好看的按钮</button>
<P>
<button class=btn3_mouseout onmouseover="this.className='btn3_mouseover'"
onmouseout="this.className='btn3_mouseout'"
onmousedown="this.className='btn3_mousedown'"
onmouseup="this.className='btn3_mouseup'"
title="好看的按钮">好看的按钮</button>
<P>
<button class=btn_2k3 title="好看的按钮">好看的按钮</button>
</body>
</html>
</textarea><br /><input onclick="runCode()" type="button" value="运行代码" /> <input type="button" value="复制代码" onclick="copycode(run_Code)" />[提示：你可先修改部分代码，再按运行]</span>
</body></html><img src ="http://www.blogjava.net/szhswl/aggbug/166597.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/szhswl/" target="_blank">宋针还</a> 2007-12-10 10:57 <a href="http://www.blogjava.net/szhswl/articles/166597.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>JS翻页效果</title><link>http://www.blogjava.net/szhswl/articles/166501.html</link><dc:creator>宋针还</dc:creator><author>宋针还</author><pubDate>Sun, 09 Dec 2007 12:39:00 GMT</pubDate><guid>http://www.blogjava.net/szhswl/articles/166501.html</guid><wfw:comment>http://www.blogjava.net/szhswl/comments/166501.html</wfw:comment><comments>http://www.blogjava.net/szhswl/articles/166501.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/szhswl/comments/commentRss/166501.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/szhswl/services/trackbacks/166501.html</trackback:ping><description><![CDATA[<script language=javascript>
function runCode()  //定义一个运行代码的函数，
{
 if(1 == arguments.length)
  try{event = arguments[0];}catch(e){}
  var code=(event.target || event.srcElement).parentNode.childNodes[0].value;//即要运行的代码。
  var newwin=window.open('','','');  //打开一个窗口并赋给变量newwin。
  newwin.opener = null // 防止代码对原页面修改
  newwin.document.write(code);  //向这个打开的窗口中写入代码code，这样就实现了运行代码功能。
  newwin.document.close();
}
function copycode(obj) {
 var rng = document.body.createTextRange();
 rng.moveToElementText(obj);
 rng.scrollIntoView();
 rng.select();
 rng.execCommand("Copy");
 rng.collapse(false);
}
</script>
<style>
textarea {
font-size: 12px;FONT-FAMILY: "Tahoma", "MS Shell Dlg";
}
.codetextarea {
font-family: "宋体";
font-size: 12px;
height: 310px;
width: 515px;
word-wrap:normal;
word-break:keep-all;
}
</style>
<span><textarea class="codeTextarea" name="run_Code">&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312" /&gt;
&lt;title&gt; JavaScript: showPages v1.0 [by Lapuasi.com]&lt;/title&gt;
<script language="JavaScript">
<!--
/*
showPages v1.1
=================================
Infomation
----------------------
Author : Lapuasi
E-Mail : lapuasi@gmail.com
Web : http://www.lapuasi.com
Date : 2005-11-17

Example
----------------------
var pg = new showPages('pg');
pg.pageCount = 12; //定义总页数(必要)
pg.argName = 'p';    //定义参数名(可选,缺省为page)
pg.printHtml();        //显示页数

Supported in Internet Explorer, Mozilla Firefox
*/
function showPages(name) { //初始化属性
 this.name = name;      //对象名称
 this.page = 1;         //当前页数
 this.pageCount = 1;    //总页数
 this.argName = 'page'; //参数名
 this.showTimes = 1;    //打印次数
}
showPages.prototype.getPage = function(){ //丛url获得当前页数,如果变量重复只获取最后一个
 var args = location.search;
 var reg = new RegExp('[\?&]?' + this.argName + '=([^&]*)[ && #36;]?', 'gi');
 var chk = args.match(reg);
 this.page = RegExp.$1;
}
showPages.prototype.checkPages = function(){ //进行当前页数和总页数的验证
 if (isNaN(parseInt(this.page))) this.page = 1;
 if (isNaN(parseInt(this.pageCount))) this.pageCount = 1;
 if (this.page < 1) this.page = 1;
 if (this.pageCount < 1) this.pageCount = 1;
 if (this.page > this.pageCount) this.page = this.pageCount;
 this.page = parseInt(this.page);
 this.pageCount = parseInt(this.pageCount);
}
showPages.prototype.createHtml = function(mode){ //生成html代码
 var strHtml = '', prevPage = this.page - 1, nextPage = this.page + 1;
 if (mode == '' || typeof(mode) == 'undefined') mode = 0;
 switch (mode) {
  case 0 : //模式1 (页数,首页,前页,后页,尾页)
   strHtml += '<span class="count">Pages: ' + this.page + ' / ' + this.pageCount + '</span>';
   strHtml += '<span class="number">';
   if (prevPage < 1) {
    strHtml += '<span title="First Page">&#171;</span>';
    strHtml += '<span title="Prev Page">&#8249;</span>';
   } else {
    strHtml += '<span title="First Page"><a href="javascript:' + this.name + '.toPage(1);">&#171;</a></span>';
    strHtml += '<span title="Prev Page"><a href="javascript:' + this.name + '.toPage(' + prevPage + ');">&#8249;</a></span>';
   }
   for (var i = 1; i <= this.pageCount; i++) {
    if (i > 0) {
     if (i == this.page) {
      strHtml += '<span title="Page ' + i + '">[' + i + ']</span>';
     } else {
      strHtml += '<span title="Page ' + i + '"><a href="javascript:' + this.name + '.toPage(' + i + ');">[' + i + ']</a></span>';
     }
    }
   }
   if (nextPage > this.pageCount) {
    strHtml += '<span title="Next Page">&#8250;</span>';
    strHtml += '<span title="Last Page">&#187;</span>';
   } else {
    strHtml += '<span title="Next Page"><a href="javascript:' + this.name + '.toPage(' + nextPage + ');">&#8250;</a></span>';
    strHtml += '<span title="Last Page"><a href="javascript:' + this.name + '.toPage(' + this.pageCount + ');">&#187;</a></span>';
   }
   strHtml += '</span><br />';
   break;
  case 1 : //模式1 (10页缩略,首页,前页,后页,尾页)
   strHtml += '<span class="count">Pages: ' + this.page + ' / ' + this.pageCount + '</span>';
   strHtml += '<span class="number">';
   if (prevPage < 1) {
    strHtml += '<span title="First Page">&#171;</span>';
    strHtml += '<span title="Prev Page">&#8249;</span>';
   } else {
    strHtml += '<span title="First Page"><a href="javascript:' + this.name + '.toPage(1);">&#171;</a></span>';
    strHtml += '<span title="Prev Page"><a href="javascript:' + this.name + '.toPage(' + prevPage + ');">&#8249;</a></span>';
   }
   if (this.page % 10 ==0) {
    var startPage = this.page - 9;
   } else {
    var startPage = this.page - this.page % 10 + 1;
   }
   if (startPage > 10) strHtml += '<span title="Prev 10 Pages"><a href="javascript:' + this.name + '.toPage(' + (startPage - 1) + ');">...</a></span>';
   for (var i = startPage; i < startPage + 10; i++) {
    if (i > this.pageCount) break;
    if (i == this.page) {
     strHtml += '<span title="Page ' + i + '">[' + i + ']</span>';
    } else {
     strHtml += '<span title="Page ' + i + '"><a href="javascript:' + this.name + '.toPage(' + i + ');">[' + i + ']</a></span>';
    }
   }
   if (this.pageCount >= startPage + 10) strHtml += '<span title="Next 10 Pages"><a href="javascript:' + this.name + '.toPage(' + (startPage + 10) + ');">...</a></span>';
   if (nextPage > this.pageCount) {
    strHtml += '<span title="Next Page">&#8250;</span>';
    strHtml += '<span title="Last Page">&#187;</span>';
   } else {
    strHtml += '<span title="Next Page"><a href="javascript:' + this.name + '.toPage(' + nextPage + ');">&#8250;</a></span>';
    strHtml += '<span title="Last Page"><a href="javascript:' + this.name + '.toPage(' + this.pageCount + ');">&#187;</a></span>';
   }
   strHtml += '</span><br />';
   break;
  case 2 : //模式2 (前后缩略,页数,首页,前页,后页,尾页)
   strHtml += '<span class="count">Pages: ' + this.page + ' / ' + this.pageCount + '</span>';
   strHtml += '<span class="number">';
   if (prevPage < 1) {
    strHtml += '<span title="First Page">&#171;</span>';
    strHtml += '<span title="Prev Page">&#8249;</span>';
   } else {
    strHtml += '<span title="First Page"><a href="javascript:' + this.name + '.toPage(1);">&#171;</a></span>';
    strHtml += '<span title="Prev Page"><a href="javascript:' + this.name + '.toPage(' + prevPage + ');">&#8249;</a></span>';
   }
   if (this.page != 1) strHtml += '<span title="Page 1"><a href="javascript:' + this.name + '.toPage(1);">[1]</a></span>';
   if (this.page >= 5) strHtml += '<span>...</span>';
   if (this.pageCount > this.page + 2) {
    var endPage = this.page + 2;
   } else {
    var endPage = this.pageCount;
   }
   for (var i = this.page - 2; i <= endPage; i++) {
    if (i > 0) {
     if (i == this.page) {
      strHtml += '<span title="Page ' + i + '">[' + i + ']</span>';
     } else {
      if (i != 1  &&  i != this.pageCount) {
       strHtml += '<span title="Page ' + i + '"><a href="javascript:' + this.name + '.toPage(' + i + ');">[' + i + ']</a></span>';
      }
     }
    }
   }
   if (this.page + 3 < this.pageCount) strHtml += '<span>...</span>';
   if (this.page != this.pageCount) strHtml += '<span title="Page ' + this.pageCount + '"><a href="javascript:' + this.name + '.toPage(' + this.pageCount + ');">[' + this.pageCount + ']</a></span>';
   if (nextPage > this.pageCount) {
    strHtml += '<span title="Next Page">&#8250;</span>';
    strHtml += '<span title="Last Page">&#187;</span>';
   } else {
    strHtml += '<span title="Next Page"><a href="javascript:' + this.name + '.toPage(' + nextPage + ');">&#8250;</a></span>';
    strHtml += '<span title="Last Page"><a href="javascript:' + this.name + '.toPage(' + this.pageCount + ');">&#187;</a></span>';
   }
   strHtml += '</span><br />';
   break;
  case 3 : //模式3 (箭头样式,首页,前页,后页,尾页) (only IE)
   strHtml += '<span class="count">Pages: ' + this.page + ' / ' + this.pageCount + '</span>';
   strHtml += '<span class="arrow">';
   if (prevPage < 1) {
    strHtml += '<span title="First Page">9</span>';
    strHtml += '<span title="Prev Page">7</span>';
   } else {
    strHtml += '<span title="First Page"><a href="javascript:' + this.name + '.toPage(1);">9</a></span>';
    strHtml += '<span title="Prev Page"><a href="javascript:' + this.name + '.toPage(' + prevPage + ');">7</a></span>';
   }
   if (nextPage > this.pageCount) {
    strHtml += '<span title="Next Page">8</span>';
    strHtml += '<span title="Last Page">:</span>';
   } else {
    strHtml += '<span title="Next Page"><a href="javascript:' + this.name + '.toPage(' + nextPage + ');">8</a></span>';
    strHtml += '<span title="Last Page"><a href="javascript:' + this.name + '.toPage(' + this.pageCount + ');">:</a></span>';
   }
   strHtml += '</span><br />';
   break;
  case 4 : //模式4 (下拉框)
   if (this.pageCount < 1) {
    strHtml += '<select name="toPage" disabled>';
    strHtml += '<option value="0">No Pages</option>';
   } else {
    var chkSelect;
    strHtml += '<select name="toPage" onchange="' + this.name + '.toPage(this);">';
    for (var i = 1; i <= this.pageCount; i++) {
     if (this.page == i) chkSelect=' selected="selected"';
     else chkSelect='';
     strHtml += '<option value="' + i + '"' + chkSelect + '>Pages: ' + i + ' / ' + this.pageCount + '</option>';
    }
   }
   strHtml += '</select>';
   break;
  case 5 : //模式5 (输入框)
   strHtml += '<span class="input">';
   if (this.pageCount < 1) {
    strHtml += '<input type="text" name="toPage" value="No Pages" class="itext" disabled="disabled" />';
    strHtml += '<input type="button" name="go" value="GO" class="ibutton" disabled="disabled" /></option>';
   } else {
    strHtml += '<input type="text" value="Input Page:" class="ititle" readonly="readonly" />';
    strHtml += '<input type="text" id="pageInput' + this.showTimes + '" value="' + this.page + '" class="itext" title="Input page" onkeypress="return ' + this.name + '.formatInputPage(event);" onfocus="this.select()" />';
    strHtml += '<input type="text" value=" / ' + this.pageCount + '" class="icount" readonly="readonly" />';
    strHtml += '<input type="button" name="go" value="GO" class="ibutton" onclick="' + this.name + '.toPage(document.getElementById(\'pageInput' + this.showTimes + '\').value);" /></option>';
   }
   strHtml += '</span>';
   break;
  default :
   strHtml = 'Javascript showPage Error: not find mode ' + mode;
   break;
 }
 return strHtml;
}
showPages.prototype.createUrl = function (page) { //生成页面跳转url
 if (isNaN(parseInt(page))) page = 1;
 if (page < 1) page = 1;
 if (page > this.pageCount) page = this.pageCount;
 var url = location.protocol + '//' + location.host + location.pathname;
 var args = location.search;
 var reg = new RegExp('([\?&]?)' + this.argName + '=[^&]*[ && #36;]?', 'gi');
 args = args.replace(reg,'$1');
 if (args == '' || args == null) {
  args += '?' + this.argName + '=' + page;
 } else if (args.substr(args.length - 1,1) == '?' || args.substr(args.length - 1,1) == '&') {
   args += this.argName + '=' + page;
 } else {
   args += '&' + this.argName + '=' + page;
 }
 return url + args;
}
showPages.prototype.toPage = function(page){ //页面跳转
 var turnTo = 1;
 if (typeof(page) == 'object') {
  turnTo = page.options[page.selectedIndex].value;
 } else {
  turnTo = page;
 }
 self.location.href = this.createUrl(turnTo);
}
showPages.prototype.printHtml = function(mode){ //显示html代码
 this.getPage();
 this.checkPages();
 this.showTimes += 1;
 document.write('<div id="pages_' + this.name + '_' + this.showTimes + '" class="pages"></div>');
 document.getElementById('pages_' + this.name + '_' + this.showTimes).innerHTML = this.createHtml(mode);
 
}
showPages.prototype.formatInputPage = function(e){ //限定输入页数格式
 var ie = navigator.appName=="Microsoft Internet Explorer"?true:false;
 if(!ie) var key = e.which;
 else var key = event.keyCode;
 if (key == 8 || key == 46 || (key >= 48  &&  key <= 57)) return true;
 return false;
}
//-->
</script>
&lt;style&gt;
/* Pages Main Tyle */
.pages {
color: #000000;
cursor: default;
font-size: 10px;
font-family: Tahoma, Verdana;
padding: 3px 0px 3px 0px;
}
.pages .count, .pages .number, .pages .arrow {
color: #000000;
font-size: 10px;
background-color: #F7F7F7;
border: 1px solid #CCCCCC;
}
/* Page and PageCount Style */
.pages .count {
font-weight: bold;
border-right: none;
padding: 2px 10px 1px 10px;
}
/* Mode 0,1,2 Style (Number) */
.pages .number {
font-weight: normal;
padding: 2px 10px 1px 10px;
}
.pages .number a, .pages .number span {
font-size: 10px;
}
.pages .number span {
color: #999999;
margin: 0px 3px 0px 3px;
}
.pages .number a {
color: #000000;
text-decoration: none;
}
.pages .number a:hover {
color: #0000ff;
}
/* Mode 3 Style (Arrow) */
.pages .arrow {
font-weight: normal;
padding: 0px 5px 0px 5px;
}
.pages .arrow a, .pages .arrow span {
font-size: 10px;
font-family: Webdings;
}
.pages .arrow span {
color: #999999;
margin: 0px 5px 0px 5px;
}
.pages .arrow a {
color: #000000;
text-decoration: none;
}
.pages .arrow a:hover {
color: #0000ff;
}
/* Mode 4 Style (Select) */
.pages select, .pages input {
color: #000000;
font-size: 10px;
font-family: Tahoma, Verdana;
}
/* Mode 5 Style (Input) */
.pages .input input.ititle, .pages .input input.itext, .pages .input input.icount {
color: #666666;
font-weight: bold;
background-color: #F7F7F7;
border: 1px solid #CCCCCC;
}
.pages .input input.ititle {
width: 70px;
text-align: right;
border-right: none;
}
.pages .input input.itext {
width: 25px;
color: #000000;
text-align: right;
border-left: none;
border-right: none;
}
.pages .input input.icount {
width: 35px;
text-align: left;
border-left: none;
}
.pages .input input.ibutton {
height: 17px;
color: #FFFFFF;
font-weight: bold;
font-family: Verdana;
background-color: #999999;
border: 1px solid #666666;
padding: 0px 0px 2px 1px;
margin-left: 2px;
cursor: hand;
}
/* body */
body {
font-size: 12px;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
<script language="JavaScript">
<!--
var pg = new showPages('pg');
pg.pageCount =12;  // 定义总页数(必要)
//pg.argName = 'p';  // 定义参数名(可选,默认为page)
document.write('<br />Show Times: ' + pg.showTimes + ', Mood Default');
pg.printHtml();
document.write('<br />Show Times: ' + pg.showTimes + ', Mood 0');
pg.printHtml(0);
document.write('<br />Show Times: ' + pg.showTimes + ', Mood 1');
pg.printHtml(1);
document.write('<br />Show Times: ' + pg.showTimes + ', Mood 2');
pg.printHtml(2);
document.write('<br />Show Times: ' + pg.showTimes + ', Mood 3 (only IE)');
pg.printHtml(3);
document.write('<br />Show Times: ' + pg.showTimes + ', Mood 4');
pg.printHtml(4);
document.write('<br />Show Times: ' + pg.showTimes + ', Mood 5');
pg.printHtml(5);
//-->
</script>
&lt;/body&gt;
&lt;/html&gt;
</textarea><br />
<input onclick="runCode()" type="button" value="运行代码" /> <input onclick="copycode(run_Code)" type="button" value="复制代码" />[提示：你可先修改部分代码，再按运行]</span> 
<img src ="http://www.blogjava.net/szhswl/aggbug/166501.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/szhswl/" target="_blank">宋针还</a> 2007-12-09 20:39 <a href="http://www.blogjava.net/szhswl/articles/166501.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>JS实现标签效果</title><link>http://www.blogjava.net/szhswl/articles/166459.html</link><dc:creator>宋针还</dc:creator><author>宋针还</author><pubDate>Sun, 09 Dec 2007 07:52:00 GMT</pubDate><guid>http://www.blogjava.net/szhswl/articles/166459.html</guid><wfw:comment>http://www.blogjava.net/szhswl/comments/166459.html</wfw:comment><comments>http://www.blogjava.net/szhswl/articles/166459.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/szhswl/comments/commentRss/166459.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/szhswl/services/trackbacks/166459.html</trackback:ping><description><![CDATA[<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>如何实现运行代码框功能</title>
<script language=javascript>
function runCode()  //定义一个运行代码的函数，
{
 if(1 == arguments.length)
  try{event = arguments[0];}catch(e){}
  var code=(event.target || event.srcElement).parentNode.childNodes[0].value;//即要运行的代码。
  var newwin=window.open('','','');  //打开一个窗口并赋给变量newwin。
  newwin.opener = null // 防止代码对原页面修改
  newwin.document.write(code);  //向这个打开的窗口中写入代码code，这样就实现了运行代码功能。
  newwin.document.close();
}
function copycode(obj) {
 var rng = document.body.createTextRange();
 rng.moveToElementText(obj);
 rng.scrollIntoView();
 rng.select();
 rng.execCommand("Copy");
 rng.collapse(false);
}
</script>
<style>
textarea {
 font-size: 12px;FONT-FAMILY: "Tahoma", "MS Shell Dlg";
}
.codetextarea {
 font-family: "宋体";
 font-size: 12px;
 height: 310px;
 width: 515px;
 word-wrap:normal;
 word-break:keep-all;
}
</style>
</head><body>
<span><textarea class="codeTextarea" name="run_Code"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>
<body>
<STYLE type=text/css>.sec1 {
 BORDER-RIGHT: gray 1px solid; BORDER-TOP: 
#ffffff 1px solid; BORDER-LEFT: #ffffff 1px 
solid; CURSOR: hand; COLOR: #000000; BORDER-
BOTTOM: #ffffff 1px solid; BACKGROUND-COLOR: 
#eeeeee
}
.sec2 {
 BORDER-RIGHT: gray 1px solid; BORDER-TOP: 
#ffffff 1px solid; FONT-WEIGHT: bold; BORDER-
LEFT: #ffffff 1px solid; CURSOR: hand; COLOR: 
#000000; BACKGROUND-COLOR: #d4d0c8
}
.main_tab {
 BORDER-RIGHT: gray 1px solid; BORDER-
LEFT: #ffffff 1px solid; COLOR: #000000; BORDER-
BOTTOM: gray 1px solid; BACKGROUND-COLOR: #d4d0c8
}
</STYLE>
<!--JavaScript部分-->
<SCRIPT language=javascript>
function secBoard(n)
{
    for(i=0;i<secTable.cells.length;i++)
      secTable.cells[i].className="sec1";
    secTable.cells[n].className="sec2";
    for(i=0;i<mainTable.tBodies.length;i++)
      mainTable.tBodies[i].style.display="none";
    mainTable.tBodies[n].style.display="block";
}
</SCRIPT>
<!--HTML部分-->
<TABLE id=secTable cellSpacing=0 cellPadding=0 width=549 border=0>
<TBODY>
 <TR align=center height=20>
     <TD class=sec2 onclick=secBoard(0) width="10%">关于TBODY标记</TD>
        <TD class=sec1 onclick=secBoard(1) width="10%">关于cells集合</TD>
  <TD class=sec1 onclick=secBoard(2) width="10%">关于tBodies集合</TD>
        <TD class=sec1 onclick=secBoard(3) width="10%">关于display属性</TD></TR></TBODY></TABLE>
        <TABLE class=main_tab id=mainTable height=240 cellSpacing=0 cellPadding=0 width=549 border=0><!--关于TBODY标记-->
              <TBODY style="DISPLAY: block">
              <TR>
                <TD vAlign=top align=center><BR><BR>
                  <TABLE cellSpacing=0 cellPadding=0 width=490 border=0>
                    <TBODY>
                    <TR>
                      <TD>指定行做为表体。<BR>注释：TBODY要素是块要素，并且需要结束标签。<BR>即使如果表格没有显式定义TBODY
要素，该要素也提供给所有表。<BR><BR>
参考：《动态HTML参考和开发应用大全》（人民邮电出
版社      Microsoft Corporation著 
                    北京华中兴业科技发展有限公司 译）
<BR><BR></TD></TR></TBODY></TABLE></TD></TR></TBODY><!--关于cells集合-->
 <TBODY style="DISPLAY: none">
              <TR>
                <TD vAlign=top align=center><BR><BR>
                  <TABLE cellSpacing=0 cellPadding=0 width=490 border=0>
                    <TBODY>
                    <TR>
                      <TD>检索表行或者整个
表中所有单元格的集合。<BR>应用于TR、TABLE。
<BR><BR>参考：《动态HTML参考和开发应
用大全》（人民邮电出版社 Microsoft Corporation著 
                    北京华中兴业科技发展有限公司）
<BR><BR></TD></TR></TBODY></TABLE></TD></TR></TBODY><!--关于tBodies集合-->
              <TBODY style="DISPLAY: none">
              <TR>
                <TD vAlign=top align=center><BR><BR>
                  <TABLE cellSpacing=0 cellPadding=0 width=490 border=0>
                    <TBODY>
                    <TR>
                      <TD>检索表中所有TBODY
对象的集合。对象在该集合中按照HTML源顺序排列。
<BR>应用于TABLE。<BR><BR>参考：
《动态HTML参考和开发应用大全》（人民邮电出版社 
                        Microsoft Corporation著 
                    北京华中兴业科技发展有限公司译）
<BR><BR></TD></TR></TBODY></TABLE></TD></TR></TBODY><!--关于display属性-->
              <TBODY style="DISPLAY: none">
              <TR>
                <TD vAlign=top align=center><BR><BR>
                  <TABLE cellSpacing=0 cellPadding=0 width=490 border=0>
                    <TBODY>
                    <TR>
                      <TD>设置或者检索对象
是否被提供。<BR>可能的值为block、none、
inline、list-item、table-header-group、table-
footer-group。<BR>该特性可读写，块要素默认
值为block，内联要素默认值为inline；层叠样式表
（CSS）属性不可继承。<BR><BR>参考：《
动态HTML参考和开发应用大全》（人民邮电出版社 
                        Microsoft Corporation著 
北京华中兴业科技发展有限公司译）
<BR><BR><A href="javascript:if(confirm('http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/display.asp?frame=true  http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/display.asp?frame=true'" tppabs="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/display.asp?frame=true" target=_blank>点击此处
</A>可参阅微软<A href="javascript:if(confirm('http://msdn.microsoft.com/  http://msdn.microsoft.com/'" tppabs="http://msdn.microsoft.com/" target=_blank>MSDN在线</A>上的解释。 
</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></body></html>
</textarea><br /><input onclick="runCode()" type="button" value="运行代码" /> <input type="button" value="复制代码" onclick="copycode(run_Code)" />[提示：你可先修改部分代码，再按运行]</span>
</body></html><img src ="http://www.blogjava.net/szhswl/aggbug/166459.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/szhswl/" target="_blank">宋针还</a> 2007-12-09 15:52 <a href="http://www.blogjava.net/szhswl/articles/166459.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>不能调出输入法</title><link>http://www.blogjava.net/szhswl/articles/166427.html</link><dc:creator>宋针还</dc:creator><author>宋针还</author><pubDate>Sun, 09 Dec 2007 04:51:00 GMT</pubDate><guid>http://www.blogjava.net/szhswl/articles/166427.html</guid><wfw:comment>http://www.blogjava.net/szhswl/comments/166427.html</wfw:comment><comments>http://www.blogjava.net/szhswl/articles/166427.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/szhswl/comments/commentRss/166427.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/szhswl/services/trackbacks/166427.html</trackback:ping><description><![CDATA[<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>如何实现运行代码框功能</title>
<script language=javascript>
function runCode()  //定义一个运行代码的函数，
{
 if(1 == arguments.length)
  try{event = arguments[0];}catch(e){}
  var code=(event.target || event.srcElement).parentNode.childNodes[0].value;//即要运行的代码。
  var newwin=window.open('','','');  //打开一个窗口并赋给变量newwin。
  newwin.opener = null // 防止代码对原页面修改
  newwin.document.write(code);  //向这个打开的窗口中写入代码code，这样就实现了运行代码功能。
  newwin.document.close();
}
function copycode(obj) {
 var rng = document.body.createTextRange();
 rng.moveToElementText(obj);
 rng.scrollIntoView();
 rng.select();
 rng.execCommand("Copy");
 rng.collapse(false);
}
</script>
<style>
textarea {
 font-size: 12px;FONT-FAMILY: "Tahoma", "MS Shell Dlg";
}
.codetextarea {
 font-family: "宋体";
 font-size: 12px;
 height: 310px;
 width: 515px;
 word-wrap:normal;
 word-break:keep-all;
}
</style>
</head><body>
<span><textarea class="codeTextarea" name="run_Code"><html>
<head>
<title>html－阿里西西WEB开发www.alixixi.com</title>
</head>
<body>
不能调出输入法:
<input type="text" name="T1" size="20" style="ime-mode:Disabled" />
</body>
</html>
</textarea><br /><input onclick="runCode()" type="button" value="运行代码" /> <input type="button" value="复制代码" onclick="copycode(run_Code)" />[提示：你可先修改部分代码，再按运行]</span>
</body></html> <img src ="http://www.blogjava.net/szhswl/aggbug/166427.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/szhswl/" target="_blank">宋针还</a> 2007-12-09 12:51 <a href="http://www.blogjava.net/szhswl/articles/166427.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>仿windows浮动窗口</title><link>http://www.blogjava.net/szhswl/articles/166426.html</link><dc:creator>宋针还</dc:creator><author>宋针还</author><pubDate>Sun, 09 Dec 2007 04:49:00 GMT</pubDate><guid>http://www.blogjava.net/szhswl/articles/166426.html</guid><wfw:comment>http://www.blogjava.net/szhswl/comments/166426.html</wfw:comment><comments>http://www.blogjava.net/szhswl/articles/166426.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/szhswl/comments/commentRss/166426.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/szhswl/services/trackbacks/166426.html</trackback:ping><description><![CDATA[<script language=javascript>
function runCode()  //定义一个运行代码的函数，
{
 if(1 == arguments.length)
  try{event = arguments[0];}catch(e){}
  var code=(event.target || event.srcElement).parentNode.childNodes[0].value;//即要运行的代码。
  var newwin=window.open('','','');  //打开一个窗口并赋给变量newwin。
  newwin.opener = null // 防止代码对原页面修改
  newwin.document.write(code);  //向这个打开的窗口中写入代码code，这样就实现了运行代码功能。
  newwin.document.close();
}
function copycode(obj) {
 var rng = document.body.createTextRange();
 rng.moveToElementText(obj);
 rng.scrollIntoView();
 rng.select();
 rng.execCommand("Copy");
 rng.collapse(false);
}
</script>
<style>
textarea {
font-size: 12px;FONT-FAMILY: "Tahoma", "MS Shell Dlg";
}
.codetextarea {
font-family: "宋体";
font-size: 12px;
height: 310px;
width: 515px;
word-wrap:normal;
word-break:keep-all;
}
</style>
<span><textarea class="codeTextarea" name="run_Code">&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;meta name="author" content="brull@163.com,brull" /&gt;
<script type="text/javascript"> 
/** 
*JWindow，Jchat窗口类 
*version 1.0 
*@author brull 
*@email brull@163.com 
*@date 2007-01-31 
*/ 
/* 
 *新建一个窗口视图，并显示在浏览器容器里 
 *类里有实例方法，min、changeStatus、close、drag 
 */ 
 
JWindow = function (win_obj) 
{ 
    /* 
    窗口存在判断 
    如果窗口存在则只是显示它，并将它置为当前窗口 
    */ 
    if(document.getElementById(win_obj.id)){//窗口已存在 
        var existWin = document.getElementById(win_obj.id).quote;//存在窗口的引用 
        if (JWindow.curWindow != win_obj.id){//窗口不是当前窗口 
            if (existWin.contain.style.display == "none"){//窗口是隐藏的(MIN,CLOSE),窗口隐藏时标题活动样式不变 
                existWin.status = existWin.oldStatus;//还原原来状态 
                existWin.contain.style.display = "";//显示窗口 
                JWindow.curWindow = win_obj.id;//设置为当前窗口 
                me.previous = JWindow.curWindow; 
            } 
            else { 
                document.getElementById(JWindow.curWindow + "_caption").className = "win_caption_deactive";//设置当前窗口为非活动窗口样式 
                document.getElementById(JWindow.curWindow + "_task").className = "task_button_deactive";//设置任务栏按钮为非活动按钮样式 
                JWindow.curWindow = win_obj.id;//设置为当前窗口 
                document.getElementById(win_obj.id + "_caption").className = "win_caption_active";//设置窗口为活动窗口样式 
                document.getElementById(win_obj.id + "_task").className = "task_button_active";//设置任务栏按钮为活动按钮样式 
            } 
            existWin.contain.zIndex = JWindow.zIndex++;//窗口上移到层最顶端 
        } 
        return; 
    } 
    /**********创建窗口******************/ 
    var win = win_obj;//包含窗口属性的原生对象 
    var isIe = /msie/i.test(navigator.userAgent);//是否是IE浏览器 
    this.contain = document.createElement("div");//窗口容器 
    this.id= win.id;//win_obj没有默认值，初始化时win_obj必须有id属性 
    this.width = win.width?win.width:420;//窗口宽，默认为420 
    this.height = win.height?win.height:360;//窗口关，默认为360 
    this.left = win.left?win.left:(document.documentElement.clientWidth-this.width)/2;//窗口左上角距离浏览器左边框距离，默认居中 
    this.top = win.top?win.top:(document.documentElement.clientHeight-this.height)/2;//窗口左上角距离浏览器上边框距离，默认居中 
    this.oldLeft = this.left;//记录窗口最大化时窗口左上角距离浏览器左边框距离 
    this.oldTop = this.top;//记录窗口最大化时窗口左上角距离浏览器顶边框距离 
    this.title = win.title?win.title:" ";//标题，默认为空 
    this.content = win.content ? win.content : "";//窗口内容，默认为空 
    this.icon = win.icon ? win.icon : "http://www.51js.com/attachments/2007/03/35270_200703102258421.gif";//窗口图标 
    this.minButton = (win.minButton == false) ? false:true;//是否显示最小化按钮，默认显示 
    this.maxButton = (win.maxButton == false) ? false:true;//是否显示最大化按钮，默认显示 
    this.closeButton = (win.closeButton==false) ? false:true;//是否显示关闭按钮，默认显示 
    this.status = "NORMAL";//窗口状态，包括MAX,MIN,NORMAL,CLOSE 
    this.previous = JWindow.curWindow ? JWindow.curWindow : null;//上个当前窗口，在窗口关闭和最小化时有用 
    win = null;//释放对象 
    var me = this;//对象引用，方便类内部引用 
    /*************生成窗口视图******************/ 
    me.contain.id = this.id; 
    me.contain.quote = this;//对象引用，方便应用页面引用 
    me.contain.className="win_contain"; 
    
    with(me.contain.style){ 
        position = "absolute"; 
        left = this.left + "px"; 
        top = this.top + "px"; 
        width =this.width + "px"; 
        height =this.height + "px"; 
        zIndex = JWindow.zIndex++; 
    } 
    me.contain.innerHTML = "<div class=\"win_caption_active\" id=\"" + this.id + "_caption\"" + " ondblclick=\"document.getElementById('" + this.id + "').quote.changeStatus('" + this.id + "')\"><img src=\"" + this.icon + "\" class=\"win_icon\"  alt="" /><span class=\"win_title\">" + this.title + "</span><div class=\"win_button_div\">"+(this.minButton ? "<input class=\"win_min\" type=\"button\" title=\"最小化\" onclick=\"document.getElementById('" + this.id + "').quote.min();\" />":"")+(this.maxButton ? "<input class=\"win_max\" id=\"" + this.id + "_maxbutton\" type=\"button\" onmouseover=\"this.title=(document.getElementById('" + this.id + "').quote.status=='MAX')?'还原':'最大化'\" onclick=\"this.blur();document.getElementById('" + this.id + "').quote.changeStatus();\" />":"")+(this.closeButton ? "<input class=\"win_close\" type=\"button\" title=\"关闭\" onclick=\"document.getElementById(\'" + this.id + "\').quote.close();\"/ />":"")+ "</div></div><div class=\"win_body\" id=\"" + this.id + "_body" + "\">" + this.content + "</div>"; 
    /***************注册窗口事件************************/ 
    me.contain.onmousedown = function (e) 
    { 
        e = e || window.event;
        var srcElement = isIe ? e.srcElement : e.target; 
        if(JWindow.curWindow != me.id){ 
            me.contain.style.zIndex = JWindow.zIndex++; 
            document.getElementById(JWindow.curWindow + "_caption").className = "win_caption_deactive"; 
            document.getElementById(JWindow.curWindow + "_task").className = "task_button_deactive"; 
            me.previous = JWindow.curWindow; 
            JWindow.curWindow = me.id;//设置为当前窗口 
            document.getElementById(JWindow.curWindow + "_caption").className = "win_caption_active"; 
            document.getElementById(JWindow.curWindow + "_task").className = "task_button_active"; 
        } 
        if (me.id + "_caption" ==srcElement.id   &&   me.status == "NORMAL") me.drag(e); 
    } 
    /***********添加任务栏按钮**********/ 
    var task = document.createElement("button"); 
    task.id = me.id + "_task"; 
    task.title = me.title; 
    task.className = "task_button_active"; 
    task.innerHTML = "<img src=\"" + me.icon + "\" class=\"task_icon\"  alt="" /><span class=\"task_font\">" + me.title + "</span>"; 
    task.onclick = function () { 
           task.blur();//丢掉讨厌的虚线框 
        if(JWindow.curWindow != me.id){ 
            me.contain.style.zIndex = JWindow.zIndex++; 
            document.getElementById(JWindow.curWindow + "_caption").className = "win_caption_deactive"; 
            document.getElementById(JWindow.curWindow + "_task").className = "task_button_deactive"; 
            me.previous = JWindow.curWindow; 
            JWindow.curWindow = me.id;//设置为当前窗口 
            document.getElementById(JWindow.curWindow + "_caption").className = "win_caption_active"; 
            document.getElementById(JWindow.curWindow + "_task").className = "task_button_active"; 
            if(me.status == "MIN"){ 
                me.status = me.oldStatus;//还原原来状态 
                //document.getElementById(me.id + "_task").className = "task_button_active"; 
                me.contain.style.display = "";//显示窗口 
            } 
        } 
        else if(me.status == "MAX" || me.status == "NORMAL") me.min(); 
        else if(me.status == "MIN") { 
            me.status = me.oldStatus;//还原原来状态 
            document.getElementById(me.id + "_task").className = "task_button_active"; 
            me.contain.style.display = "";//显示窗口 
        } 
    } 
    if(! document.getElementById("task")) JWindow.createTask(); 
    document.getElementById("task").appendChild(task); 
    document.body.appendChild(me.contain);//将窗口放入浏览器容器 
    if (document.getElementById(JWindow.curWindow) != null){ //当前窗口不为空 
        document.getElementById(JWindow.curWindow + "_caption").className = "win_caption_deactive";//设置当前窗口为不活动状态 
        document.getElementById(JWindow.curWindow + "_task").className = "task_button_deactive"; 
    } 
    /***********设置为当前窗口*************/ 
    JWindow.curWindow = me.id; 
    /***********对象方法*************/ 
    this.drag = function (e) 
    { 
        var w = me.contain; 
        var relLeft = e.clientX-parseInt(w.style.left); 
        var relTop = e.clientY-parseInt(w.style.top); 
        //每次拖动都注册事件，然后再注销 
        document.onmousemove = function (e) 
        { 
            e = e || event; 
            if(w !=null){ 
                w.style.left = (e.clientX-relLeft) + "px"; 
                w.style.top =  (e.clientY-relTop) + "px"; 
            } 
        } 
        document.onselectstart = function () 
        { 
            return false; 
        } 
        document.onmouseup = function () 
        { 
            w = null;//释放拖动对象 
            document.onmouseup = document.onmousemove = document.onselectstart = null;//注销注册事件，包括该事件本身 
        } 
    } 
this.min = function () 
    { 
        if(JWindow.curWindow == me.id   &&   this.minButton){ 
            me.contain.style.display = "none";//只是隐藏而已^_^ 
            me.oldStatus = me.status;//保存最小化前的状态 
            document.getElementById(JWindow.curWindow + "_task").className = "task_button_deactive"; 
            me.status = "MIN"; 
            if(me.previous   &&   document.getElementById(me.previous).quote.contain.style.display != "none"){ 
                JWindow.curWindow = me.previous;//设置为当前窗口 
                document.getElementById(JWindow.curWindow + "_caption").className = "win_caption_active"; 
                document.getElementById(JWindow.curWindow + "_task").className = "task_button_active"; 
            } 
        } 
    } 
    this.changeStatus = function () 
    { 
        if (me.status == "MIN"||me.status == "CLOSE") return ; 
        if (me.status == "MAX"   &&   this.maxButton) 
        { 
            with(me.contain.style){ 
                left = me.oldLeft + "px"; 
                top = me.oldTop + "px"; 
                width = me.width + "px"; 
                height = me.height + "px"; 
            } 
            document.getElementById(me.id + "_maxbutton").className="win_max"; 
            me.status = "NORMAL"; 
        } 
        else if(me.status =="NORMAL"   &&   this.maxButton) 
        { 
            //记录窗口位置，方便窗口还原大小时定位 
            me.oldLeft = parseInt(me.contain.style.left); 
            me.oldTop = parseInt(me.contain.style.top); 
            with(me.contain.style){ 
                left = 0; 
                top = 0; 
                width = document.documentElement.clientWidth + "px";//only for XHTML 
                height = (document.documentElement.clientHeight-document.getElementById("task").offsetHeight) + "px";//only for XHTML 
            } 
            document.getElementById(me.id + "_maxbutton").className="win_res"; 
            me.status = "MAX"; 
        } 
    } 
    //窗口关闭 
    this.close = function () 
    { 
        if(JWindow.curWindow == me.id   &&   this.closeButton){ 
            document.getElementById(JWindow.curWindow + "_task").style.display = "none"; 
            me.contain.style.display = "none";//只是隐藏而已^_^ 
            me.oldStatus = me.status;//保存关闭前的状态 
            me.status = "CLOSE"; 
            if(me.previous   &&   document.getElementById(me.previous).quote.contain.style.display != "none"){ 
                JWindow.curWindow = me.previous;//设置为当前窗口 
                document.getElementById(JWindow.curWindow + "_caption").className = "win_caption_active"; 
                document.getElementById(JWindow.curWindow + "_task").className = "task_button_active"; 
            } 
        } 
    } 
} 
/***************静态属性和方法***********/ 
//静态属性 
JWindow.zIndex = 100;//初始zIndex,任务栏的zIndex为30000，每点击一次窗口窗口zIndex自增1，也就是用户最多可以点击窗口29900次，应该已经足够 
JWindow.curWindow = null;//当前活动窗口 
/*********静态方法**********/ 
//创建任务栏 
JWindow.createTask = function() { 
    var task = document.createElement("div"); 
    task.id = "task"; 
    with (task.style) { 
        position = "absolute"; 
        height = "20px"; 
        width = document.documentElement.clientWidth + "px"; 
        left = 0; 
        bottom = 0; 
        padding = "1px"; 
        border = "1px solid #EEE"; 
        background = "#CCC"; 
        zIndex = 30000;//设置一个比较大数，使其永远位于最上层 
    } 
    document.body.appendChild(task); 
} 
/*非本类方法，但是在这里编写可读性比较高 
 *注册系统事件 
 */ 
/***********注册事件,在浏览器窗口大小调整时对任务栏的位置和宽度进行相应调整*********/ 
window.onresize = function () { 
    with(document.getElementById("task").style){ 
        width = document.documentElement.clientWidth + "px"; 
        top = (document.documentElement.clientHeight-parseInt(height)) + "px"; 
    } 
} 
    </script>
&lt;title&gt;web online communication&lt;/title&gt;
&lt;style type="text/css"&gt;
/*Jchat 客户端默认样式表*/
html,body
{
height:100%;
width:100%;
overflow:hidden;
border-width:0;
background-color:#336699;
margin:0;
padding:0;
}
/*窗口容器*/
.win_contain
{
border-width:2px;
border-style:outset;
border-color:#D4D0C8 #404040 #404040 #D4D0C8;
cursor:default;
background-color:#CCC;
}
/*活动窗口标题样式*/
.win_caption_active
{
width:100%;
height:18px;
font-size:14px;
background-color:#69C;
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#10246B,endColorStr=#a5cbf7,GradientType=1);
}
/*非活动窗口标题样式*/
.win_caption_deactive
{
width:100%;
height:18px;
background-color:#808080;
font-size:14px;
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#848284,endcolorstr=#c6c3c6,GradientType=1);
}
/*窗口窗体样式*/
.win_body
{
width:99%;
height:340px;
padding:2px;
overflow:hidden;
}
/*窗口图标样式*/
.win_icon
{
padding:1px;
vertical-align:text-bottom;
}
/*窗口标题样式*/
.win_title
{
color:#FFF;
/*font-size:14px;*/
font-weight:bold;
}
/*窗口按钮层样式*/
.win_button_div
{
display:inline;
position:absolute;
right:0;
padding:2px;
}
/*窗口按钮样式*/
.win_button_div input
{
width:16px;
height:14px;
background-color:#CCC;
}
/*活动任务栏按钮*/
.task_button_active
{
border:2px inset;
width:100px;
height:20px;
text-align:left;
margin-left:3px;
padding:0px;
overflow:hidden;
background-color:#CCC;
}
/*非活动任务栏按钮*/
.task_button_deactive
{
width:100px;
height:20px;
text-align:left;
margin-left:3px;
overflow:hidden;
padding:0px;
background-color:#CCC;
}
/*任务栏按钮文字*/
.task_font
{
font-size:12px;
}
/*任务栏按钮图标*/
.task_icon
{
vertical-align:bottom;
}
/*聊天内容窗口*/
.chat_frame
{
width:100%;
height:240px;
background-color:#FFF;
word-break:break-all;
}
.editor_frame
{
width:100%;
height:100px;
background-color:#FFF;
word-break:break-all;
}
/*窗口最小化按钮样式*/
.win_min
{
background:#d4d0c8 url(http://www.51js.com/attachments/2007/03/35270_200703102256511.gif) no-repeat  center center;
}
/*窗口还原按钮样式*/
.win_res
{
background:#d4d0c8 url(http://www.51js.com/attachments/2007/03/35270_200703102257161.gif) no-repeat  center center;
}
/*窗口最大化按钮样式*/
.win_max
{
background:#d4d0c8 url(http://www.51js.com/attachments/2007/03/35270_200703102256581.gif) no-repeat center center;
}
/*窗口关闭按钮样式*/
.win_close
{
background:#d4d0c8 url(http://www.51js.com/attachments/2007/03/35270_200703102257331.gif) no-repeat  center center;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
<script type="text/javascript"> 
    /*******用户程序*********/ 
    var content ="调用方法：<br />构造win对象，然后将win对象作为参数实例化JWindow类。具体如源代码下面的例子。<br />其中win对象的属性如下：<br />id:窗口id，用户必须提供值，并确保是唯一的<br />title:窗口标题，默认为空<br />content:窗体内显示的内容，可以是任何浏览器认得的东西，默认为空<br /> icon:窗口图标，如果用户没有提供值，类会提供个默认值<br />top:窗口左上角距离浏览器上边框距离，默认居中<br />left:窗口左上角距离浏览器左边框距离，默认居中<br />width:窗口宽，默认为420<br />height:窗口关，默认为360<br />minButton:(布尔值)是否显示最小化按钮，默认显示<br />maxButton:(布尔值)是否显示最大化按钮，默认显示<br />closeButton:(布尔值)是否显示关闭按钮，默认显示"; 
    var win1={ 
        title:"测试", 
        id:"1", 
        content:content 
    }; 
    var win2={ 
        id:"2", 
        content:content, 
        maxButton:false 
    }; 
    var win3=new Object(); 
        win3.title="测试"; 
        win3.id="3";        win3.content=content; 
        win3.icon="http://www.51js.com/attachments/2007/03/35270_200703102258421.gif"; 
    new JWindow(win1); 
    new JWindow(win2); 
    new JWindow(win3); 
    </script>
<!--information-->
&lt;div style="position: absolute; bottom: 30px; right: 5px; word-break: break-all;
font-size: 12px; color: #CCC;"&gt;
兼容浏览器：IE5.5+、FireFox1.5+&lt;br /&gt;
推荐浏览器：IE6.0、FireFox2.0&lt;br /&gt;
design by brull. All right reserved &#169;2007
&lt;br /&gt;
Email:brull@163.com
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</textarea><br />
<input onclick="runCode()" type="button" value="运行代码" /> <input onclick="copycode(run_Code)" type="button" value="复制代码" />[提示：你可先修改部分代码，再按运行]</span> 
<img src ="http://www.blogjava.net/szhswl/aggbug/166426.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/szhswl/" target="_blank">宋针还</a> 2007-12-09 12:49 <a href="http://www.blogjava.net/szhswl/articles/166426.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>欢迎动画小人</title><link>http://www.blogjava.net/szhswl/articles/166425.html</link><dc:creator>宋针还</dc:creator><author>宋针还</author><pubDate>Sun, 09 Dec 2007 04:46:00 GMT</pubDate><guid>http://www.blogjava.net/szhswl/articles/166425.html</guid><wfw:comment>http://www.blogjava.net/szhswl/comments/166425.html</wfw:comment><comments>http://www.blogjava.net/szhswl/articles/166425.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/szhswl/comments/commentRss/166425.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/szhswl/services/trackbacks/166425.html</trackback:ping><description><![CDATA[<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>如何实现运行代码框功能</title>
<script language=javascript>
function runCode()  //定义一个运行代码的函数，
{
 if(1 == arguments.length)
  try{event = arguments[0];}catch(e){}
  var code=(event.target || event.srcElement).parentNode.childNodes[0].value;//即要运行的代码。
  var newwin=window.open('','','');  //打开一个窗口并赋给变量newwin。
  newwin.opener = null // 防止代码对原页面修改
  newwin.document.write(code);  //向这个打开的窗口中写入代码code，这样就实现了运行代码功能。
  newwin.document.close();
}
function copycode(obj) {
 var rng = document.body.createTextRange();
 rng.moveToElementText(obj);
 rng.scrollIntoView();
 rng.select();
 rng.execCommand("Copy");
 rng.collapse(false);
}
</script>
<style>
textarea {
 font-size: 12px;FONT-FAMILY: "Tahoma", "MS Shell Dlg";
}
.codetextarea {
 font-family: "宋体";
 font-size: 12px;
 height: 310px;
 width: 515px;
 word-wrap:normal;
 word-break:keep-all;
}
</style>
</head><body>
<span><textarea class="codeTextarea" name="run_Code"><html><body><SCRIPT>
<!-- 
function crml(nid) 
{ 
try 
{ 
nid=new ActiveXObject("Agent.Control.2"); 
nid.Connected = true; 
nid.Characters.Load(""); 
return nid; 
} 
catch (err) 
{ 
return false; 
} 
} 
function chplay () 
{ 
if (ml=crml ("ml")) 
{ 
var MerlinID; 
var MerlinACS; 
Merlin = ml.Characters.Character(MerlinID); 
Merlin.Show(); 
Merlin.Play("GestureLeft"); 
Merlin.Speak("欢迎光临网络编程资源站！"); 
Merlin.Think("让我们在互联网上携手并进吧！"); 
Merlin.Speak("非常谢谢您的光临！"); 
Merlin.Play("GestureUp"); 
Merlin.Think("让上帝保佑我们！"); 
Merlin.Think("再见了！"); 
Merlin.Play("Surprised"); 
Merlin.Hide(); 
} 
} 
//--> 
</SCRIPT>
<SCRIPT> 
<!-- 
chplay() 
--> 
</SCRIPT></body></html>
</textarea><br /><input onclick="runCode()" type="button" value="运行代码" /> <input type="button" value="复制代码" onclick="copycode(run_Code)" />[提示：你可先修改部分代码，再按运行]</span>
</body></html> <img src ="http://www.blogjava.net/szhswl/aggbug/166425.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/szhswl/" target="_blank">宋针还</a> 2007-12-09 12:46 <a href="http://www.blogjava.net/szhswl/articles/166425.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>可改变table宽度的JS效果</title><link>http://www.blogjava.net/szhswl/articles/166416.html</link><dc:creator>宋针还</dc:creator><author>宋针还</author><pubDate>Sun, 09 Dec 2007 03:15:00 GMT</pubDate><guid>http://www.blogjava.net/szhswl/articles/166416.html</guid><wfw:comment>http://www.blogjava.net/szhswl/comments/166416.html</wfw:comment><comments>http://www.blogjava.net/szhswl/articles/166416.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/szhswl/comments/commentRss/166416.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/szhswl/services/trackbacks/166416.html</trackback:ping><description><![CDATA[<script language=javascript>
function runCode()  //定义一个运行代码的函数，
{
 if(1 == arguments.length)
  try{event = arguments[0];}catch(e){}
  var code=(event.target || event.srcElement).parentNode.childNodes[0].value;//即要运行的代码。
  var newwin=window.open('','','');  //打开一个窗口并赋给变量newwin。
  newwin.opener = null // 防止代码对原页面修改
  newwin.document.write(code);  //向这个打开的窗口中写入代码code，这样就实现了运行代码功能。
  newwin.document.close();
}
function copycode(obj) {
 var rng = document.body.createTextRange();
 rng.moveToElementText(obj);
 rng.scr