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

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

2013-11-23 19:29:16  來源: 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
  • 上一篇文章:

  • 下一篇文章:
  • 推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.