JavaScript DHTML/GUI Components/Dual List

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

Dual List in JavaScript

   <source lang="html4strict">

<html> <head> <title>DynAPI Examples - HTML 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("TemplateManager"); dynapi.library.include("HTMLListbox"); dynapi.library.include("HTMLButton"); </script> <script language="Javascript"> var o={ 

 mng:"Mangos",
 car:"Carrots",
 plu:"Plums",
 apl:"Apples",
 prs:"Pears",
 org:"Oranges",
 grp:"Grapes",
 pep:"Pepper"

};

var t = "This is the Template:
<form>
Select fruits or vegetables:
{@lst1}{@btn1}
{@btn2}		{@lst2} 
{@btn3} 
</form>
";

var tp = new Template(t,100,100,300,200,"#EEEEEE"); tp.addChild(new HTMLListbox(null,o),"lst1"); tp.lst1.setMultiSelect(true); tp.lst1.addEventListener({ 

 onchange:function(e){
   var o=e.getSource();
   status = o.getSelected();
 }

}); tp.addChild(new HTMLListbox(null),"lst2"); tp.lst2.addItem("Melons","mel"); tp.addChild(new HTMLButton(null," > "),"btn1"); tp.addChild(new HTMLButton(null," < "),"btn2"); //" tp.addChild(new HTMLButton(null,"Sort List"),"btn3"); tp.btn1.lstSrc = tp.lst1; tp.btn1.lstTar = tp.lst2; tp.btn2.lstSrc = tp.lst2; tp.btn2.lstTar = tp.lst1; var evt = { 

 onclick:function(e){
   var itm,o=e.getSource();
   var v=o.lstSrc.getSelected();
   if(v) {
     if(typeof(v)=="string") v=[v];
     for(var i=0;i<v.length;i++){
       itm = o.lstSrc.getItem(v[i]);
       if(itm) o.lstTar.addItem(itm.text,itm.value);
       o.lstSrc.removeItem(v[i]);
     }
   }
 }

} tp.btn1.addEventListener(evt); tp.btn2.addEventListener(evt); tp.btn3.onclick=function(e){ 

 tp.lst2.sortBy("text",false);

}; dynapi.document.addChild(tp); </script> </head> <body> <script> 

 dynapi.document.insertAllChildren();

</script> </body> </html> 

      </source>

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

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