工作中写的一些小Demo（textBox与treeView组合实现与dropDownList类似效果）
时间：2011-03-14 来源：肉丝
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication3.WebForm1" %>
<!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 runat="server">
<title></title>
<style type="text/css">
.itemButton1In
{
border-right: #000000 0px solid;
border-top:#000000 0px solid;
border-left: #000000 0px solid;
border-bottom: #000000 0px solid ;
background: url(images/splitter_btnExp.gif) no-repeat right center;
width:20px;
float:left;
}
.itemButton1Out
{
border-right: #000000 0px solid;
border-top:#000000 0px solid;
border-left: #000000 0px solid;
border-bottom: #000000 0px solid ;
background: url(images/splitter_btnCol.gif) no-repeat right center;
width:20px;
float:left;
}
.itemtext_TreeView
{
border-right: #000000 0px solid;
border-top:#000000 0px solid;
border-left: #000000 0px solid;
border-bottom: #000000 0px solid ;
text-align :left;
width :170px;
float:left;
clear :left;
}
.itemDiv_textTreeView
{
background-color :White ;
border-right: #000000 1px solid;
border-top:#000000 1px solid;
border-left: #000000 1px solid;
border-bottom: #000000 1px solid ;
text-align :center;
float:left;
clear :left;
}
.itemshowInfor
{
visibility :hidden;
position:absolute;
z-index:3;
border-width:1px;
border-color:Black ;
background-color:White ;
border-style:solid ;
width:190px;
overflow:auto ;
}
</style>
</head>
<body >
<form id="form1" runat="server" >
<div id ="div_TextForTreeView">
<div class="itemDiv_textTreeView">
<input id="text_TreeView" runat ="server" class="itemtext_TreeView" type="text"/>
<input id="Button1" type="button" value=" " onclick="show()" class="itemButton1In" />
</div>
<br />
<div id="showInfor" runat="server" style="visibility:hidden;
position:absolute; z-index:3;border-width:1px; border-color:Black;
background-color:White; border-style:solid;width:190px;
overflow :auto" >
<asp:TreeView ID="TreeView1" runat="server" ImageSet="Simple" EnableViewState ="true"
onclick="TreeClick()" LineImagesFolder="~/TreeLineImages" ShowLines="True" >
<HoverNodeStyle Font-Underline="True" ForeColor="#5555DD" />
<Nodes>
<asp:TreeNode Text="New Node" Value="New Node">
<asp:TreeNode Text="New Node" Value="New Node">
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode>
</asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Text="New Node" Value="New Node">
<asp:TreeNode Text="New Node" Value="New Node">
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode>
</asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode>
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode>
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode>
<asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode>
</Nodes>
<NodeStyle Font-Names="Tahoma" Font-Size="10pt" ForeColor="Black"
HorizontalPadding="0px" NodeSpacing="0px" VerticalPadding="0px" />
<ParentNodeStyle Font-Bold="False" />
<SelectedNodeStyle Font-Underline="True" ForeColor="#5555DD"
HorizontalPadding="0px" VerticalPadding="0px" />
</asp:TreeView>
</div>
</div>
</form>
</body>
<script>
// function $(element) {
// return element = document.getElementById(element);
// }
// function $D() {
// var d = $('showInfor');
// d.style.visibility = "visible";
// var h = 0;
// d.style.Height = h + 'px';
// var maxh = 400;
// function dmove() {
// if (h > maxh) {
// d.style.Height = '400px';
// clearInterval(iIntervalId);
// } else {
// d.style.Height = h + 'px';
// }
// h += 10; //层展开速度
// }
// iIntervalId = setInterval(dmove, 2);
// }
// function $D2() {
// var d = $('showInfor');
// var h = d.offsetHeight;
// var maxh = 300;
// function dmove() {
// h -= 10; //层收缩速度
// if (h <= 0) {
// d.style.visibility = "hidden";
// clearInterval(iIntervalId);
// } else {
// d.style.height = h + 'px';
// }
// }
// iIntervalId = setInterval(dmove, 2);
// }
function show() {
var inforDV = document.getElementById("showInfor");
var buttonImg = document.getElementById("Button1");
var textNode = document.getElementById("text_TreeView");
var left = textNode.offsetLeft + 10;
var top = textNode.offsetTop+36;
if (inforDV.style.visibility == "visible") {
inforDV.style.visibility = "hidden";
buttonImg.className = "itemButton1In";
}
else if (inforDV.style.visibility == "hidden") {
inforDV.style.visibility = "visible";
buttonImg.className = "itemButton1Out";
}
inforDV.style.left = left;
inforDV.style.top = top;
}
function document.onclick() {
var inforDV = document.getElementById("showInfor");
var buttonImg = document.getElementById("Button1");
if (event.srcElement != null) {
if (event.srcElement.id != "Button1" && event.srcElement.id != "showInfor" && event.srcElement.id != "text_TreeView") {
var left0 = inforDV.offsetLeft;
var top0 = inforDV.offsetLeft;
var left1 = inforDV.offsetLeft + 190;
var top1 = inforDV.offsetLeft;
if (event.x > left1 || event.x < left0) {
inforDV.style.visibility = "hidden";
buttonImg.className = "itemButton1In";
}
}
}
else {
inforDV.style.visibility = "hidden";
buttonImg.className = "itemButton1In";
}
}
function TreeClick() {
var tag = event.srcElement;
var text = tag.innerText;
if (text != "") {
var textNode = document.getElementById("text_TreeView");
textNode.value = text;
}
}
</script>
</html>
展开图片：
收缩图片：
肯定存有许多不足之处，请大家多留宝贵建议，相互学习，谢谢！
相关阅读 更多 +
