- 浏览: 201306 次
- 性别:
- 来自: 紫禁城
文章分类
最新评论
-
a1439226817:
<!doctype html><html l ...
发布一个支持N级下拉列表联动的控件 -
a1439226817:
也不高个测试的demo,别人怎么用啊
发布一个支持N级下拉列表联动的控件 -
davaidgao:
不全啊,这是
Spring3.x权威开发指南 -
caizi12:
对于map绑定很是不方便,现在的做法,需要创建一User类,再 ...
浅谈 SpringMVC 数据绑定 -
joeyhuang:
不全啊..
Spring3.x权威开发指南
由于系统自带的Select实在是不好用,这里我用javascript写了一个全新的Select.
功能:
1.可编辑的Select
2.长度可以随意修改
3.可以遮盖系统Select
4.支持forms
5.支持CSS修改外观
使用方法
var 实体化变量=new editselect(名字,长度,默认字符串,宽度,高度,只读)
实体化变量.add(option数值)
这只是一个测试版,很多功能没有完善,比如没有区分value和caption等等,希望大家提出宝贵意见.
代码如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>用Javascript编写的一个全新的Select >>webjx.com</title>
<script>
scHTML='<div id="selectcontent" class="selectdiv" style="visibility:hidden;"><iframe id=selframe frameborder=0 height=100%></iframe><div id="selecthtml"
class="selectcontent">selectÁбí</div></div>'
document.write(scHTML)
vDiv=selectcontent
vDivHtml=selecthtml
function editselect(name,size,defaulttext,width,height,readonly){
var combo=this;
this.options=new Array();
this.name=name;
this.divname=name+'_div';
this.buttonname=name+'_button';
this.tablename=name+'_table';
this.htmltable=name+'_html'
if (!height) this.height=0; else this.height=height
if (width) this.width=width
if (!size) size=8
if (!defaulttext) defaulttext=""
if (!readonly || readonly==0) {readonly="" }else {if (readonly==1) readonly="readonly style=cursor:default";this.readonly=1}
esHTML='<div id='+this.divname+'>'
+'<table id='+this.tablename+' cellpadding=0 cellspacing=0 class=select><tr><td bgcolor=#FFFFFF>'
+'<input type=text class=selecttext size="'+size+'" name='+name+' value="'+defaulttext+'" '+readonly+'><td><button class=selectbutton
id='+this.buttonname+'>6</td></tr></table>'
+'</div>'
document.write(esHTML)
this.sbutton=eval("document.all."+this.buttonname)
if (this.readonly==1) eval(this.name).onclick=function(){combo.show()}
this.sbutton.onclick=function(){combo.show()}
this.show=function(){
pDiv=eval(combo.divname)
pTable=eval(combo.tablename)
var vHTML='<table id=htmltable cellspacing="0" cellpadding="2" bgcolor="#ffffff" class="selecttable" width=100%>'
for (i=0;i<combo.options.length;i++)
{
vHTML+='<tr onmouseover="mo(this)" onmouseout="mu(this)"
onclick="document.all.'+combo.name+'.value=this.innerText;selectcontent.style.visibility=\'hidden\'"><td nowrap>'+combo.options[i]
}
vHTML+="</table>"
vDivHtml.innerHTML=vHTML
vtop=pDiv.offsetTop+pDiv.offsetHeight
vleft=pDiv.offsetLeft+1
vParent = pDiv.offsetParent;
while (vParent.tagName.toUpperCase() != "BODY")
{
vleft += vParent.offsetLeft;
vtop += vParent.offsetTop;
vParent = vParent.offsetParent;
}
var redge=document.body.clientWidth-vleft
var bedge=document.body.clientHeight-vtop
if (!combo.width) {vDiv.style.width=pTable.offsetWidth} else {vDiv.style.width=combo.width}
if (combo.height==0)
{
vDiv.style.pixelHeight=parseInt(htmltable.offsetHeight)+2
vDivHtml.style.pixelHeight=parseInt(htmltable.offsetHeight)+2
}
else
{
if (htmltable.offsetHeight>combo.height)
{
vDiv.style.pixelHeight=combo.height
vDivHtml.style.pixelHeight=combo.height
}
else
{
vDiv.style.pixelHeight=parseInt(htmltable.offsetHeight)+2
vDivHtml.style.pixelHeight=parseInt(htmltable.offsetHeight)+2
}
}
vDivHtml.scrollTop=0
if (redge<vDiv.offsetWidth)
vDiv.style.left=vleft-1-(vDiv.offsetWidth-redge)
else
vDiv.style.left=vleft-1
if (bedge<vDiv.offsetHeight)
//vDiv.style.top=vtop-vDiv.offsetHeight-pDiv.offsetHeight
vDiv.style.top=vtop-vDiv.offsetHeight+bedge
else
vDiv.style.top=vtop
vDivHtml.style.width=parseInt(vDiv.style.width)
vDiv.style.visibility="visible"
}
this.add=function(text){
combo.options[combo.options.length]=text
}
this.about=function(){
}
}
function mo(obj){
obj.style.backgroundColor="#000099"
obj.style.color="#ffffff"
}
function mu(obj){
obj.style.backgroundColor=""
obj.style.color="#000000"
}
document.onmousedown=function(){
if (vDiv.style.visibility=="visible"){
mx=event.x + document.body.scrollLeft
my=event.y + document.body.scrollTop;
x1=vDiv.offsetLeft
y1=vDiv.offsetTop
x2=vDiv.offsetLeft+vDiv.offsetWidth
y2=vDiv.offsetTop+vDiv.offsetHeight
if (mx<x1 || my<y1 || x2<mx || y2<my)
{
vDiv.style.visibility='hidden'
}
}
}
</script>
<style>
.selecttext{
border:0px
height: 16;
font-family:arial;
font-size:12px;
}
.selectbutton{
font-family:webdings;
font-size:10px;
height: 19;
width: 16;
border:1px solid #83A5EB;
line-height:0px;
padding-bottom:3px;
background-color:#D1E0FD
}
.selecttable{
font-family:arial;
font-size:12px;
cursor:default;
}
.selectcontent
{
position: absolute;
top:0;
left:0;
overflow:auto;
border:1px solid #000000
}
.selectdiv
{
position: absolute;
width:100;
overflow:hidden;
}
.select{
border-collapse: collapse;
border:1px solid #7F9DB9
}
</style>
</head>
<body bgcolor="#83A5EB">
<table border="0" width="100%">
<tr>
<td width="151" align="center"><font size="2">可编辑的Select</font></td>
<td><script>
var sel1=new editselect("select1","25","可编辑的Select","");
sel1.add("这是一个可以编辑的Select")
sel1.add("支持CSS")
sel1.add("可以通过CSS,修改外形")
sel1.add("突破原来的Select诸多限制")
</script></td>
</tr>
<tr>
<td width="151" align="center"><font size="2">长度可以随意修改<br>可以设置为只读</font></td>
<td>
<script>
var sel2=new editselect("select2","20","长度可以随意修改",250,82,1);
sel2.add("这是一个可以编辑的Select")
sel2.add("支持CSS")
sel2.add("可以通过CSS,修改外形")
sel2.add("作者:舜子制作")
sel2.add("MSN:puterjam@msn.com")
</script>
</td>
</tr>
<tr>
<td width="151" align="center"><font size="2">可以遮盖系统Select</font></td>
<td>
<script>
var sel3=new editselect("select3","25","可以遮盖系统Select","",41);
sel3.add("这是一个可以编辑的Select")
sel3.add("支持CSS")
sel3.add("可以通过CSS,修改外形")
sel3.add("突破原来的Select诸多限制")
</script>
</td>
</tr>
<tr>
<td width="151" align="right"> </td>
<td><select><option>系统的Select</option></select> </td>
</tr>
</table>
</body>
</html>
发表评论
-
发布一个支持N级下拉列表联动的控件
2010-10-29 14:38 1306最近,由于工作的需要,写了一个联动下拉列表控件,理论上支持N级 ... -
Tomcat内存溢出的三种情况及解决办法分析
2010-08-23 16:30 780Tomcat内存溢出的原因 在生产环境中to ... -
web.xml元素介绍
2010-08-23 16:27 873每一个站的WEB-INF下都有一个web.xml的设定文件,它 ... -
什么是交互设计(Interaction Design)?
2009-02-11 09:16 1339什么是交互设计(Interaction Design)? ... -
Alan Cooper 的交互设计观(转载)
2009-02-11 09:23 906Alan Cooper 的交互设计观 ... -
界面设计规则和规范
2009-02-11 09:38 829界面设计规则和规范 ... -
UI设计流程
2009-02-11 09:41 694UI设计流程 ... -
用户界面设计的技巧与技术
2009-02-11 09:43 656用户 ... -
UI设计,仅是画张图吗?
2009-02-11 09:44 1061UI设计,仅是画张图吗? ... -
软件界面设计要素
2009-02-11 09:51 754软件界面设计要素 界 ... -
GUI设计禁忌书摘
2009-02-13 10:47 768同一页面包含重复功能的链接或按钮。 将复选框用作单选按钮。 ... -
Tomcat配置和Web应用程序开发
2006-10-05 13:47 809◆tomcat是一个专门用 ... -
HTTP协议精解
2006-10-08 18:46 869WEB服务器和浏览器之间 ... -
Servlet开发基础
2006-10-08 20:48 8231.澄清动态网页和动态HTML网页的区别:动态网页:web服务 ... -
使用Servlet实现动态文件下载
2006-10-12 22:16 2102实现动态文件内容的下载:1.Servlet必须告诉浏览器其所输 ... -
URL编码
2006-10-21 23:24 899什么是URL编码? 当浏览 ... -
JSP简介
2006-10-21 23:26 747JSP是Java Server Page的缩写,通常JSP页 ... -
MVC模式
2006-10-22 07:53 941MVC模式 所谓的MVC模式就是模型-视图-控制器(Model ... -
Session详解
2006-11-01 14:27 557session,中文经常翻译为会话,其本来的含义是指有始有终的 ... -
Tomcat5中文问题解决之道
2006-11-01 14:38 568在tomcat5中发现了以前处理tomcat4的方法不能适 ...
相关推荐
这是一个自己用javascript脚本写的select支持首字母筛选、上下键选值以及回车键取值的功能,下拉列表的数据源可以是已有的select下拉列表值也可以是其他的数据(如表,数组,集合,字典等等)有兴趣的朋友可以再深入...
JavaScript三级联通实现最新全国各省、市、县联动Select脚本,数据为最新全国全国各省、市、县数据,纯JavaScript实现。 部分代码如下: //这是从国家统计局网站下载的全国行政区划代码,先把他转化为JSON对象, //...
实现思路 第一步:将表单中的select隐藏起来。 为什么?很简单,因为这家伙太顽固了,用css根本搞不出来你想要的。所以把它杀掉。...我们再用一个div浮在上一个div的下边,这个就是options的替身了。
Jquery实现省市区/县三级联动的Javascript脚本
js特效脚本含源码和说明select下拉菜单美化本资源系百度网盘分享地址
传统的select控件比较难看,用css美化也达不到好的效果,而javascript和css结合起来,用div等元素模拟一个select达到想要的效果就很容易了。
<SELECT SIZE="8" onChange="bgChange(this);"> <OPTION>Red <OPTION>Orange <OPTION>Yellow <OPTION>Green <OPTION>Blue <OPTION>Indigo <OPTION>Violet <OPTION>White <OPTION>pink </SELECT> ...
select2的样式和javaScript脚本
6.5 从一个下拉列表往另一个下拉列表添加内容 6.6 改变列表项的上下顺序 6.7 给下拉框数据分组 6.8 获取列表框的选择 6.9 类IE下拉框 6.10 下拉框式邮件发送 6.11 获取多选框的选择项 6.12 手动调整的列表框 6.13 ...
6.5 从一个下拉列表往另一个下拉列表添加内容 6.6 改变列表项的上下顺序 6.7 给下拉框数据分组 6.8 获取列表框的选择 6.9 类IE下拉框 6.10 下拉框式邮件发送 6.11 获取多选框的选择项 6.12 手动调整的列表框 6.13 ...
一个语句可以跨多行。多个语句可以出现在一行上,但各自中间应该用分号隔开。 break comment continue delete do...while export for for...in function if...else import labeled return switch var while with ...
2.8 编写JavaScript 脚本 第3 章 JavaScript 基本语法 3.9 JavaScript 基本数据结构 3.10 JavaScript 运算符和表达式 3.11 JavaScript 控制结构和循环 第4 章 Window 窗口对象 4.12 Window 窗口对象的属性 4.13 ...
由于系统自带的Select实在是不好用,这里我用javascript写了一个全新的Select. 功能: 1.可编辑的Select 2.长度可以随意修改 3.可以遮盖系统Select 4.支持forms 5.支持CSS修改外观 6.修正在IE 5.0上运行出错的问题 7...
:laptop: :male_sign: 选择运行 一个CLI工具,以交互方式选择一个或多个package.json npm脚本来运行。目的如果您有多个linter,格式化程序或测试脚本,且这些脚本想与有限的类型一起运行。 另外,如果您想在开发或...
一种是使用input元素的单行文本,另一种是使用textarea的多行文本框。 使用input方式,必须添加type,设置为“text”。 size特性,可以指定文本框内能够显示的字符数。 value属性可以设置文本框的初始值。 ...
一个轻量级的 jQuery 插件,用可定制的下拉菜单替换原生选择元素。 安装 npm i nice-select2 用法 包括 nice-select2 脚本。 < script src =" path/to/nice-select2.js " > </ script > 包括样式,...
2.8 编写 JavaScript 脚本 第3 章 JavaScript 基本语法. 3.9 JavaScript 基本数据结构. 3.10 JavaScript 运算符和表达式. 3.11 JavaScript 控制结构和循环. 第4 章 Window 对象 4.12 Window 对象的属性 4.13 Window ...
3.3.2 选择一个浏览器 3.4 DOM核心 3.4.1 继承在DOM中的重要性 3.4.2 核心Node对象 3.4.3 核心Element对象 3.4.4 核心Document对象 3.4.5 遍历和迭代DOM树 3.5 DOM HTML ...
1.2 第一个JavaScript程序 1.2.1 嵌入JavaScript 1.2.2 链接外部JavaScript文件 1.2.3 注意事项 1.3 基础语法 1.3.1 数据类型 1.3.2 变量与常量 1.3.3 运算符 1.4 流程控制语句 1.4.1 if条件语句 1.4.2 ...