List in Layer : List « Ajax Layer « JavaScript DHTML






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>

           
         
  








dynapi.zip( 791 k)

Related examples in the same category

1.ListBox control in Layer
2.ajax dynamic list