您現在的位置: 365建站網 > 365學習 > [orginal]Combolist visual design & and implementation (

[orginal]Combolist visual design & and implementation (

文章來源:365jz.com     點擊數:248    更新時間:2009-10-04 11:11   參與評論



Physical structure:

An easy to see that the combolist consist of three(body,head,list)main parts these parts are combine to complete the physical structure of the combolist control , in this article I will try to explain  an easy way how to create  combolist control  From Scratch , not nice look one only but also with straight main operations ,methods and properties .



 pic1

as you see above the pic1 contain the three parts are

1-body :the plot where the selected item is placed  

2-head: the plot that we can control the hiding and show the element list.

3-list: the plot that contain all combolist elements(items) 

logical structure of combolist :

we discuss the logical structure  from  three aspects(CSS,js,and HTML)

the css to control the style ( make nice  or the dress it up )

the css style is tracing the pic1  three parts.



/*div tag*/
.ComboList
{
    width
:200px;
    height
:400px;
    margin-left
:0px;
    margin-top
:0px;
    font-family
: 宋體;
    font-size
:12px;
    color
:black;
    cursor
:default;

}

/*span*/
.ComboList .headPar
{
    width
:17px;
    height
:21px;
    margin-left
:182px;
    position
:absolute;
    background-image
:url('images/combolist.png');
    background-repeat
:no-repeat;
    
}

/*input tag*/
.ComboList .bodyPart
{
    border-top
: 1px #3D7BAD solid;
    border-bottom
: 1px #B7D9ED solid;
    border-left
:1px #A4C9E3 solid;
    border-right
:1px #A4C9E3 solid;
    height
:17px;
    position
:absolute;
    width
:181px;
    font-family
: 宋體;
    font-size
:12px;
    color
:black;

}
/*ul*/
.ComboList .ListPart
{
    margin-top
:21px;
    margin-left
:0px;
    height
:auto;
    overflow
:auto;
    position
:absolute;
    width
:183px;
    border
: 1px #B7D9ED solid;
    border-top
:1px transparent solid;
    list-style-type
:none;
    display
:none;

}
/*li*/
.ListPart .ComboListItem
{
   display
:block;
   width
:inherit;
   height
:21px;
   padding
: 1px 0px 0px 3px;
   
   
}
/*when mouse move */
.ComboListItem:hover 
{
 background-image
:url('images/BGline.png');
 background-repeat
:repeat-x;

}


 


Java script aspects:

for js point of view we just consider the operation,methods and properties that the combolist have to contain, for example the selected index ,

selected item , add new item,remove item ,and high level operations like sorting of item.






//style nice looking when mouse move,ou,up/

 
function changeState( element ,height ,statNumber)
  {
      
//statNumber the number of state we want to show currently
      // elemnt is imageBackground for span
     /// 0: normal status,1 mouseMove status,2 mousepress status, 3 fucuse,4 disable ,5 no
     var top=height*statNumber;
      
// alert('100% -'+left+'px');
     document.getElementById(element).style.backgroundPosition='100% -'+top+'px';     
    
  }
  
  
function chageBorderColorWhenMouseMove(element)
  {
     document.getElementById(element).style.borderBottom
='1px #3D7BAD  solid';
     document.getElementById(element).style.borderRight
='1px #3D7BAD  solid';
     document.getElementById(element).style.borderLeft
='1px #3D7BAD  solid';

  }
   
   
function chageBorderColorWhenMouSEOut(element)
  {
     document.getElementById(element).style.borderBottom
='1px #B7D9ED solid';
     document.getElementById(element).style.borderRight
='1px #B7D9ED  solid';
     document.getElementById(element).style.borderLeft
='1px #B7D9ED  solid';
  }
  
function ShowComboList(element)
  {
    document.getElementById(element).style.display
='block';
  }
  
  
function HideComboList(element)
  {
    document.getElementById(element).style.display
='none';
  }




//----------------------selection and add new items


 
var ComboListItemIndex=-1;
 
var ComboListSelectedindex=-1;
 
var ComboListselectedItem="";
 
function ComboListAddNewListItem(ComboxListId)
 {
  
       ComboListItemIndex
=ComboListItemIndex+1;
       
var NewItemString="<li id=ComboListItem"+ComboListItemIndex+" class=ComboListItem onclick=ComboListSelectedIndex(this);ComboListSelectedItem(this);>item"+ComboListItemIndex+"</li>";
        
var listBoxOldElemtns=document.getElementById(ComboxListId).innerHTML;
       
var newListboxItem=listBoxOldElemtns+NewItemString;
       document.getElementById(ComboxListId).innerHTML
=newListboxItem;

 }
 
 
 
// return the  selected index of the combo list
 function ComboListSelectedIndex(elThis)
 {
      
       
var name=elThis.id;
       
// get the index.
       ComboListSelectedindex=name.charAt((name.length)-1);
       
return ComboListSelectedindex;
       
 }
 
 
function ComboListSelectedItem(elThis)
   {
       
var Item=elThis.innerHTML;
       document.getElementById(
'InputBody').value=Item;
       HideComboList(
'ListPart');
       
return Item;
   }


//
function ComboListGetItem(index)
   {
    
var re="";
    
if(index>-1 && index<=ComboListItemIndex)
    {
       
var name="ComboListItem"+index;
       re
=document.getElementById(name).innerHTML;
    }
    
else
    {
     alert(
'Out Of Rang Index');
    }
     
return re;
   }


// SET VALUE IN SPECIFIC INDEX POSITION
 function ComboListSetItem(index,value)
   {
    
    
if(index>-1 && index<=ComboListItemIndex)
    {
       
var name="ComboListItem"+index;
       document.getElementById(name).innerHTML
=value;
    }
    
else
    {
     alert(
'Out Of Rang Index');
    }
   }
   
   
// FUNCTION LENGTH;
   
   
//-1 for empty.
   function ComboListLength()
   {
     
return  ComboListItemIndex;
   }



 
 
 
 

 


sorting element of combolist :

whatever you used mean the sorting algorithm ,insertion sort,quicksort ,heapsort ,just invoke the combolist sort method like code below ,

here i used the array  bufferCombolist ,js provide sorting  function for array

function ComboListSort()
  {
      ComboListBuffer.sort();
    
for(var x=0;x<=ComboListLength();x++)
    {
      ComboListSetItem(x,ComboListBuffer[x]);
    }
  }


html aspect :

from html point of view we just think the combolist as below:






<!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="combolist.css"/>
<script language="JavaScript" type="text/javascript" src="combolist.js"></script>
</head>

<body>

   
<div class="ComboList">
       
<span id="HeaderSpan" class="headPar" onmousemove="changeState('HeaderSpan',21,1);chageBorderColorWhenMouseMove('InputBody');"  onmouseout="changeState('HeaderSpan',21,0);chageBorderColorWhenMouseOut('InputBody')"  onmousedown="changeState('HeaderSpan',21,2);ShowComboList('ListPart');"  onmouseup="changeState('HeaderSpan',21,1);"></span>
       
<input id="InputBody" class="bodyPart" value=""/>
         
<ul id="ListPart" class="ListPart">
          
        
</ul>
   
</div>

     
<href="#" onclick="ComboListAddNewListItem('ListPart');">add New Item </a>&nbsp;    
     
     
<href="#" onclick="ComboListGetItem('2');">get(i) </a>
     
     
&nbsp;
     
     
<href="#" onclick="ComboListSetItem('2','AMMAR');">set(i,value)</a>


</body>

</html>

 






Tag標簽: css,js,web,combolist

如對本文有疑問,請提交到交流論壇,廣大熱心網友會為你解答??! 點擊進入論壇


發表評論 (248人查看,0條評論)
請自覺遵守互聯網相關的政策法規,嚴禁發布色情、暴力、反動的言論。
用戶名: 驗證碼: 點擊我更換圖片
最新評論
------分隔線----------------------------
365建站网-快速批量建站_企业免费建站_智能建站软件系统_在线建站和seo工具
国产a级毛片| 太紧了夹得我的巴好爽| 黄色的网站| 性欧美德国极品极度另类| 极品上门女婿免费阅读全文| 日本女优名字| 波多野结衣av| 欧美人禽杂交av片| 朋友的妈妈2| 亚洲色图偷拍自拍| 未穿胸罩教室啪啪完整版| 茄子视频懂你更多| 风流岁月之活色生香完整版| 好大好硬好爽快点我要| a级毛片| 妈妈的朋友3| 欧美成人色图| 日本黄色| a片在线播放| 国产老头老太作爱视频| 正在播放酒店约少妇高潮| 亚洲老熟女性亚洲| 欧美禁忌乱偷在线观看| 黄色影片| http://www.paada.org