熱點推薦：
您现在的位置： 電腦知識網 >> 編程 >> Java編程 >> Java核心技術 >> 正文

帶圖片的，多列的DropDownList的實現

2022-06-13   來源: Java核心技術 

　　下面是模仿的DropDownList的效果支持圖片多列換行等
　　
　　WebDropDownListaspx
　　
　　<%@ Page language=c# Codebehind=WebDropDownListaspxcsvalidateRequest=false
　　 AutoEventWireup=false Inherits=eMengWebDropDownList %>
　　<HTML>
　　<HEAD>
　　<title>模擬下拉列表框</title>
　　<meta httpequiv=ContentType content=text/html; charset=gb>
　　<style>BODY {
　　FONT: px 宋體
　　}
　　TD {
　　FONT: px 宋體
　　}
　　DIV {
　　FONT: px 宋體
　　}
　　LABEL {
　　PADDINGRIGHT: px; PADDINGLEFT: px; PADDINGBOTTOM: px; PADDINGTOP: px; HEIGHT: px
　　}
　　link_box {
　　CURSOR: default; TEXTALIGN: left
　　}
　　link_head {
　　BORDERRIGHT: px inset; BORDERTOP: px inset; BORDERLEFT: px inset; WIDTH: %;
　　BORDERBOTTOM: px inset; HEIGHT: px
　　}
　　link_text {
　　PADDINGLEFT: px; BACKGROUND: #fff
　　}
　　link_arrow {
　　BORDERRIGHT: px outset; BORDERTOP: px outset; BACKGROUND: buttonface;
　　FONT: px marlett; BORDERLEFT: px outset; WIDTH: px;
　　 BORDERBOTTOM: px outset; HEIGHT: %; TEXTALIGN: center
　　}
　　link_arrow {
　　BORDERRIGHT: buttonshadow px solid; PADDINGRIGHT: px;
　　BORDERTOP: buttonshadow px solid; PADDINGLEFT: px;
　　BACKGROUND: buttonface; PADDINGBOTTOM: px; FONT: px marlett;
　　BORDERLEFT: buttonshadow px solid; WIDTH: px; PADDINGTOP: px;
　　BORDERBOTTOM: buttonshadow px solid; HEIGHT: %; TEXTALIGN: center
　　}
　　link_value {
　　BORDERRIGHT: px solid; BORDERTOP: px solid; FILTER: alpha(opacity:);
　　VISIBILITY: hidden; OVERFLOWX: hidden; OVERFLOW: auto; BORDERLEFT: px solid;
　　BORDERBOTTOM: px solid; POSITION: absolute
　　}
　　link_record {
　　BORDERTOP: #eee px solid; PADDINGLEFT: px; BACKGROUND: #fff;
　　WIDTH: %; COLOR: #; HEIGHT: px
　　}
　　link_record {
　　BORDERTOP: # px solid; PADDINGLEFT: px; BACKGROUND: #;
　　WIDTH: %; COLOR: #fe; HEIGHT: px
　　}
　　</style>
　　<script>
　　var dropShow=false
　　var currentID
　　function dropdown(el){
　　if(dropShow){
　　dropFadeOut()
　　}else{
　　currentID=el
　　elstylevisibility=visible
　　dropFadeIn()
　　}
　　}
　　function dropFadeIn(){//選單淡入的效果
　　if(currentIDfiltersalphaopacity<){
　　currentIDfiltersalphaopacity+=
　　fadeTimer=setTimeout(dropFadeIn())
　　}else{
　　dropShow=true
　　clearTimeout(fadeTimer)
　　}
　　}
　　function dropFadeOut(){//選單淡出的效果
　　if(currentIDfiltersalphaopacity>){
　　clearTimeout(fadeTimer)
　　currentIDfiltersalphaopacity=
　　fadeTimer=setTimeout(dropFadeOut())
　　}else{
　　dropShow=false
　　currentIDstylevisibility=hidden
　　}
　　}
　　function dropdownHide(){
　　if(dropShow){
　　dropFadeOut()
　　dropShow=false
　　}
　　}
　　function hiLight(el){//高亮度顯示指標位置
　　if(dropShow){
　　for(i=;i<elparentElementchildNodeslength;i++){
　　elparentElementchildNodes(i)className=link_record
　　}
　　elclassName=link_record
　　}
　　}
　　function CheckMe(el){//替換顯示內容
　　documentalltextinnerText=elinnerText
　　}
　　documentonclick=dropdownHide
　　</script>
　　</HEAD>
　　<body text=# onload=documentallformreset()>
　　<div >模擬下拉框</div>
　　<form id=form onsubmit=alert(cityvalue) runat=server>
　　<table>
　　<tr>
　　<td>
　　<div class=link_box onselectstart=return false >
　　<div class=link_head onclick=dropdown(value)>
　　<table height=% cellSpacing= cellPadding= width=% border=>
　　<tr>
　　 <td>
　　 <div class=link_text><nobr><label id=text>請選擇？</label></nobr></div>
　　 </td>
　　 <td align=right width=>
　　 <div onmouseup=thisclassName=link_arrow class=link_arrow
　　 onmousedown=thisclassName=link_arrow onmouseout=thisclassName=link_arrow></div>
　　 </td>
　　</tr>
　　</table>
　　</div>
　　<div class=link_value id=value >
　　<asp:datagrid id=DataGrid runat=server AutoGenerateColumns=False FontSize=px Width=%
　　ShowHeader=False>
　　<Columns>
　　<asp:BoundColumn DataField=Title SortExpression=Title
　　 DataFormatString=<img src=/Images/menggif align=absmiddle> {}>
　　 </asp:BoundColumn>
　　<asp:BoundColumn DataField=CreateDate SortExpression=CreateDate
　　 HeaderText= DataFormatString={:yyyy年MM月dd日}></asp:BoundColumn>
　　</Columns>
　　</asp:datagrid>
　　<div id=mx>
　　<div class=link_record onmouseover=hiLight(this)
　　 onclick=CheckMe(this);documentallformcityvalue=thisinnerText><label>北京市</label></div>
　　<div class=link_record onmouseover=hiLight(this)
　　 onclick=CheckMe(this);documentallformcityvalue=thisinnerText><label>上海市</label></div>
　　<div class=link_record onmouseover=hiLight(this)
　　 onclick=CheckMe(this);documentallformcityvalue=thisinnerText><label>河南省</label></div>
　　<div class=link_record onmouseover=hiLight(this)
　　 onclick=CheckMe(this);documentallformcityvalue=thisinnerText><label>深圳市</label></div>
　　<div class=link_record onmouseover=hiLight(this)
　　 onclick=CheckMe(this);documentallformcityvalue=thisinnerText><label>大連市</label></div>
　　<div class=link_record onmouseover=hiLight(this)
　　 onclick=CheckMe(this);documentallformcityvalue=thisinnerText><label>雲南省</label></div>
　　</div>
　　</div>
　　</div>
　　</td>
　　<td><input type=hidden value=您尚未選擇 name=city> <input type=submit value=確定>
　　</td>
　　</tr>
　　</table>
　　</form>
　　</body>
　　</HTML>
　　
　　WebDropDownListaspxcs
　　
　　using System;
　　using SystemCollections;
　　using SystemComponentModel;
　　using SystemData;
　　using SystemDrawing;
　　using SystemWeb;
　　using SystemWebSessionState;
　　using SystemWebUI;
　　using SystemWebUIWebControls;
　　using SystemWebUIHtmlControls;
　　using SystemDataOleDb;
　　
　　namespace eMeng
　　{
　　/// <summary>
　　/// ShowList 的摘要說明
　　/// </summary>
　　public class WebDropDownList : SystemWebUIPage
　　{
　　protected SystemWebUIWebControlsDataGrid DataGrid;
　　
　　private void Page_Load(object sender SystemEventArgs e)
　　{
　　DataGridColumns[]ItemStyleWidth = UnitPixel();
　　DataGridColumns[]ItemStyleWidth = UnitPixel();
　　Data_Bind();
　　}
　　
　　public void Data_Bind()
　　{
　　ResponseCacheControl = nocache;
　　ResponseExpires = ;
　　try
　　{
　　string strSQL = SELECT idobjectGuidTitleCreateDateHitCount FROM Document ORDER BY id DESC;
　　string cnString = (new Connection())Con
From:http://tw.wingwit.com/Article/program/Java/hx/201311/26949.html
    《帶圖片的，多列的DropDownList的實現》本文是由Java核心技術免費提供，內容來源於互聯網,本文歸原作者所有。
  • 上一篇文章：

  • 下一篇文章：
    • 相關文章
    主板 CPU 硬盤 內存 顯卡 聲卡 顯示器 光驅 死機
    推薦文章
    Copyright © 2005-2022 電腦知識網 Computer Knowledge   All rights reserved.