- 博客(0)
- 资源 (7)
- 收藏
- 关注
RSS订阅下拉数据控件,不错的控件
<html>
<head>
<title>下拉框中的复选框</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
body,td{font-size:12px;color:#000000;}
.checkbox{width:15px;height:15px;}
.cked{margin:1px;padding:2px;width:98%;display:block;background-color:highlight;color:highlighttext;}
.nock{margin:1px;padding:2px;width:98%;display:block;}
</style>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<script language="javascript">
<!--
function HtmlEncode(text){
return text.replace(/&/g, '&').replace(/\"/g, '"').replace(/</g, '<').replace(/>/g, '>');
}
function _checkbox(name,str,defv){
//haiwa@2005-8-17
//http://www.51windows.net
var arr=str.split("^");
var ck="",bc="";
for(var i=0;i<arr.length;i++){
var thisarr=arr[i].split("@=");
if (thisarr[0].length>0){
var t=(thisarr.length==2)?thisarr[0]:arr[i];
var v=(thisarr.length==2)?thisarr[1]:arr[i];
if((","+HtmlEncode(defv).toLowerCase()+",").replace(/ ,/g, ',').indexOf(","+v+",")!=-1){ck=" checked";cls="cked";}
else{ck="";cls="nock";}
var thisstr="<label class=\""+cls+"\" for=\"i_"+name+"_"+i+"\" id=\"l_"+name+"_"+i+"\">";
thisstr+="<input class=\"checkbox\" onpropertychange=\"document.getElementById('l_"+name+"_"+i+"').className=(document.getElementById('i_"+name+"_"+i+"').checked)?'cked':'nock';\" onclick=\"document.getElementById('l_"+name+"_"+i+"').className=(document.getElementById('i_"+name+"_"+i+"').checked)?'cked':'nock';\" type=\"checkbox\""+ck+" name=\""+name+"\" id=\"i_"+name+"_"+i+"\" value=\""+HtmlEncode(v)+"\" \/> ";
thisstr+=HtmlEncode(t)+"</label>";
document.write(thisstr);
}
}
}
function _getv(o){
var allvalue="";
if(typeof(o)=="undefined"){return "";}
if (typeof(o.length)=="undefined"){
if(o.checked){return o.value+ ",";}else{return "";}
}
for(var i=0;i<o.length;i++){
if(o[i].checked){
allvalue +=o[i].value+",";
}
}
return allvalue;
}
function _setv(o,defv){
var allvalue=(","+HtmlEncode(defv).toLowerCase()+",").replace(/ ,/g, ',');
for(var i=0;i<o.length;i++){
var v = o[i].value;
o[i].checked=(allvalue.indexOf(","+v+",")!=-1)
}
return allvalue;
}
function _sl(o,b){
for(var i=0;i<o.length;i++){
o[i].checked = b
//if(o[i].checked!=b){o[i].click();}
}
}
//-->
</script>
<form method="post" name="myform" action="?">
<table border="0" width="200">
<tr>
<td><div style="width:180px;height:150px;overflow:auto;border: 2px inset #FFFFFF;">
<script language="javascript">
<!--
_checkbox("city","北京^河北^黑龙江^河南^江西^辽宁^宁夏^四川^天津^浙江^香港","北京,山东")
//-->
</script>
</div></td>
</tr>
<tr>
<td><button onclick='_sl(document.myform.city,true);'>全选</button>
<button onclick='_sl(document.myform.city,false);'>全不选</button>
<button onclick='_setv(document.myform.city,"甘肃,广东");'>set值</button>
<button onclick='alert(_getv(document.myform.city));'>get值</button></td>
</tr>
<tr>
<td><div style="width:180px;height:120px;overflow:auto;border: 2px inset #FFFFFF;">
<script language="javascript">
<!--
_checkbox("WebSite","Google.com@=http://www.google.com^Baidu.com@=http://www.baidu.com^Zzsky.cn@=http://www.zzsky.cn","http://www.zzsky.cn")
//-->
</script>
</div></td>
</tr>
<tr>
<td><button onclick='_sl(document.myform.WebSite,true);'>全选</button>
<button onclick='_sl(document.myform.WebSite,false);'>全不选</button>
<button onclick='_setv(document.myform.WebSite,"http://www.google.com");'>set值</button>
<button onclick='alert(_getv(document.myform.WebSite));'>get值</button></td>
</tr>
<tr>
<td align="center"><button onclick='document.myform.reset();'>重置</button> </td>
</tr>
</table>
</form>
</body>
</html>
2009-09-20
下拉复选框,提供方便的操作
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>Untitled Document</title>
<style type="text/css">
div{
padding:0px;
font-size:12px;
}
#mainbox{
width:234px;
}
#box0{
width:200px;
height:20px;
border:1px solid green;
float:left;
padding-top:2px;
padding-left:2px;
overflow-y:scroll;
}
#box1{
width:20px;
height:20px;
cursor:pointer;
border:1px solid green;
float:left;
text-align:center;
padding-top:2px;
}
#items{
border:1px solid black;
width:208px;
display:none;
height:100px;
overflow-y:scroll;
}
#box3{
width:218px;
/*border-bottom:1px solid green;
border-left:1px solid green;
border-right:1px solid green;
*/
padding-left:4px;
}
.over{
background-color:#11586E;
font-weight:bold;
color:#FFF;
/*border-top:1px dotted black;
border-bottom:1px dotted black;*/
cursor:pointer;
}
p{
font-size:12px;
color:activeCaption;
font-weight:bold;
}
</style>
</head>
<body>
<div id="mainbox">
<div id="box0"></div><div id="box1">↓</div>
<div id="items" style="">
<table border="0" width="100%" bgcolor="#000000">
<table border="0" width="100%" cellpadding="0" cellspacing="1" >
<tr bgcolor="#0099CC">
<td width="10%">
<input value="200012020202" id="test" type=checkbox>
</td>
<td>
200012020202
</td>
<td>
张 三
</td>
</tr >
<tr bgcolor="#0099CC">
<td>
<input value="200012020202" id="test" type=checkbox>
</td>
<td>
200012020202
</td>
<td>
张 三
</td>
</tr>
<tr bgcolor="#0099CC">
<td>
<input value="200012020202" id="test" type=checkbox>
</td>
<td>
200012020202
</td>
<td>
张 三
</td>
</tr>
<tr bgcolor="#0099CC">
<td>
<input value="200012020202" id="test" type=checkbox>
</td>
<td>
200012020202
</td>
<td>
张 三
</td>
</tr>
<tr bgcolor="#0099CC">
<td>
<input value="200012020202" id="test" type=checkbox>
</td>
<td>
200012020202
</td>
<td>
张 三
</td>
</tr>
<tr bgcolor="#0099CC">
<td>
<input value="200012020202" id="test" type=checkbox>
</td>
<td>
200012020202
</td>
<td>
张 三
</td>
</tr>
</table>
</table>
</div>
</div>
</body>
<script type="text/javascript">
var flag=0;
var oDiv0=document.getElementById("box0");
var oDiv1=document.getElementById("box1");
var oDiv=document.getElementById("items");
oDiv1.onclick=function(){
if(flag==0){
oDiv.style.display="block";
flag = 1;
}
else{
flag=0;
oDiv.style.display="none";
getCheckedValues();
}
}
oDiv0.onclick=function(){
if(flag!=0){
flag=0;
oDiv.style.display="none";
getCheckedValues();
}
}
/*
* 以下是用于当鼠标离开列表时，列表消失
oDiv.onmouseleave = function(){
flag=0; this.style.display="none"; getCheckedValues();
} */
function getCheckedValues(){
var values = document.getElementsByName("test");
var selectValue="";
for(var i=0;i<values.length;i++){
if(values[i].checked){
selectValue += values[i].value +" | ";
}
}
document.getElementById("box0").innerText=selectValue;
}
</script>
</html>
2009-09-20
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人