Skip to content

标签:Ajax

DOM示例3

    之前学习DOM的时候写的示例,已经发现了两个,现在把第三个也发布出来吧。主要是增加了鼠标操作,可以在DIV标签点击进行编辑。

 

[html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> DOMDocument 对象示例3 </TITLE>

<STYLE type="text/css">

<!–

.JobFlow {

width: 102px;

position: relative;

background-color: #00CCFF;

padding: 1px;

float: left;

}

.JobStep {

background-color: #00FF99;

height: 100px;

width: 100px;

margin: 1px;

}

.EditDiv {

cursor: hand;

background-color: #00CCFF;

width: 100%;

height: 20;

}

.EditText {

width: 100px;

height: 18;

}

–>

</STYLE>

<SCRIPT language="javascript">

<!–

// XML 原形

var str = "<?xml version=’1.0′?><TS>" +

"<TT><TD>Kend</TD><TD>Programmer</TD></TT>" +

"<TT><TD>小明</TD><TD>技术员</TD></TT></TS>";

// 创建DOM对象并加载XML

var dom = new ActiveXObject("MSXML2.DOMDocument");

dom.loadXML(str);

// 获取DOM里顶层数据行数

var cols = dom.getElementsByTagName("TT").length;

// 动态产生表格并显示

function makeTable(){

var html = "";

// 获取DOM里顶层数据列表

var TTs = dom.getElementsByTagName("TT");

for (var i=0; i<TTs.length; i++)

{

// 获取DOM里第二层数据列表

var TDs = TTs.item(i).getElementsByTagName("TD");

html += "<div class=\"JobFlow\">";

html += "<div class=\"JobTitle\">Job_" + i + "</div>";

for (var j=0; j<TDs.length; j++)

{

html += "<div class=\"JobStep\">" +

"<div class=\"EditDiv\" OnClick=\"editText(" + i + "," + j + ", this);\">" + TDs[j].text + "</div>" +

// "<input size=’10’ type=’text’ onChange=’saveValue(" + i + "," + j + ", this.value);’ value=’" + TDs[j].text + "’ />" +

"<BR />ROW:" + i + "|COL" + j +

"|<a href=’JavaScript:insertAt(" + i + "," + j + ");’>Ins</a></div>";

}

html += "<div><a href=’JavaScript:insertAt(" + i + "," + j + ");’>Append</a></div>";

html += "</div>";

}

// 显示XML代码

document.getElementById("src").innerHTML = "<textarea style=’width:100%; height=100;’>" + dom.xml + "</textarea>";

// 显示HTML代码

document.getElementById("htmlsrc").innerHTML = "<textarea style=’width:100%; height=100;’>" + html + "</textarea>";

// 显示表格

document.getElementById("tt").innerHTML = html;

}

// 创建一个顶层数据

function makeCol() {

var TT = dom.createElement("TT");

var TD1 = dom.createElement("TD");

TD1.text = cols;

TT.appendChild(TD1);

return TT;

}

// 创建一个第二层数据

function makeNode() {

var TD = dom.createElement("TD");

TD.text = cols;

return TD;

}

// 创建一个顶层数据并加到表格最后

function appendCol() {

cols++;

var TS = dom.getElementsByTagName("TS").item(0);

TS.appendChild(makeCol());

makeTable();

}

// 创建一个顶层数据并插入到表格相应地方

function insertAt(x, y) {

cols++;

var TTs = dom.getElementsByTagName("TT");

var TT = TTs.item(x);

TT.insertBefore(makeNode(), TT.childNodes[y]);

makeTable();

}

// 处理编辑框Enter键和Escape键

function editKeyPress(e, x, y, edit){

if (e.keyCode == 13) { // Enter

saveValue(x, y, edit);

resetEdit(x, y, edit);

}

if (e.keyCode == 27) // Escape

resetEdit(x, y, edit);

}

// 保存表格上修改的数据

function saveValue(x, y, edit) {

if (x<0||y<0)

return;

var TTs = dom.getElementsByTagName("TT");

if (x>=TTs.length)

return;

if (y>=TTs.item(x).childNodes.length)

return;

TTs.item(x).childNodes[y].text = edit.value;

// 显示XML代码

document.getElementById("src").innerHTML = "<textarea style=’width:100%; height=100;’>" + dom.xml + "</textarea>";

}

// 重置div

function resetEdit(x, y, edit){

var tmpDiv = document.createElement("DIV");

tmpDiv.className = "EditDiv";

tmpDiv.onclick = "editText(" + x + "," + y + ", this);";

tmpDiv.innerHTML = edit.value;

edit.parentNode.outerHTML = tmpDiv.outerHTML;

}

// 动态编辑数据

function editText(x, y, div) {

if (x<0||y<0)

return;

var TTs = dom.getElementsByTagName("TT");

if (x>=TTs.length)

return;

if (y>=TTs.item(x).childNodes.length)

return;

var editBox = document.createElement("input");

editBox.type = "text";

editBox.className = "EditText";

editBox.value = TTs.item(x).childNodes[y].text;

editBox.onchange = "saveValue(" + x + ", " + y + ", this);";

editBox.onblur = "resetEdit(" + x + ", " + y + ", this);";

editBox.onkeypress = "editKeyPress(event, " + x + ", " + y + ", this);";

div.className = "";

div.onclick = "";

div.innerHTML = editBox.outerHTML;

div.childNodes[0].focus();

}

–>

</SCRIPT>

</HEAD>

<BODY>

<DIV style="height:30;">This page demo3 how to using DOMDocument</DIV>

<DIV style="height:30;">This demo for Job flow in an ERP project</DIV>

<TABLE border="1" align="center"><TR><TD>

<DIV id="tt" style="border:1; background-color:#00ccee;;">Dynamic Face</DIV>

</TD></TR></TABLE>

<DIV>XML Data</DIV>

<DIV id="src" style="width:100%;"></DIV>

<DIV>HTML source</DIV>

<DIV id="htmlsrc" style="width:100%;"></DIV>

<INPUT type="button" onClick="makeTable()" value="Make Table" /><INPUT type="button" onClick="appendCol()" value="Append Col" />

<INPUT name="textfield" type="text" id="textfield" onKeyPress="editKeyPress(event, 2, 3, this)">

</BODY>

</HTML>

[/html]

 

Leave a Comment

JavaScript,真的是不错的脚本!

    这段时间看的<<JavaScript高级编程>>已经接近尾声了。我以前也搞过网页(用ASP比较多,当时ASP很火),写过网页脚本(JavaScript和VBScript都有写,不过还是以JavaScript为主),都是基于IE下的开发。有时需求也比较特殊,也经常要上网找资料。不过这次看这本书也学到了不少的新知识,对JavaScript有了较全面的了解和认识。

    前面说的JavaScript特殊语法http://myvnet.com/?p=43在这本书后面也有提到,不过只是当作优化的一种方式简单说了一下。ayeah网友也给我说了一下这语法叫JSON,其实它是ECMAScript 3rd的一个子集。目的是创建一种利于人类阅读也利于计算机解释的语法。

[javascript]

// JSON语法与传统ECMAScript语法简单比较

// 创建数组

// ECMAScript

var array = new Array;

array = ["Kend", "http://MyvNet.com"];

// JSON

var array = [];

array = ["Kend", "http://MyvNet.com"];

// 创建对象

// ECMAScript

var objMyvNet = new Object;

objMyvNet.author = "Kend";

objMyvNet.url = "http://MyvNet.com";

objMyvNet.goHomePage = function() { top.location.href = this.url; };

// JSON

var objMyvNet = {

author: "Kend";

url: "http://MyvNet.com";

goHomePage: function() { top.location.href = this.url; };

};[/javascript]

  可以看到JSON语法比传统的语法直观多了,也节省了很多空间。.js文件少点,下载的速度就可以快点。

Leave a Comment

最近爱上看JavaScript了,呵呵

    可能是修改FCKeditor的原因吧, 在深入研究一些JavaScript后对它比较感兴趣. 最近也在看JavaScript的书,在 网上找了一本叫<<JavaScript高级编程>>(英文名:<<Professional JavaScript for Web Developers>>)的书. 结果看上瘾了, 发现电子书只有前六章, 竟然去书城买了一本书回来.

    个人觉得这本书不错, 讲得比较全面. 从语法到对象, 从定义对象到继承. 还讲到DOM(文档对象模型)/BOM(浏览器对象模型), 还有正则表达式和一些高级应用. 我现在才看到第5章.

  以前看到一些JavaScript的代码, 总看不惜语法, 像这样的代码:

[javascript]

var MyvNet = {

"Name": "Kend";

"URL": "http://MyvNet.com";

};[/javascript]

3 Comments

修改BLOG时学到的DOM2

  Ajax里也用到很多DOM技术,这里放另外一个DEMO,是公司里一个ERP项目要做的一个工序流程图要用的一点演示。

[javascript]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> DOMDocument 对象示例2 </TITLE>

<style type="text/css">

<!–

.JobFlow {

width: 102px;

position: relative;

// background-color: #00CCFF;

padding: 1px;

float: left;

}

.JobStep {

// background-color: #00FF99;

height: 100px;

width: 100px;

margin: 1px;

}

–>

</style>

<script language="javascript">

<!–

// XML 原形

var str = "<?xml version=’1.0′?><TS>" +

"<TT><TD>Kend</TD><TD>Programmer</TD></TT>" +

"<TT><TD>小明</TD><TD>技术员</TD></TT></TS>";

// 创建DOM对象并加载XML

var dom = new ActiveXObject("MSXML2.DOMDocument");

dom.loadXML(str);

// 获取DOM里顶层数据行数

var cols = dom.getElementsByTagName("TT").length;

// 动态产生表格并显示

function makeTable(){

var html = "";

// 获取DOM里顶层数据列表

var TTs = dom.getElementsByTagName("TT");

for (var i=0; i<TTs.length; i++)

{

// 获取DOM里第二层数据列表

var TDs = TTs.item(i).getElementsByTagName("TD");

html += "<div class=\"JobFlow\">";

for (var j=0; j<TDs.length; j++)

{

html += "<div class=\"JobStep\"><input size=’10’ type=’text’ onChange=’saveValue(" + i + "," + j + ", this.value);’ value=’" + TDs[j].text + "’ /><BR />ROW:" + i + "|COL" + j +

"|<a href=’JavaScript:insertAt(" + i + "," + j + ");’>Ins</a></div>";

}

html += "</div>";

}

// 显示XML代码

document.getElementById("src").innerHTML = "<textarea style=’width:100%; height=100;’>" + dom.xml + "</textarea>";

// 显示HTML代码

document.getElementById("htmlsrc").innerHTML = "<textarea style=’width:100%; height=100;’>" + html + "</textarea>";

// 显示表格

document.getElementById("tt").innerHTML = html;

}

// 创建一个顶层数据

function makeCol() {

var TT = dom.createElement("TT");

var TD1 = dom.createElement("TD");

TD1.text = cols;

TT.appendChild(TD1);

return TT;

}

// 创建一个第二层数据

function makeNode() {

var TD = dom.createElement("TD");

TD.text = cols;

return TD;

}

// 创建一个顶层数据并加到表格最后

function appendCol() {

cols++;

var TS = dom.getElementsByTagName("TS").item(0);

TS.appendChild(makeCol());

makeTable();

}

// 创建一个顶层数据并插入到表格相应地方

function insertAt(x, y) {

cols++;

var TTs = dom.getElementsByTagName("TT");

var TT = TTs.item(x);

TT.insertBefore(makeNode(), TT.childNodes[y]);

makeTable();

}

// 保存表格上修改的数据

function saveValue(x, y, value) {

if (x<0||y<0)

return;

var TTs = dom.getElementsByTagName("TT");

if (x>=TTs.length)

return;

if (y>=TTs.item(x).childNodes.length)

return;

TTs.item(x).childNodes[y].text = value;

// 显示XML代码

document.getElementById("src").innerHTML = "<textarea style=’width:100%; height=100;’>" + dom.xml + "</textarea>";

}

–>

</script>

</HEAD>

<BODY>

<div style="height:30;">This page demo2 how to using DOMDocument</div>

<div style="height:30;">This demo for Job flow in an ERP project</div>

<table border="1" align="center"><tr><td>

<div id="tt" style="border:1; background-color:#00ccee;;">Dynamic Face</div>

</td></tr></table>

<div>XML Data</div>

<div id="src" style="width:100%;"></div>

<div>HTML source</div>

<div id="htmlsrc" style="width:100%;"></div>

<input type="button" onClick="makeTable()" value="Make Table" /><input type="button" onClick="appendCol()" value="Append Col" />

</BODY>

</HTML>

[/javascript]

 

Leave a Comment

修改BLOG时学到的DOM

  这段时间一起在研究FCKeditor插件的开发,其中学到不少DOM(Document Object Model,文档对象模型)的技术。这里放一个DEMO代码,演示如何用DOM保存数据并在网页里动态显示。

   注明一下,这里的代码只支持IE,FF的兼容代码没写,懒嘛,嘿嘿。。

[javascript]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> DOMDocument 对象示例 </TITLE>

<script language="javascript">

<!–

// XML 原形

var str = "<?xml version=’1.0′?><TS>" +

"<TT><TD>Kend</TD><TD>Programmer</TD></TT>" +

"<TT><TD>张三</TD><TD>程序员</TD></TT>" +

"<TT><TD>李四</TD><TD>文员</TD></TT>" +

"<TT><TD>小明</TD><TD>技术员</TD></TT></TS>";

// 创建DOM对象并加载XML

var dom = new ActiveXObject("MSXML2.DOMDocument");

dom.loadXML(str);

// 获取DOM里顶层数据行数

var rows = dom.getElementsByTagName("TT").length;

// 动态产生表格并显示

function makeTable(){

var html = "<TABLE border=’1′>";

// 获取DOM里顶层数据列表

var TTs = dom.getElementsByTagName("TT");

for (var i=0; i<TTs.length; i++)

{

// 获取DOM里第二层数据列表

var TDs = TTs.item(i).getElementsByTagName("TD");

html += "<TR>";

for (var j=0; j<TDs.length; j++)

{

html += "<TD><input type=’text’ onChange=’saveValue(" + i + "," + j + ", this.value);’ value=’" + TDs[j].text + "’ />|ROW:" + i + "|COL" + j +

"|<a href=’JavaScript:insertAt(" + i + "," + j + ");’>Ins</a></TD>";

}

html += "</TR>";

}

html += "</TABLE>";

// 显示XML代码

document.getElementById("src").innerHTML = "<textarea style=’width:100%; height=100;’>" + dom.xml + "</textarea>";

// 显示表格

document.getElementById("tt").innerHTML = html;

}

// 创建一个顶层数据

function makeRow() {

var TT = dom.createElement("TT");

var TD1 = dom.createElement("TD");

var TD2 = dom.createElement("TD");

TD1.text = rows + "-1";

TD2.text = rows + "-2";

TT.appendChild(TD1);

TT.appendChild(TD2);

return TT;

}

// 创建一个顶层数据并加到表格最后

function appendRow() {

rows++;

var TS = dom.getElementsByTagName("TS").item(0);

TS.appendChild(makeRow());

makeTable();

}

// 创建一个顶层数据并插入到表格相应地方

function insertAt(x, y) {

rows++;

var TS = dom.selectSingleNode("//TS");

TS.insertBefore(makeRow(), TS.childNodes[x]);

makeTable();

}

// 保存表格上修改的数据

function saveValue(x, y, value) {

if (x<0||y<0)

return;

var TTs = dom.getElementsByTagName("TT");

if (x>=TTs.length)

return;

if (y>=TTs.item(x).childNodes.length)

return;

TTs.item(x).childNodes[y].text = value;

// 显示XML代码

document.getElementById("src").innerHTML = "<textarea style=’width:100%; height=100;’>" + dom.xml + "</textarea>";

}

–>

</script>

</HEAD>

<BODY>

<div style="height:30;">This page demo how to using DOMDocument</div>

<div id="tt" style="border:1; background-color:#00ccee; width:100%; height:200;">Dynamic Face</div>

<div>XML Data</div>

<div id="src" style="width:100%;"></div>

<input type="button" onClick="makeTable()" value="Make Table" /><input type="button" onClick="appendRow()" value="Append Row" />

</BODY>

</HTML>

[/javascript]

 

Leave a Comment

Java学习

这几天在学Java,其实这语言我很早以前(大概Java刚出的时候,当时最火的是用Java写Applet,基本都是做一些烟火特效)学过它的语法、思想等,只是没有深入去研究它的一些框架、开发模式。

  这几天主要看了一些视频,包括JavaBean、Struts、Hibernate。其中涉及的JSP还没来得及看,不过以前刚出的时候也了解过一下,简单的Model1开发模式和ASP一样,在页面中嵌入代码,不同的是JSP使用Java语言,ASP使用VBScript。这次学习的目的是掌握JSP的Model2开发模式,即MVC开发模式。

  懒人没得救,呵呵,现在只掌握了一整个开发过程和一些知识要点。没有看看Struts、Hibernate的相关文档,秉承懒人习惯,实际使用查文档。

  今天也看了一下Ajax,这之前也了解过,看过一些框架,如:Dojo等,今天也看到了一个新的框架:Dorado,网上的评价比较高,特别是数据分离,可以实现数据式驱动。也打算日后开发的项目中使用它作表示层。

3 Comments