Ajax使用 prototype.js 3

這裡是一個簡單的範例

在使用prototype.js可以很方便的利用DOM的特性來做一些事情

下一篇將會利用ajax來實做這個範例


<style type="text/css">
<!--
.ta {
border-top : 1px solid #6699cc; /*上框線*/
border-bottom : 1px solid #6699cc; /*下框線*/
border-left : 1px solid #6699cc; /*左框線*/
/*border-right : 1px solid #6699cc;*/ /*右框線*/
width : 100px;
float:left;
}
.tb {
border-top : 1px solid #6699cc; /*上框線*/
border-bottom : 1px solid #6699cc; /*下框線*/
/*border-left : 1px solid #6699cc;*/ /*左框線*/
border-right : 1px solid #6699cc; /*右框線*/
/*float:right;*/
}
-->
</style>
<script language="javascript" src="prototype.js"></script>
<script language="javascript">
var count = 5;
function removeMe(data)
{
//利用prototype.js的remove功能把元件移除
$("div_"+data).remove();
}

//利用prototype.js的remove功能把元件insert


function add()
{
count ++;
$("all").insert("<div id=\"div_"+count+"\" ><div class=\"ta\">第"+count+"項</div><div  class=\"tb\"><button onclick=\"removeMe('"+count+"');void(0);\">移除</button></div></div>");
}

</script>
<button onclick="add();">新增</button>
<div id="all" style="border:1px; border-color: #ffffff">
<div id="div_1" ><div class="ta">第一項</div><div class="tb"><button onclick="removeMe('1');void(0);">移除</button></div></div>
<div id="div_2" ><div class="ta">第2項</div><div class="tb"><button onclick="removeMe('2');void(0);">移除</button></div></div>
<div id="div_3" ><div class="ta">第三項</div><div class="tb"><button onclick="removeMe('3');void(0);">移除</button></div></div>
<div id="div_4" ><div class="ta">第4項</div><div class="tb"><button onclick="removeMe('4');void(0);">移除</button></div></div>
<div id="div_5" ><div class="ta">第五項</div><div class="tb"><button onclick="removeMe('5');void(0);">移除</button></div></div>
</div>

註:

這裡有一個中文的prototype.js 1.5版的說明文件

由JustinLiu翻譯

原始出處如以下網址

http://www.sergiopereira.com/articles/prototype.js.html
https://compdoc2cn.dev.java.net/prototype/html/prototype.js.cn.html

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

*