雪湖小札@blogjava

心情與技術文檔同行 http://hi.baidu.com/jingleq

BlogJava

管理

24 Posts :: 2 Stories :: 4 Comments :: 0 Trackbacks

常用鏈接

留言簿(4)

我參與的團隊

深圳Java俱樂部(0/0)

隨筆檔案(24)

文章檔案(2)

2007年6月 (2)

搜索

閱讀排行榜

評論排行榜

征服javascript(四)-舊標簽新屬性(頁面數據分離與數據轉化處理)

　　今天才發現原來html的基本標簽里面的屬性是可以由我們自己隨意添加的，而且通過DOM方式還能夠訪問到。這一功能可以做很多事情。
　　這里我做的就是數據分離，這是用好ajax的前提條件。實現中，通過在span標簽中添加上bindingData屬性和bindingPattern屬性來指明數據和數據轉化邏輯。通過javascript處理填入數據內容。
　　當然要處理javascript代碼，使用了jquery，jquery在操作DOM對象的時候帶來很大的便利。另外jquery在ajax與數據展示特效中都有出色的表現。后面會再有詳細說明。
　　整個程序如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ZH-CN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>HelloWorld</title>

// --- 基本數據區 ---

var dataMap = {"name":"0001","password":"123456"};

var userMap = {"0001":"jingle","0002":"chen"}

// --- end ---

// --- 基本數據格式轉換邏輯區 ---

function changeName(val) {

return userMap[val];

}

// --- end ---

// --- 數據綁定 ---

$(document).ready(function (){

$("span").each(function (i,n) {

if (n.bindingPattern != undefined || n.bindingPattern == "") {

try {

n.bindingPattern = n.bindingPattern.replace("[function]","");

// --- 調用處理方法 ---

//當然可以在這里加強，不止只有一個參數

n.innerHTML = eval(n.bindingPattern.replace("\{0\}","'" + dataMap[n.bindingData] + "'"));

} catch (e) {

alert(e);

}

} else {

n.innerHTML = dataMap[n.bindingData];

}

})

// --- end ---

</script>

</head>

<body>

<div id="head">HelloWOrld</div>

<hr/>

<tr>

</tr>

<tr>

</tr>

</table>

</div>

</body>

</html>

posted on 2007-06-13 08:17 csnowfox 閱讀(502) 評論(0) 編輯收藏

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理

雪湖小札@blogjava

常用鏈接

留言簿(4)

我參與的團隊

隨筆檔案(24)

文章檔案(2)

搜索

最新評論

閱讀排行榜

評論排行榜