[orginal] nice look ListBox with powerful methodes designing & implementation based on web technology.

introduction :

Designing a good interface isn't easy. Users demand software that is well-behaved, good-looking, and easy to use. Your clients or managers demand originality and a short time to market. Your UI technology -- Web applications, desktop software, even mobile devices -- may give you the tools you need, but little guidance on how to use them well. today i just want to explain how to create the most common used control in the collection of user interface controls which is to say list Box. we try to bounded it from three aspects , the fist is make it looking nice that is to say the css aspect , the second is make it running in dynamically way that is to say js , finally we consider the invoking scope mean html.

physically : list Box is straightforward ,in html we see it as UL each element is list box is LI that is all , the problem with listBox is not the style but the operations like SelectedIndex, sort,selectedItem,removeByIndex,RemoveByValue ....ect, how to implement all these operations basing on web.

CSS:

the style for list box is straightforward as i said above ,

/* ul: listbox item */
.listbox
{
    width:300px;
    height:500px;
    overflow:auto;
    font-family: 宋体;
    font-size:12px;
    color:black;
    cursor:default;
    margin:0px;
    border: 2px #6D7073 groove;
    position:absolute;

}

/* li: listbox ITem*/
.listBoxItem
{

    margin:1px 0px 0px 3px;
    display:block;
    font-family: 宋体;
    font-size: 12px;
    color:black;
    cursor:default;
    list-style-type:none;
    padding: 3px 0px 0px 0px ;

}

/*when mouse moveover the items list*/
.listBoxItem:hover
{
background-image:url('images/BGline.png');
background-repeat:repeat-x;
}

JS:

in js code we just want to implement the most common properties that is to say ( width,height,left,top...) , the margin property is needed for layout , mean locate the list box in the position we want. here is also the buffer for all element that will be store in the list box , the best way to perform operations like sorting ,selection is to store all in array . finally we consider the private and public methods for the js class .

   var ObjectName=ListBoxName;
      var ItemIndex=-1;// when we add new item it increase.
      var Selectedindex=-1; // the selected index temp. mean what is the index   selected now
      var selectedItem=""; // the selected item current.
      var LastSelectedIndex=-1;
      var buffer=new Array(10000);// buffer for the listiem
      var width;
      var height;
      var marginLeft;
      var marginTop;

layout:

we say the OOP programming style here , set and get functions that is to perform the properties of list box. in js as you will see the class keyword is not exists , the function can be class .

here in the code you will see how to control the list box properties during running time , the functions below are for reset the left,top width, and height .

this.setMarginLeft=function(value)
    {
      marginLeft=value;
      document.getElementById(ListBoxName).style.marginLeft=value;
    }
    this.getMarginLeft=function(){return marginLeft;}

    this.setMarginTop=function(value)
    {
      marginTop=value;
      document.getElementById(ListBoxName).style.marginTop=value;
    }
    this.getMarginTop=function(){return marginTop;}

    this.setWidth=function(value)
    {
     width=value;
     document.getElementById(ListBoxName).style.width=value;
    }

     this.setHeight=function(value)
    {
     height=value;
     document.getElementById(ListBoxName).style.height=value;
    }

     this.getWidth=function(){return width;}
     this.getHeight=function(){return height;}

addnew()

the most important functions for list box is how to add new element , in this function consider that each element has css style , has it's own identifier , has it's own events , and position index, consider also that when we add new element the preexist elements will still after the add new operations is performed .

// add new item to list box
    this.addNewItem=function(value)
    {

        ItemIndex=ItemIndex+1;
        buffer[ItemIndex]=value;
        var NewItemString="<li id="+ObjectName+"Listitem"+ItemIndex+" class=listBoxItem "+
        " onclick="+ObjectName+".SelectedIndex(this);"+ObjectName+".SelectedItem(this);>"+value+"</li>";
        var listBoxOldElemtns=document.getElementById(ListBoxName).innerHTML;
        var newListboxItem=listBoxOldElemtns+NewItemString;
        document.getElementById(ListBoxName).innerHTML=newListboxItem;

   }

select index operation:

how to get the index of element that you select currently ? that is no problem it depend on the element name , each elelemnt name consist of three parts

1- the html tag name

2- the js object name

3- the index

the best way for given name for element is to split the three parts by underscore (_) , here the code perform one way if the list box items are under 10

this.SelectedIndex=function(elThis)
    {

      try
      {
       var name=elThis.id;
       // get the index.
       Selectedindex=name.charAt((name.length)-1);
       // change the background
       elThis.style.backgroundImage="url('images/BGline.png')";
       elThis.style.backgroundRepeat='repeat-x';
       // last Selected index.
       if(LastSelectedIndex!=-1)
       {
          var LastItemSelectedName=ObjectName+"Listitem"+LastSelectedIndex;
          document.getElementById(LastItemSelectedName).style.backgroundImage="url('images/BGline.png')";
          document.getElementById(LastItemSelectedName).style.backgroundRepeat='no-repeat';
       }
       LastSelectedIndex=Selectedindex;
       }
       catch(e)
       {
        alert(e);
       }
       return Selectedindex;

  }

select item :

an easy to get the selected item , becoze the index is in our hand .

this.SelectedItem=function (elThis)
   {
       var Item=elThis.innerHTML;
       return Item;
   }

get item():

this.getItem=function(index)
    {
      var re="";
      if(index>-1 && index<=ItemIndex)
      {
        var name=ObjectName+"Listitem"+index;
        re=document.getElemetById(name).innerHTML;
      }
     else
     {
       alert('Out Of Rang Index');
     }
      return re;
    }

remove()

to remove an element from list box , that is mean to remove especial part of html code , how to get the correct piece of code that i want to remove , if get thinking like this you are smart but you need tight matching algorithm to complete this operation.

here is straight way to remove an element with no need for the matching algorithm , the thinking is very easy

1- first save all elements in the buffer array other that the one we need to remove ,

2-second clear the html code ,

3- finally invoke the add new item.

but this way has long complex time consider that you have an 100000 elements how to do ?

so the matching algorithm is the best for extract the piece of code that contain the element we want to remove .

this.removeItemByValue=function(value)
   {
     var indexTemp=ItemIndex;
     // clear all.
     if(this.getIndex(value)>=0)
     {
       var index=this.getIndex(value);
       SwapElements(index,indexTemp);// move the index elemtent to last.
       document.getElementById(ListBoxName).innerHTML="";//clear all
       ItemIndex=-1;
       for(var i=0;i<indexTemp;i++)
       {
       this.addNewItem(buffer[i]);
       }
     }
     else
     {
      alert("not found value..");
     }
   }

remove by index :

this.removeItemByIndex=function(index)
   {
     var indexTemp=ItemIndex;
     ItemIndex=-1;// clear all.
     if(index>=0 && index<=indexTemp)
     {
        SwapElements(index,indexTemp);// move the index elemtent to last.
        document.getElementById(ListBoxName).innerHTML="";//clear all
         for(var i=0;i<indexTemp;i++)
         {
          this.addNewItem(buffer[i]);
         }

     }
     else
     {
      alert("out of range

");
}
}

here is the total code for js :

.");
      }
    }


     // the length of the list.
     this.length=function(){return ItemIndex+1;}

    //sort the element of listbox
    this.Sort=function()
    {
      buffer.sort();
      for(var x=0;x<=ItemIndex;x++)
       {
        this.setItem(x,buffer[x]);
       }
    }

    // search for value.
    // return 0=false not found.
    // return1= true found
    this.find=function(value)
    {
      var re=0;
      for(var x=0;x<=ItemIndex;x++)
      {
       if(buffer[x]==value)
       {
         re=1;
         break;
       }
      }
      return re;
    }

    // -1 is the error, the value not found
    this.getIndex=function(value)
    {
      var re=-1;//not found
      for(var x=0;x<=ItemIndex;x++)
      {
       if(buffer[x]==value)
       {
         re=x;
         break;
       }
      }
      return re;
    }

  // function

   function SwapElements(from,to)
   {
       var temp=buffer[to];
        buffer[to]=buffer[from];
        buffer[from]=temp;
   }


   this.removeItemByIndex=function(index)
   {
     var indexTemp=ItemIndex;
     ItemIndex=-1;// clear all.
     if(index>=0 && index<=indexTemp)
     {
        SwapElements(index,indexTemp);// move the index elemtent to last.
        document.getElementById(ListBoxName).innerHTML="";//clear all
         for(var i=0;i<indexTemp;i++)
         {
          this.addNewItem(buffer[i]);
         }

     }
     else
     {
      alert("out of range

");
     }
   }


   this.removeItemByValue=function(value)
   {
     var indexTemp=ItemIndex;
     // clear all.
     if(this.getIndex(value)>=0)
     {
       var index=this.getIndex(value);
       SwapElements(index,indexTemp);// move the index elemtent to last.
       document.getElementById(ListBoxName).innerHTML="";//clear all
       ItemIndex=-1;
       for(var i=0;i<indexTemp;i++)
       {
       this.addNewItem(buffer[i]);
       }
     }
     else
     {
      alert("not found value..");
     }
   }

}// end of calss

how to create the list box that support all these operations :

three steps are needed to create the list box :
1- add the headers file css ,js to html

like this:

2- add the html tag:

here we create two list boxes named as listbox0,listbox1

as you see below the class refer to css style name ,id is for js.

3- add the js objects: in the body tag of html

html total code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<link rel="stylesheet" type="text/css" href="listBox.css"/>
<script language="javascript" type="text/javascript" src="listBox.js"></script>
</head>

<body>

<a href="#" style="left: 1000px;" onclick="listbox0.removeItemByValue('aa');">removeVlaue</a>    
<a href="#" style="left: 2000px;" onclick="listbox0.removeItemByIndex(0);">removeIndex</a>

<div style="900px;height:500px;border: 1px red solid;">

<ul id="listbox0" class="listbox"></ul>
<ul id="listbox1" class="listbox"></ul>

</div>

<script language="javascript" type="text/javascript">

    var listbox0=new ListBox('listbox0');
    listbox0.setWidth(140);
    listbox0.setHeight(190);
    listbox0.setMarginLeft(600);
    listbox0.setMarginTop(400);
    listbox0.addNewItem('aa');
    listbox0.addNewItem('a');
    listbox0.addNewItem('aaaa');
    listbox0.addNewItem('aaa');
    listbox0.Sort();


    var listbox1=new ListBox('listbox1');
    listbox1.setWidth(140);
    listbox1.setHeight(190);
    listbox1.setMarginLeft(listbox0.getMarginLeft()+listbox0.getWidth()+5);
    listbox1.setMarginTop(listbox0.getMarginTop());
    listbox1.addNewItem('aaaaaaaaaaa');
    listbox1.addNewItem('aaaa');
    listbox1.addNewItem('aaaa');
    listbox1.addNewItem('aaaaaaa');
    listbox1.Sort();

</script>

</body>

</html>

result :

that is all .