JavaScript DHTML/Ajax Layer/List

Материал из Web эксперт
Перейти к: навигация, поиск

ajax dynamic list

<A href="http://www.wbex.ru/Code/JavaScriptDownload/ajax-dynamic-list.zip">ajax-dynamic-list.zip( 17 k)</a>

1. <A href="/Code/JavaScript/Ajax-Layer/ListBoxcontrolinLayer.htm">ListBox control in Layer</a> <A href="/Code/JavaScript/Ajax-Layer/ListBoxcontrolinLayer.htm"></a> 2. <A href="/Code/JavaScript/Ajax-Layer/ListinLayer.htm">List in Layer</a> <A href="/Code/JavaScript/Ajax-Layer/ListinLayer.htm"></a>

ListBox control in Layer

   <source lang="html4strict">

http://dynapi.sourceforge.net/ GNU LESSER GENERAL PUBLIC LICENSE Version 2.1, February 1999 <html> <head> <title>DynAPI Examples - ListBox</title> <script language="JavaScript" src="./dynapisrc/dynapi.js"></script> <script language="Javascript"> 

 dynapi.library.setPath("./dynapisrc/");
 dynapi.library.include("dynapi.api");
 dynapi.library.include("ListBox");
 dynapi.library.include("ButtonFlatStyle"); // (optional)

</script> <script language="Javascript"> dynapi.document.writeStyle({ 

 firstline:"font-family:arial;font-weight:bold",
 specialline:"color:green;font-family:arial;font-weight:bold"

}) var lb1 = new ListBox(null,100,100,200,200); // change button up to use flat style // lb1.vscBar.btnUp.setStyle("ButtonFlat"); lb1.addItem("firstline","First Line",0) for(var i=1;i<=500;i++){ 

 if(parseInt(Math.random()*500)==i) lb1.addItem("specialline","Special Item #"+i+"",i);
 else lb1.addItem(null,"List Item #"+i,i);

} lb1.addItem("specialline","Last Line",0) lb1.addEventListener({ 

 onclick:function(e){
   var o=e.getSource();
   //o.removeItem(2)
 }

}); var lb2 = new ListBox(null,350,100,270,150); lb2.setItemHeight("auto"); lb2.setAltColors("#FFFFAA","#FFCC00");

lb2.addItem(null,"

<img src="./dynapiexamples/images/eicon3.gif">Main Item #1

"); lb2.addItem(null,"

Main Item #2

"); lb2.addItem(null,"

Next Item #3

"); lb2.addItem(null,"

Main Item #4

");

lb2.addItem(null,"Small Item #5");

lb2.addItem(null,"

This is a test
Message for all to
see

");

dynapi.document.addChild(lb1); dynapi.document.addChild(lb2); var cnt=0; function showCheck(lst){ 

 lst.b=!lst.b
 lst.setCheckMode(lst.b)

}; function add(lst){ 

 var d1=new Date;
 for(var i=0;i<10;i++){
   cnt++
   lst.addItem(null,"Item "+cnt)
 }
 var d2=new Date;
 status=d2-d1

} </script> </head> <body> <a href="javascript:;" onclick="add(lb2)">Add 10 items to ListBox #2</a>
<a href="javascript:;" onclick="showCheck(lb1)">Show/Hide CheckMode to ListBox #1</a>
<a href="javascript:;" onclick="showCheck(lb2)">Show/Hide CheckMode to ListBox #2</a>
<script> 

 dynapi.document.insertAllChildren();

</script> </BODY> </HTML> 


 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>


List in Layer

   <source lang="html4strict">

<html> <head> <title>DynAPI Examples - List</title> <script language="Javascript" src="./dynapisrc/dynapi.js"></script> <script language="Javascript"> dynapi.library.setPath("./dynapisrc/") dynapi.library.include("dynapi.api") dynapi.library.include("dynapi.gui.List") dynapi.library.include("dynapi.gui.NodeItem") </script> <script language="Javascript"> 

 list = new List();
 list.setX(350);
 list.setY(20);
 list.setLocation(350,20);
 list.setWidth(250);
 list.setBgColor("#FF0000");
 list.boldOnSelect(true);
 list.add("Item One",1);
 list.add("Item Two",2)
 list.add("Item Three",3);
 list.add("Item Four",4);
 dynapi.document.addChild(list);

</script> </head> <body bgcolor="#ffffff"> <script> 

   dynapi.document.insertAllChildren();

</script>
Set Width: <a href="#" onClick="list.setWidth(150)">150</a>, <a href="#" onClick="list.setWidth(250)">250</a>, <a href="#" onClick="list.setWidth(350)">350</a>
Set Mode: <a href="#" onClick="list.setSelectionMode(true)">Multi</a>, <a href="#" onClick="list.setSelectionMode(false)">Single</a>
<a href="#" onClick="list.add("New Item","new item value",false)">Add new list item</a>
<a href="#" onClick="list.remove(list.selectedItem)">Remove selected item</a>
Set Borders: <a href="#" onClick="list.setBorders(0)">0</a>, <a href="#" onClick="list.setBorders(1)">1</a>, <a href="#" onClick="list.setBorders(3)">3</a>
Set Spacing: <a href="#" onClick="list.setSpacing(0)">0</a>, <a href="#" onClick="list.setSpacing(1)">1</a>, <a href="#" onClick="list.setSpacing(3)">3</a>

Get Selected:
<a href="#" onClick="alert("Selected Index: "+list.getSelectedIndex())">Index</a>
<a href="#" onClick="alert("Selected Item: "+list.getSelectedItem())">Item</a>
<a href="#" onClick="alert("Selected Indexes: "+list.getSelectedIndexes())">Indexes (Multi only)</a> </body> </html> </source> <A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>

Источник — «http://www.wbex.ru/index.php?title=JavaScript_DHTML/Ajax_Layer/List&oldid=1699»