- 浏览: 15176 次
- 性别:
- 来自: 杭州
最新评论
-
Emiya_wang:
初学PHP 感觉不错
顶 +1
PHP学习---变量使用总结 -
syre:
$not_init['aaa']['bbb']['ccc']= ...
PHP学习---变量使用总结 -
fenhonghai:
xieye 写道从可读性考虑,还是加一句
$not_init ...
PHP学习---变量使用总结 -
xieye:
从可读性考虑,还是加一句$not_init = array() ...
PHP学习---变量使用总结 -
Julien:
可以不初始化数组变量直接
$not_init['aaa'][' ...
PHP学习---变量使用总结
此控件唯一不足的就是下拉列表之间有间距,
哪位有好的办法消除html控件间的间距(不是控件内的间距哦,而是像一个button和另一个button纵向排列之后两个控件之间的上下间隔)欢迎讨论!
代码如下,
1.jpg为蓝色纯色图片,您可以做的跟下拉列表默认的颜色一样,运行即可见效果,效果图见附件
关键代码解析:
此函数可以根据自己的需要进行调节,
1,其中的15表示下拉列表最多显示的项目数,超过15就显示滚动条
2,30表示下拉项目最多字符数,如果有的项目超过超过了30个字符就让控件自适应,及可自动拉伸,如果小于30个字符,则控件长度显示wei200px(可自行调节,这样做是为了避免选项过短控件显示不够宽的情况)
3,参数num,width是需要经过计算之后才能确定的,所以此控件的使用还是有一定的局限性,如果有哪位能有好的办法让控件最小宽度固定(不用判断数据长度),并在文本过长的情况下自适应,欢迎讨论
最新更新
下列列表框模拟,附图片,功能介绍:
1,有下拉选择按钮,
2,选项文字长度超过控件长度时,控件自动拉伸。
3,项目数超过固定项目数时,会显示下拉列表框的滚动条。
有好的建议或者有疑问欢迎来函!
哪位有好的办法消除html控件间的间距(不是控件内的间距哦,而是像一个button和另一个button纵向排列之后两个控件之间的上下间隔)欢迎讨论!
代码如下,
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title></title> <style> .div_1{ height:100; overflow-x:hidden; overflow-y:scroll; cellspacing:0px; cellpadding:0px; } .table_1{ top:0px; width:100%; heigth:20; border:1; font-size:14px; cellspacing:0px; cellpadding:0px; } .tr_1{ heigth:20; width:300px; cursor:default; } </style> <script> function moveon(obj,objtext,objin){ obj.background = "i.jpg"; obj.style.color = "#FFFFFF"; obj.style.border= 1; document.getElementById(objin).onblur =""; } function out(obj,objtext,objin){ obj.background = ""; obj.style.color = ""; document.getElementById(objin).focus(); document.getElementById(objin).onblur =function anonymous(){leave(objtext);}; } function divmoveon(objtext,objin){ document.getElementById(objin).onblur =""; } function divout(objtext,objin){ document.getElementById(objin).focus(); document.getElementById(objin).onblur =function anonymous(){leave(objtext);}; } function selected(textobj,obj,divobj){ document.getElementById(textobj).value=obj.firstChild.nodeValue; document.getElementById(divobj).style.display="none"; } function showdiv_here(listid,obj,num,width){ if(num>15){ document.getElementById(listid).style.height = 22*15; }else{ document.getElementById(listid).style.overflowY="hidden"; document.getElementById(listid).style.height = num*22; } if(width<30){ document.getElementById(listid).style.width=200; } document.getElementById(obj).style.display=""; } function leave(divobj){ document.getElementById(divobj).style.display="none"; } </script> </head> <body > <table border=1> <tr><td>hello</td> <td><input type="text" id="name1" readonly="true" value="" onclick="showdiv_here('listdiv','showlist1',18,12);" enable="false" ></input> <div id="A" style="position:relative"> <div id="showlist1" style="display:none;position:absolute;left:0px;top:0px"> <table border=0 cellspacing=0 cellpadding=1> <tr><td bgcolor="#000000"> <table bgcolor="#FFFFFF" border=0 cellspacing=0 cellpadding=0> <tr><td> <div id="listdiv" class="div_1" onMouseDown ="divmoveon('showlist1','name1')" onmouseover="divmoveon('showlist1','name1')" onmouseout="divout('showlist1','name1')"> <table class="table_1"><tr class="tr_1"><td onmouseover="moveon(this,'showlist1','name1')" onmouseout="out(this,'showlist1','name1')" onclick ="selected('name1',this,'showlist1')">1</td></tr></table> <table class="table_1"><tr class="tr_1"><td onmouseover="moveon(this,'showlist1','name1')" onmouseout="out(this,'showlist1','name1')" onclick ="selected('name1',this,'showlist1')">2</td></tr></table> <table class="table_1"><tr class="tr_1"><td onmouseover="moveon(this,'showlist1','name1')" onmouseout="out(this,'showlist1','name1')" onclick ="selected('name1',this,'showlist1')">3</td></tr></table> <table class="table_1"><tr class="tr_1"><td onmouseover="moveon(this,'showlist1','name1')" onmouseout="out(this,'showlist1','name1')" onclick ="selected('name1',this,'showlist1')">4</td></tr></table> <table class="table_1"><tr class="tr_1"><td onmouseover="moveon(this,'showlist1','name1')" onmouseout="out(this,'showlist1','name1')" onclick ="selected('name1',this,'showlist1')">5</td></tr></table> <table class="table_1"><tr class="tr_1"><td onmouseover="moveon(this,'showlist1','name1')" onmouseout="out(this,'showlist1','name1')" onclick ="selected('name1',this,'showlist1')">6</td></tr></table> <table class="table_1"><tr class="tr_1"><td onmouseover="moveon(this,'showlist1','name1')" onmouseout="out(this,'showlist1','name1')" onclick ="selected('name1',this,'showlist1')">1</td></tr></table> <table class="table_1"><tr class="tr_1"><td onmouseover="moveon(this,'showlist1','name1')" onmouseout="out(this,'showlist1','name1')" onclick ="selected('name1',this,'showlist1')">2</td></tr></table> <table class="table_1"><tr class="tr_1"><td onmouseover="moveon(this,'showlist1','name1')" onmouseout="out(this,'showlist1','name1')" onclick ="selected('name1',this,'showlist1')">3</td></tr></table> <table class="table_1"><tr class="tr_1"><td onmouseover="moveon(this,'showlist1','name1')" onmouseout="out(this,'showlist1','name1')" onclick ="selected('name1',this,'showlist1')">4</td></tr></table> <table class="table_1"><tr class="tr_1"><td onmouseover="moveon(this,'showlist1','name1')" onmouseout="out(this,'showlist1','name1')" onclick ="selected('name1',this,'showlist1')">5</td></tr></table> <table class="table_1"><tr class="tr_1"><td onmouseover="moveon(this,'showlist1','name1')" onmouseout="out(this,'showlist1','name1')" onclick ="selected('name1',this,'showlist1')">6</td></tr></table> <table class="table_1"><tr class="tr_1"><td onmouseover="moveon(this,'showlist1','name1')" onmouseout="out(this,'showlist1','name1')" onclick ="selected('name1',this,'showlist1')">1</td></tr></table> <table class="table_1"><tr class="tr_1"><td onmouseover="moveon(this,'showlist1','name1')" onmouseout="out(this,'showlist1','name1')" onclick ="selected('name1',this,'showlist1')">2</td></tr></table> <table class="table_1"><tr class="tr_1"><td onmouseover="moveon(this,'showlist1','name1')" onmouseout="out(this,'showlist1','name1')" onclick ="selected('name1',this,'showlist1')">4</td></tr></table> <table class="table_1"><tr class="tr_1"><td onmouseover="moveon(this,'showlist1','name1')" onmouseout="out(this,'showlist1','name1')" onclick ="selected('name1',this,'showlist1')">5</td></tr></table> <table class="table_1"><tr class="tr_1"><td onmouseover="moveon(this,'showlist1','name1')" onmouseout="out(this,'showlist1','name1')" onclick ="selected('name1',this,'showlist1')">6</td></tr></table> </div> </td></tr></table> </td></tr></table> </div ></div> </td></tr></table> </body> </html>
1.jpg为蓝色纯色图片,您可以做的跟下拉列表默认的颜色一样,运行即可见效果,效果图见附件
关键代码解析:
function showdiv_here(listid,obj,num,width){ if(num>15){ document.getElementById(listid).style.height = 22*15; }else{ document.getElementById(listid).style.overflowY="hidden"; document.getElementById(listid).style.height = num*22; } if(width<30){ document.getElementById(listid).style.width=200; } document.getElementById(obj).style.display=""; }
此函数可以根据自己的需要进行调节,
1,其中的15表示下拉列表最多显示的项目数,超过15就显示滚动条
2,30表示下拉项目最多字符数,如果有的项目超过超过了30个字符就让控件自适应,及可自动拉伸,如果小于30个字符,则控件长度显示wei200px(可自行调节,这样做是为了避免选项过短控件显示不够宽的情况)
3,参数num,width是需要经过计算之后才能确定的,所以此控件的使用还是有一定的局限性,如果有哪位能有好的办法让控件最小宽度固定(不用判断数据长度),并在文本过长的情况下自适应,欢迎讨论
最新更新
下列列表框模拟,附图片,功能介绍:
1,有下拉选择按钮,
2,选项文字长度超过控件长度时,控件自动拉伸。
3,项目数超过固定项目数时,会显示下拉列表框的滚动条。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title></title> <style> .div_1{ height:100; overflow-x:hidden; overflow-y:scroll; z-index:3; } .btn_1{ border:none; background-image:url(but_out.jpg); cursor:default; width:16px; height:18px; background-repeat:no-repeat; } .btn_2{ border:none; background-image:url(but_over.jpg); cursor:default; width:16px; height:18px; background-repeat:no-repeat; } .s_table_1{ BORDER:#7F9DB9 1px solid; width:180px; cursor:default; } .s_table_2{ top:0px; width:100%; border:none; font-family:Arial, "MS Pゴシック",sans-serif; font-size:12px; cellPadding:0; cellSpacing:0; } .tr_1{ width:178px; cursor:default; white-space:nowrap; } .text_1{ width:161px; height:16px; cursor:default; BORDER:0px; font-family:Arial, "MS Pゴシック",sans-serif; font-size:12px; } .div_A{ position:relative } .div_B{ position:absolute; left:0px; top:0px; } </style> <script> var CBB_TEXTBOX = "_index"; var CBB_TEXTHIDDEN = "_no"; var CBB_SHOWDIV = "_showdiv"; var CBB_LISTDIV = "_listdiv"; var CBB_LISTTABLE = "_table"; function div_move_over(obj){ document.getElementById(obj+CBB_TEXTBOX).onblur =""; } function div_move_out(obj){ document.getElementById(obj+CBB_TEXTBOX).onblur =function anonymous(){hidden_listbox(obj+CBB_SHOWDIV)}; document.getElementById(obj+CBB_TEXTBOX).focus(); } function option_move_over(obj,objin){ obj.background = "option_blue.jpg"; obj.style.color = "#FFFFFF"; document.getElementById(objin+CBB_TEXTBOX).onblur =""; } function option_move_out(obj,objin){ obj.background = ""; obj.style.color = ""; document.getElementById(objin+CBB_TEXTBOX).onblur =function anonymous(){hidden_listbox(objtext+CBB_SHOWDIV);}; document.getElementById(objin+CBB_TEXTBOX).focus(); } function option_clicked(obj,objin){ if(obj.firstChild){ document.getElementById(objin+CBB_TEXTBOX).value=obj.firstChild.nodeValue; if(obj.value=='add'){ document.getElementsByName(objin+CBB_TEXTHIDDEN)[0].value = ""; document.getElementsByName(objin+CBB_TEXTHIDDEN)[0].id = ""; }else{ document.getElementsByName(objin+CBB_TEXTHIDDEN)[0].value = obj.value; document.getElementsByName(objin+CBB_TEXTHIDDEN)[0].id = obj.firstChild.nodeValue; } }else{ document.getElementById(objin+CBB_TEXTBOX).value=""; document.getElementsByName(objin+CBB_TEXTHIDDEN)[0].value = ""; document.getElementsByName(objin+CBB_TEXTHIDDEN)[0].id = ""; } document.getElementById(objin+CBB_SHOWDIV).style.display="none"; } function show_listbox(obj){ var trobj = document.getElementById(obj+CBB_LISTTABLE).rows; var rowsNum =trobj.length; var optionNum = 3; var optionHeigth = 16; document.getElementById(obj+CBB_LISTDIV).style.width=178; if(rowsNum>optionNum){ document.getElementById(obj+CBB_LISTDIV).style.height = optionHeigth*optionNum; }else{ document.getElementById(obj+CBB_LISTDIV).style.overflowY="hidden"; document.getElementById(obj+CBB_LISTDIV).style.height = rowsNum*optionHeigth; } document.getElementById(obj+CBB_SHOWDIV).style.display=""; document.getElementById(obj+CBB_TEXTBOX).focus(); } function show_listbox(obj){ var trobj = document.getElementById(obj+CBB_LISTTABLE).rows; var rowsNum =trobj.length; var optionWidth = 178;//项目宽度/下列列表框的默认宽度 var optionNum = 3; //列表框最多可显示项目数 var optionHeigth = 16;//项目的高度 var roolBarWidth = 18;//纵向滚动条的宽度 //var charSize = 6.2;//字符宽度,如需要精确计算宽度,可去掉注释。 for(var i=0;i<rowsNum;i++){ if(trobj[i].firstChild.firstChild){ str = trobj[i].firstChild.firstChild.nodeValue; document.getElementById("p1").innerHTML = trobj[i].firstChild.firstChild.nodeValue; piwidth = document.getElementById("p1").offsetWidth+roolBarWidth; document.getElementById("p1").innerHTML =""; // if(piwidth<window.document.body.clientWidth){ if(optionWidth<piwidth){ optionWidth = piwidth; if(optionWidth>580){ len = 0; for(j=0;j<str.length;j++) { iCode = str.charCodeAt(j); if((iCode>=0 && iCode<=255)||(iCode>=0xff61 && iCode<=0xff9f)){ len += 1; } else{ len += 2; } } if(len*charSize>optionWidth){ optionWidth = len*charSize; } } } } } document.getElementById(obj+CBB_LISTDIV).style.width=optionWidth; if(rowsNum>optionNum){ document.getElementById(obj+CBB_LISTDIV).style.height = optionHeigth*optionNum; }else{ document.getElementById(obj+CBB_LISTDIV).style.overflowY="hidden"; document.getElementById(obj+CBB_LISTDIV).style.height = rowsNum*optionHeigth; } document.getElementById(obj+CBB_SHOWDIV).style.display=""; document.getElementById(obj+CBB_TEXTBOX).focus(); } function hidden_listbox(divobj){ document.getElementById(divobj).style.display="none"; } function btn_over_img(obj){ obj.className ="btn_2"; } function btn_out_img(obj){ obj.className ="btn_1"; } </script> </head> <body > <span id="p1"></span> ******************************************************************************<p> <table class='s_table_1' onclick="show_listbox('search');" cellspacing=0 cellpadding=0 > <tr><td><input type='text' id='search_index' class='text_1' readOnly onclick="show_listbox('search');" onblur="hidden_listbox('search_showdiv')" value='selectedvalue'><input type='button' id='btna2' class='btn_1' onclick="show_listbox('search')" onmouseover='btn_over_img(this);' onmouseout='btn_out_img(this);'><input type='hidden' name='search_no' value='selectedid' id='selectedvalue'><td></tr></table> <div class='div_A' border=1 > <div id='search_showdiv' class='div_B' style='display:none;border:1' onmouseover="div_move_over('search');" onmouseout="div_move_out('search');"> <table border=0 cellspacing=0 cellpadding=1><tr><td bgcolor='#000000'> <table bgcolor='#FFFFFF' border=0 cellspacing=0 cellpadding=0><tr><td> <div id='search_listdiv' class='div_1''> <table id='search_table' class='s_table_2' cellspacing=0 cellpadding=0> <!--select_top--> <!--option--> <tr class='tr_1' ><td style='white-space:nowrap;' height='16' value='1' onmouseover="option_move_over(this,'search');" onmouseout="option_move_out(this,'search')" onclick ="option_clicked(this,'search');">1</td></tr> <tr class='tr_1' ><td style='white-space:nowrap;' height='16' value='1' onmouseover="option_move_over(this,'search');" onmouseout="option_move_out(this,'search')" onclick ="option_clicked(this,'search');">1</td></tr> <tr class='tr_1' ><td style='white-space:nowrap;' height='16' value='1' onmouseover="option_move_over(this,'search');" onmouseout="option_move_out(this,'search')" onclick ="option_clicked(this,'search');">1</td></tr> <tr class='tr_1' ><td style='white-space:nowrap;' height='16' value='1' onmouseover="option_move_over(this,'search');" onmouseout="option_move_out(this,'search')" onclick ="option_clicked(this,'search');">155555555555555555555555555555555555555555555555555555555</td></tr> <!--option--> </table></div></td></tr></table></td></tr></table></div></div> </body> </html>
有好的建议或者有疑问欢迎来函!
相关推荐
精通CSS+DIV网页样式与布局8-9章实例 非常好,是最新的 打包下载
ps+div+css打造蓝色后台--login页面设计
网页设计-页面布局篇(Css+Div),网页设计-页面布局篇(Css+Div).网页设计-页面布局篇(Css+Div).网页设计-页面布局篇(Css+Div).
HTML编写+div+css教程--v1.5--风雨无阻
使用DIV+CSS布局,页面代码精简,这一点相信对XHTML有所了解的都知道。
使用css+div制作航 yellow-vertical-css-menu
精通CSS+DIV网页样式与布局1-2章实例 非常好的一个教程,又是最新的 打包下载,方便
html+css+js制作贪吃蛇游戏--源码 html+css+js制作贪吃蛇游戏--源码 html+css+js制作贪吃蛇游戏--源码
第1部分 CSS基础知识篇 第1章 CSS的初步体验 1.1 CSS的概念 1.2 使用CSS控制页面 1.3 体验CSS 第2章 CSS的基本语法 2.1 CSS选择器 2.2 选择器声明 2.3 CSS的继承 第3章 用...
使用 div+css实现下拉列表的功能 兼容ie6 火狐
纯div+css制作的弹出菜单-01 纯div+css制作的弹出菜单-01 纯div+css制作的弹出菜单-01 纯div+css制作的弹出菜单-01
韩顺平 2011 轻松搞定网页设计 div+css笔记
网页导航条-div+css+js网页导航条-div+css+js网页导航条-div+css+js网页导航条-div+css+js网页导航条-div+css+js网页导航条-div+css+js网页导航条-div+css+js网页导航条-div+css+js网页导航条-div+css+js
企业建站 web建站 自助建站 web设计界面(css+js效果)-格子平台-企业建站 web设计界面(css+js效果)-格子平台-企业建站 web设计界面(css+js效果)-格子平台-企业建站 web设计界面(css+js效果)-格子平台-企业建站
本资源内含数十种div+css的网页设计素材模板,设计到购物网站,视屏网站,书城网站,博客网站,学习网站,旅游网站……海量资源快来下载吧
HTML+CSS+DIV网页设计与布局(第2版)(微课版)-教案.docx
CSS+div 布局 CSS+div 布局 CSS+div 布局 CSS+div 布局 CSS+div 布局 CSS+div 布局 CSS+div 布局
期末大作业-风俗文化宣传网页设计-用HTML+CSS+Javascript网页制作 期末大作业-风俗文化宣传网页设计-用HTML+CSS+Javascript网页制作 期末大作业-风俗文化宣传网页设计-用HTML+CSS+Javascript网页制作 期末大作业-...
"#divselect" 这是哪个模拟列表的盒子的ID,"#inputselect"这个是选择以后给 id="inputselect" 的input隐藏域赋值的哦。 懂一点程序的都明白为啥要赋值了。意思就是给这个隐藏域赋值就相当于用丑陋的select下拉列表...