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

 
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","<b>Special Item #"+i+"</b>",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,"<h1><img src="./dynapiexamples/images/eicon3.gif">Main Item #1</h1>");
lb2.addItem(null,"<h2><font color="red">Main Item #2</font></h2>");
lb2.addItem(null,"<h3><font color="blue">Next Item #3</font></h3>");
lb2.addItem(null,"<h4>Main Item #4</h4>");
lb2.addItem(null,"Small Item #5");
lb2.addItem(null,"<p><font color="maroon">This is a test<br>Message for all to <br>see</font></p>");
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><br>
<a href="javascript:;" onclick="showCheck(lb1)">Show/Hide CheckMode to ListBox #1</a><br>
<a href="javascript:;" onclick="showCheck(lb2)">Show/Hide CheckMode to ListBox #2</a><br>
<script>
  dynapi.document.insertAllChildren();
</script>
</BODY>
</HTML>


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


List in Layer

 
<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>
<br>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>
<br>Set Mode: <a href="#" onClick="list.setSelectionMode(true)">Multi</a>, <a href="#" onClick="list.setSelectionMode(false)">Single</a>
<br><a href="#" onClick="list.add("New Item","new item value",false)">Add new list item</a>
<br><a href="#" onClick="list.remove(list.selectedItem)">Remove selected item</a>
<br>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>
<br>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>
<p>Get Selected:
<br><a href="#" onClick="alert("Selected Index: "+list.getSelectedIndex())">Index</a>
<br><a href="#" onClick="alert("Selected Item: "+list.getSelectedItem())">Item</a>
<br><a href="#" onClick="alert("Selected Indexes: "+list.getSelectedIndexes())">Indexes (Multi only)</a>

</body>
</html>


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

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