prototype测试

版权声明：原创作品，允许转载，转载时请务必以超链接形式标明文章原始出版、作者信息和本声明。否则将追究法律责任。http://blog.csdn.net/mayongzhan - 马永占,myz,mayongzhan

这个拖了很久...很忙...刚刚把prototype小看了一下.

试试了某篇的代码.

<!------------------------------------------------------------------------->

<!-- menu.html -->

test1.html $

test2.html $F

test3.html $A

test4.html $H

test5.html $R

test6.html Try.these()

test7.html Ajax.Request

test8.html Ajax.Request

test9.html Ajax.Updater

test10.html Ajax.Updater

test11.html 循环, Ruby样式的

test12.html Your arrays on steroids

test13.html Your arrays on steroids

<!------------------------------------------------------------------------->

<!-- test1.html -->

<script type="text/javascript" src="prototype1.5.1.1.js"></script>

<script>

function test1()

{

var d = $('myDiv');

alert(d.innerHTML);

}

function test2()

{

var divs = $('myDiv', 'myOtherDiv');

for(i=0; i<divs.length; i++)

{

alert(divs[i].innerHTML);

}

}

</script>

<div id="myDiv">

<p>This is a paragraph</p>

</div>

<div id="myOtherDiv">

<p>This is another paragraph</p>

</div>

<input type="button" value=Test1 οnclick="test1();" /><br />

<input type="button" value=Test2 οnclick="test2();" /><br />

<!------------------------------------------------------------------------->

<!-- test2.html -->

<script type="text/javascript" src="prototype1.5.1.1.js"></script>

<script>

function test3()

{

alert($F('userName'));

}

</script>

<input type="text" id="userName" value="Joe Doe" /><br />

<input type="button" value=Test3 οnclick="test3();" /><br />

<!------------------------------------------------------------------------->

<!-- test3.html -->

<script type="text/javascript" src="prototype1.5.1.1.js"></script>

<script>

function showOptions(){

var someNodeList = $('lstEmployees').getElementsByTagName('option');

var nodes = $A(someNodeList);

nodes.each(

function(node){

alert(node.nodeName + ': ' + node.innerHTML);

}

);

}

</script>

<select id="lstEmployees" size="10" >

<option value="5">Buchanan, Steven</option>

<option value="8">Callahan, Laura</option>

<option value="1">Davolio, Nancy</option>

</select>

<input type="button" value="Show the options" οnclick="showOptions();" />

<!------------------------------------------------------------------------->

<!-- test4.html -->

<script type="text/javascript" src="prototype1.5.1.1.js"></script>

<script>

function testHash()

{

//let's create the object

var a = {

first: 10,

second: 20,

third: 30

};

//now transform it into a hash

var h = $H(a);

alert(h.toQueryString()); //displays: first=10&second=20&third=30

}

testHash();

</script>

<!------------------------------------------------------------------------->

<!-- test5.html -->

<script type="text/javascript" src="prototype1.5.1.1.js"></script>

<script>

function demoDollar_R(){

var range = $R(10, 20, false);

range.each(

function(value, index){

alert(value);

}

);

}

</script>

<input type="button" value="Sample Count" οnclick="demoDollar_R();" >

<!------------------------------------------------------------------------->

<!-- test6.html -->

<script type="text/javascript" src="prototype1.5.1.1.js"></script>

<script>

function getXmlNodeValue(xmlNode)

{

return Try.these(

function()

{

return xmlNode.text;

},

function()

{

return xmlNode.textContent;

}

);

}

getXmlNodeValue();

</script>

<!------------------------------------------------------------------------->

<!-- test7.html -->

<script type="text/javascript" src="prototype1.5.1.1.js"></script>

<script>

function searchSales()

{

var empID = $F('lstEmployees');

var y = $F('lstYears');

var url = 'http://yoursever/app/get_sales';

var pars = 'empID=' + empID + '&year=' + y;

var myAjax = new Ajax.Request(

url,

{

method: 'get',

parameters: pars,

onComplete: showResponse

}

);

}

function showResponse(originalRequest)

{

//put returned XML in the textarea

$('result').value = originalRequest.responseText;

}

</script>

<select id="lstEmployees" size="10" οnchange="searchSales()">

<option value="5">Buchanan, Steven</option>

<option value="8">Callahan, Laura</option>

<option value="1">Davolio, Nancy</option>

</select>

<select id="lstYears" size="3" οnchange="searchSales()">

<option selected="selected" value="1996">1996</option>

<option value="1997">1997</option>

<option value="1998">1998</option>

</select>

<br><textarea id=result cols=60 rows=10></textarea>

<!------------------------------------------------------------------------->

<!-- test8.html -->

<script type="text/javascript" src="prototype1.5.1.1.js"></script>

<script>

var myGlobalHandlers = {

onCreate: function(){

Element.show('systemWorking');

},

onComplete: function() {

if(Ajax.activeRequestCount == 0){

Element.hide('systemWorking');

}

}

};

Ajax.Responders.register(myGlobalHandlers);

</script>

<div id='systemWorking'><img src='spinner.gif'>Loading...</div>

<!------------------------------------------------------------------------->

<!-- test9.html -->

<script type="text/javascript" src="prototype1.5.1.1.js"></script>

<script>

function getHTML()

{

var url = 'http://yourserver/app/getSomeHTML';

var pars = 'someParameter=ABC';

var myAjax = new Ajax.Updater(

'placeholder',

url,

{

method: 'get',

parameters: pars

}

);

}

</script>

<input type=button value=GetHtml οnclick="getHTML()" />

<div id="placeholder"></div>

<!------------------------------------------------------------------------->

<!-- test10.html -->

<script type="text/javascript" src="prototype1.5.1.1.js"></script>

<script>

function getHTML()

{

var url = 'http://yourserver/app/getSomeHTML'; var pars = 'someParameter=ABC';

var myAjax = new Ajax.Updater

(

{success: 'placeholder'},

url,

{

method: 'get',

parameters: pars,

onFailure: reportError

}

);

}

function reportError(request)

{

alert('Sorry. There was an error.');

}

</script>

<input type=button value=GetHtml οnclick="getHTML()">

<div id="placeholder"></div>

<!------------------------------------------------------------------------->

<!-- test11.html -->

<script type="text/javascript" src="prototype1.5.1.1.js"></script>

<script>

//function showList(){

//var simpsons = ['Homer', 'Marge', 'Lisa', 'Bart', 'Meg'];

//for(i=0;i<simpsons.length;i++){

//alert(simpsons[i]);

//}

//}

function showList(){

var simpsons = ['Homer', 'Marge', 'Lisa', 'Bart', 'Meg'];

simpsons.each( function(familyMember){

alert(familyMember);

});

}

</script>

<input type="button" value="Show List" οnclick="showList();" >

<!------------------------------------------------------------------------->

<!-- test12.html -->

<script type="text/javascript" src="prototype1.5.1.1.js"></script>

<script>

function findEmployeeById(emp_id){

var listBox = $('lstEmployees')

var options = listBox.getElementsByTagName('option');

options = $A(options);

var opt = options.find( function(employee){

return (employee.value == emp_id);

});

alert(opt.innerHTML); //displays the employee name

}

</script>

<select id="lstEmployees" size="10" >

<option value="5">Buchanan, Steven</option>

<option value="8">Callahan, Laura</option>

<option value="1">Davolio, Nancy</option>

</select>

<input type="button" value="Find Laura" οnclick="findEmployeeById(8);" >

<!------------------------------------------------------------------------->

<!-- test13.html -->

<script type="text/javascript" src="prototype1.5.1.1.js"></script>

<script>

function showLocalLinks(paragraph){

paragraph = $(paragraph);

var links = $A(paragraph.getElementsByTagName('a'));

//find links that do not start with 'http'

var localLinks = links.findAll( function(link){

var start = link.href.substring(0,4);

return start !='http';

});

//now the link texts

var texts = localLinks.pluck('innerHTML');

//get them in a single string

var result = texts.inspect();

alert(result);

}

</script>

<p id="someText">

This <a href="?text=text">text</a> has

a <a href="#localAnchor">lot</a> of

<a href="#otherAnchor">links</a>. Some are

<a href="?external=external">external</a>

and some are <a href="#someAnchor">local</a>

</p>

<input type=button value="Find Local Links" οnclick="showLocalLinks('someText')">

<!-- END -->