Ngồi cà y 2 tiếng má»›i ra được cái nà y. Hix. Cà y JS quả là gian khổ. Mình giá»›i thiệu wa 1 chút nhé. Cái của mình dùng table+iframe để thay cho listbox. Có thể dùng chuá»™t chá»n phần tá», có thể dùng bà n phÃm. PhÆ°Æ¡ng thức AddItem dùng thêm 1 phần tá» và o danh sách. Hiện nó má»›i chỉ là bản sÆ¡ khai nên gần nhÆ° chÆ°a có gì-Khi gõ chÆ°a tìm được từ-vẫn Ä‘ang dùng sá»± kiện onload để khởi tạo các biến(cái nà y sau nà y sẽ dùng contructor của combobox để là m), khi bấm phÃm mÅ©i tên để chá»n thì vẫn chÆ°a cuá»™n đến phần tỠđược chá»n(cái nà y khá Ä‘Æ¡n giản-chỉ cần tÃnh toán tá»a Ä‘á»™ 1 chút rùi scroll thôi).mình là m sÆ¡ qua xem bạn nà o có hứng thì tham gia. Mục tiêu của mình khá lá»›n:
1. Tạo 1 đối tượng( lấy tên comboboxWeb chẳng hạn ^^!
2. Trong bá»™ khởi dá»±ng của nó sẽ nháºn id của textbox sẽ dùng là m cobombox. Và dụ ta có 1 textbox có id="test" thì khi muốn biến nó thà nh combobox thì chỉ cần dùng lệnh
var bien=new comboboxWeb("test"). rồi sau đấy AddItem và o thôi-cái nà y hoà n toà n không khó, nếu ai đã nắm vững JS thì chỉ và i dòng là xong.
3. Danh sách hiện ra(cái listbox ấy) sẽ có khả năng phân tầng, hiển thị có cấu trúc(có css, có thể thêm checkbox và o...).
Tạm thá»i là thế. bác nà o thÃch thì và o chém tý nhé. nâng cao tay nghá» chút ^^.
@duyhung: ông khởi xÆ°á»›ng vụ nà y nên và o chém tÃch cá»±c và o nhé. t biết ông giá»i mấy cái nà y lắm mà .
đây là source code ban đầu các bác xem thá»-ko hiểu sao ko chạy trên IE nhÆ°ng trên FF thì ngon:
|
|
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#thuty {
position:absolute;
width:133px;
height:301px;
z-index:1;
background-color: #FFFFFF;
visibility:visible;
left: 21px;
top: 133px;
}
.br {
font-weight: bold;
color: #FF0000;
}
.kole{
margin:0px;
}
-->
</style>
</head>
<script language="javascript">
function getAbsX(obj)
{
var leftOffset = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
leftOffset += obj.offsetLeft;
obj = obj.offsetParent;
}
}
else if (obj.x)
{
leftOffset = obj.x;
}
return leftOffset;
}
function getAbsY(obj)
{
var topOffset = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
topOffset += obj.offsetTop;
obj = obj.offsetParent;
}
}
else if (obj.y)
{
topOffset = obj.y;
}
return topOffset;
}
</script>
<body bgcolor="#00CCCC" onload="begin()">
<form id="frm" name="frm" method="post" action="">
<div align="center">
<p>Gõ và o đây:
<input name="a" type="text" id="a" onkeydown="return changeSlt(event)" autocomplete="off" onkeyup="showWord(this,event)" onblur="if(hd)div.style.visibility='hidden';" size="65"/>
<label></label>
<label>
<input name="c" type="text" id="c"/>
</label>
</p>
<p align="left" id="text">
<label></label>
<label>
</label>
</p>
<p align="left" id="asdf"> </p>
</div>
</form>
<script type="text/javascript">
var div,rowIndex=-1,txtCtrl,hd
var tbl
var docFrame;
function begin()
{
docFrame=document.getElementById("hangve").contentDocument;
//if(docFrame==null)
// docFrame=document.getElementById("hangve").contentWindow.document
tbl=docFrame.getElementById("tbl")
div=document.getElementById("thuty")
docFrame.write('<body style="margin:0;padding:0"><table onmousemove="parent.changeColor(document.elementFromPoint(event.clientX,event.clientY).parentNode)" onclick="parent.txtCtrl.value=document.elementFromPoint(event.clientX,event.clientY).innerHTML;parent.txtCtrl.focus();parent.div.style.visibility=\'hidden\';" onmouseover="hd=false"onmouseout="hd=true" width="100%"cellspacing="0" id="tbl" cellpadding="0" style="border: thin solid #000000;cursor:default"> <tr><td> </td></tr></table></body>');
tbl=docFrame.getElementById("tbl")
div=document.getElementById("thuty")
for(i=0;i<21;i++)
{
AddItem("Value"+i,"text "+i)
}
}
function AddItem(value,text)
{
var temp=tbl.insertRow(0)
temp.innerHTML='<td id="'+value+'">Thu ty '+text+'</td>'
}
function showWord(obj,e)
{
//docFrame=document.getElementById("hangve").contentDocument;
txtCtrl=obj
if(e.keyCode!=38 && e.keyCode!=40 && e.keyCode!=13 && e.keyCode!=27 )
{
rowIndex=-1
//var httpReq=ajaxFunction()
div.style.visibility="visible"
div.style.left=getAbsX(obj) +"px"
div.style.top=getAbsY(obj)+obj.offsetHeight+"px"
div.style.width=obj.offsetWidth+"px"
document.getElementById("hangve").width=obj.offsetWidth+"px"
}
}
function changeColor(obj)
{
if(obj.nodeName=="TR")
{
for(var i=0;i<tbl.rows.length;i++)
{
if(tbl.rows[i].rowIndex!=obj.rowIndex)
{
tbl.rows[i].style.backgroundColor="white"
tbl.rows[i].style.color="black"
}
}
obj.parentNode.title=obj.firstChild.id
obj.style.backgroundColor="#316AC5"
obj.style.color="white"
rowIndex=obj.rowIndex
}
}
function changeSlt(e)
{
if(e.keyCode==38)//nut len
{
if(rowIndex<=0)
rowIndex=tbl.rows.length-1
else
rowIndex--
changeColor(tbl.rows[rowIndex])
div.style.visibility='visible'
return false
}
if(e.keyCode==40)//nut xuong
{
if(rowIndex==tbl.rows.length-1)
rowIndex=0
else
rowIndex++
changeColor(tbl.rows[rowIndex])
div.style.visibility='visible'
return false
}
if(e.keyCode==13 && rowIndex>=0 && rowIndex<tbl.rows.length)
if(div.style.visibility!="hidden")
{
txtCtrl.value=tbl.rows[rowIndex].firstChild.id
div.style.visibility="hidden"
return false
}
if(e.keyCode==9 || e.keyCode==27)
div.style.visibility="hidden"
}
</script>
<div id="thuty">
<iframe name="hangve" height="300px" width="300px" scrolling="yes" id="hangve" class="kole" >
</iframe>
</div>
</body>
</html>
<!--//<table onmousemove="changeColor(document.elementFromPoint(event.clientX,event.clientY).parentNode)" onmouseover="hd=false" onmouseout="hd=true" onclick="txtCtrl.focus();txtCtrl.value=document.elementFromPoint(event.clientX,event.clientY).id;div.style.visibility='hidden';" width="100%"cellspacing="0" id="tbl" cellpadding="0" style="border: thin solid #000000;cursor:default">
// <tr><td> </td></tr>
// </table>-->
|
[right][size=1][url=http://bachkhoaaptech.com/forum/showthread.php?p=19936]Copyright © Diá»…n Äà n BachKhoa-Aptech - Posted by huunhat[/url][/size][/right]
Anh em và o đây hợp sức nà o-Tự tạo control select
.
ManhLinh
Linear Mode
