版权声明:原创作品,允许转载,转载时请务必以超链接形式标明文章原始出版、作者信息和本声明。否则将追究法律责任。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 -->