发布一个2000风格的SELECT控件

ttyp 2007-01-24 04:11:20
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Class_Combo</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<SCRIPT LANGUAGE="JavaScript">
<!--
/**
** ==================================================================================================
** ClassName ：CLASS_COMBO
** Intro ：a control to replace select control in IE
** Example ：
Ver ： 0.1
---------------------------------------------------------------------------------------------------

<div id="demo"></div>

<SCRIPT LANGUAGE="JavaScript">
<!--
var de = new CLASS_COMBO('demo',100);
de.add(new Option("<font color='red'>Red Word</font>","a"));
//-->

< /SCRIPT>

---------------------------------------------------------------------------------------------------
** Author ：ttyp
** Email ：ttyp@21cn.com
** Date ：2007-1-23
** ==================================================================================================
**/

function CLASS_COMBO(id,width){

this.opended = false;
this.selectedIndex = -1;
this.options = new Array();
this.value = "";
this.text = "";
this.id = id;

var me = this;
var ct = null; /* table */
var hv = null; /* hidden input */
var pl = null; /* show planel */
var pt = null;

var o = document.getElementById(id);
if(o){
var tb = document.createElement("table");
o.appendChild(tb);
this.handle = tb;

var tr = tb.insertRow();
var tc = tr.insertCell();
var th = tr.insertCell();

tc.style.width = (width - 14) + 'px';
tc.style.whiteSpace = "nowrap";
ct = tc;

th.style.fontFamily="webdings";
th.style.fontSize = "6pt";
th.style.width = "14px";
th.style.backgroundColor = "#f8f8f8";
th.align = "center";
th.innerText = "6";
th.onmouseover= function(){this.style.cursor='default';}
th.onselectstart = function(){return false;}

tb.style.borderCollapse ="collapse";
tb.style.fontSize ="9pt";
tb.style.tableLayout = "fixed";
tb.border = 1;
tb.borderColor = "#f0f0f0";
tb.cellSpacing = 0;
tb.cellPadding = 1;
tb.setAttribute("accoc",id + "__combo_contain");

tb.onclick = function(){tb.focus();me.show();}
tb.onmouseover = function(){
this.borderColor = "#316ac5"; /*IE*/
this.style.border = "#316ac5 1px solid"; /* Safari, Opera and Mozilla */
}
tb.onmouseout = function(){
this.borderColor = "#f0f0f0"; /*IE*/
this.style.border = "#f0f0f0 1px solid"; /* Safari, Opera and Mozilla */
}
tb.onblur=function(){
var active = document.activeElement;
var stopHide = false;

if(active!=null){
if(active.tagName =="TD"){
while(active!=null&&active.tagName!="TABLE"){
active = active.parentNode;
}
}
var ac = active.getAttribute("accoc");
if(ac!=null&&typeof(ac)!="undefined"&&ac==id + "__combo_contain"){
stopHide = true;
}
}
if(stopHide==false){
me.hide();
}
}


pl = document.createElement("div");
o.appendChild(pl);
pt = document.createElement("table");
pl.appendChild(pt);

var w,l,t,h;

w = me.handle.getBoundingClientRect().right - me.handle.getBoundingClientRect().left;
l = me.handle.getBoundingClientRect().left-2;
t = me.handle.getBoundingClientRect().bottom-2;

pl.style.position = "absolute";
pl.style.top = t;
pl.style.left = l;
pl.style.width = w;

pl.style.overflowY = "auto";
pl.style.overflowX = "hidden";
pl.style.backgroundColor = "#ffffff";
pl.style.border = "1px solid #f0f0f0";
pl.style.display = "none";
pl.style.padding = "0";
pl.setAttribute("accoc",id + "__combo_contain"); /* for scrolling */
pl.onblur = me.handle.onblur;
pl.onselectstart = function(){return false;}
pl.onfocus = function(){ me.handle.focus();}

pt.style.borderCollapse ="collapse";
pt.style.fontSize ="9pt";
pt.style.width = "100%";
pt.border = 0;
pt.cellSpacing = 0;
pt.cellPadding = 1;

hv = document.createElement("input"); /* Create hidden input for submit */
hv.type = "hidden";
hv.name = id + "__combo_hiden_value";
hv.id = id + "__combo_hiden_value";

o.appendChild(hv);

}

this.add = function(op){
var tr = pt.insertRow();
var tc = tr.insertCell();
var dv = document.createElement("div");
tc.appendChild(dv);

dv.style.width = "100%";
dv.style.border = "1px solid #f0f0f0";
dv.style.padding = "1 1 1 1";
dv.style.cursor = "hand";
dv.style.wordBreak = "break-all";
dv.style.wordWrap = "break-word";
dv.innerHTML = op.text;
dv.onmouseout = function(){this.style.border = "1px solid #f0f0f0";}
dv.onmouseover= function(){this.style.border = "1px solid #316ac5";}
dv.onmousedown = function(){var nn = this;while(nn!=null&&nn.tagName!="TR"){nn = nn.parentNode;}me.setIndex(nn.rowIndex);} /*when you use onclick event,the event while be ignored*/

if(this.selectedIndex<0){ /*set the first option for default*/
this.setIndex(0);
}

this.options[this.options.length] = op;

/*
* adjust panel height
*/
if(this.options.length>10)
{
pl.style.height = "200px";
}
}

/* OnClick Event */
this.onclick = function(){
}

/* OnChange Event */
this.onchange = function(){
}

this.setIndex = function(index){
if(index>=0&&index<this.options.length){
var op = this.options[index];
this.selectedIndex = index;
this.value = hv.value;
this.text = op.text;
ct.innerHTML= toText(op.text);
hv.value = op.value; /*for submit*/
this.onchange(); /* fire event */
}else{
this.selectedIndex = -1;
this.value = "";
this.text = "";
hv.value = "";
ct.innerText= "";
this.onchange(); /* fire event */
}
}

function toText(txt){ /*inner function*/
var o = document.createElement("div");
o.innerHTML = txt;
var s = o.innerText;

delete o;
o = null;
return s;
}

this.getText = function(i){
var item = -1;
if(i==null&&typeof(i)=="undefined"){
item = this.selectedIndex;
}else{
item = i;
}

if(this.options.length>0&&item>=0&&item<this.options.length){
return toText(this.options[item].text);
}else{
return undefined;
}
}

this.show=function(){
this.opened = !this.opened;
if(this.opened&&this.options.length>0){
pl.style.display = "";
}else{
pl.style.display = "none";
}
}

this.hide=function(){
this.opened = false;
pl.style.display = "none";
}

this.clear = function(){
this.hide();
this.setIndex(-1);
this.options.length = 0;
for(var i=pt.rows.length-1;i>=0;i--){
pt.deleteRow();
}
}

this.removeAt = function(index){
if(index>=0&&index<this.options.length){
this.hide();
this.options.splice(index,1);
pt.deleteRow(index);

if(index<=this.selectedIndex){
if(this.options.length>0){
if(index<this.options.length){
this.setIndex(index);
}else{
this.setIndex(this.options.length-1);
}
}else{
this.setIndex(-1);
}
}

if(this.options.length<10){
pl.style.height = "";
}
}
}
}

//-->
</SCRIPT>
...全文
328 12 打赏 收藏 转发到动态 举报
写回复
用AI写文章
12 条回复
切换为时间正序
请发表友善的回复…
发表回复
ttyp 2007-01-25
  • 打赏
  • 举报
 回复
w78z007()：
选项里图片可以自己可以加HTML就可以，但是文本里不行，但是如果需要也可以改造
w78z007 2007-01-25
  • 打赏
  • 举报
 回复
如果SELECT框里再加点图片就更好了
w78z007 2007-01-25
  • 打赏
  • 举报
 回复
不错啊
liuph3000 2007-01-25
  • 打赏
  • 举报
 回复
不错
ttyp 2007-01-25
  • 打赏
  • 举报
 回复
另外这个select是可以提交的
woneinwy 2007-01-25
  • 打赏
  • 举报
 回复
不错不错 。留几个赋值的接口
galant2008 2007-01-25
  • 打赏
  • 举报
 回复
不错
ttyp 2007-01-24
  • 打赏
  • 举报
 回复
FX需要花太多力气去做，说白了这个是适合我项目的一个控件罢了，呵呵

键盘功能，可编辑功能不是没想，待完善吧，不影响使用
haothing 2007-01-24
  • 打赏
  • 举报
 回复
不错不错 建议用HTC封装
JK_10000 2007-01-24
  • 打赏
  • 举报
 回复
在另一个相类似贴子里的回复，拷过来贴一遍，权当一顶
--------------
ie里，select虽说是个怪胎，可也有些地方值得学习：
tab键的应用
上下键的应用
键入第一个字母的查询
-------------
lion98 2007-01-24
  • 打赏
  • 举报
 回复
IE only
在IE下效果不错，可FX就。。。。。。。。。。。。。
ttyp 2007-01-24
  • 打赏
  • 举报
 回复
<BODY>
<strong>Style:</strong>
<div id="demo"></div>
DSGDFGSDFG
<p></p><br>
<strong>Font:</strong>
<div id="demo1"></div>



<SCRIPT LANGUAGE="JavaScript">
<!--
var de = new CLASS_COMBO('demo',228);
de.add(new Option("<font color='red'>Red Word</font>","a"));
de.add(new Option("<strong>Strong Word</strong>","b"));
de.add(new Option("<font size=6>Big Word</font>","c"));
de.add(new Option("<u>Underline</u>","d"));
de.add(new Option("<STRIKE>Strike Word</STRIKE>","e"));
de.add(new Option("<cite>Cite Word</cite>","f"));
de.add(new Option("<span style='background-color: black;color:white;width:100%'>Black Background</span>","g"));
de.add(new Option("<marquee>hello</marquee>","h"));


de.add(new Option("long word test","i"));
de.add(new Option("<strong>Strong Word</strong>","b"));
de.add(new Option("<font size=6>Big Word</font>","c"));
de.add(new Option("<u>Underline</u>","d"));
de.add(new Option("<STRIKE>Strike Word</STRIKE>","b"));
de.add(new Option("<cite>Cite Word</cite>","c"));
de.add(new Option("<span style='background-color: black;color:white;width:100%'>Black Background</span>","c"));

/*
* Set Index Demo
*/
de.setIndex(1);

/*
* OnChange Event Demo
*/
de.onchange = function(){
document.title =(de.getText());
}


var df = new CLASS_COMBO('demo1',128);

df.add(new Option("<font face='Arial'>Arial</font>","h"));
df.add(new Option("<font face='Arial Black'>Arial Blak</font>","i"));
df.add(new Option("<font face='Comic Sans MS'>Comic Sans MS</font>","j"));
df.add(new Option("<font face='Courier New'>Courier New</font>","k"));
df.add(new Option("<font face='Monotype Corsiva'>Monotype Corsiva</font>","l"));
df.add(new Option("<font face='MS Sans Serif'>MS Sans Serif</font>","p"));
df.add(new Option("<font face='Verdana'>Verdana</font>","q"));

//-->
</SCRIPT>
<p></p>
<br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<input type=button value="setIndex" onclick="de.setIndex(3)"> <input type=button value="remove" onclick="de.removeAt(0)"> <input type=button value="clear" onclick="de.clear()"> <input type=button value="text" onclick="alert(de.text)"> <input type=button value="getText" onclick="alert(de.getText())"> <input type=button value="value" onclick="alert(de.value)">
</BODY>
</HTML>
Powerbuilder9.0实用教程源代码
Powerbuilder 9.0实用教程》源代码 1.本源代码包括以下章节源代码： 第01章 认识PowerBuilder 9.0、第05章 创建应用程序、第06章 创建窗体、第07章 创建菜单和工具栏、第10章 应用程序的调试和发布、第11章 典型小型实例赏析、第12章 图书管理系统实例和第13章 学生选课系统实例。 2.源代码使用方法参见《附录A 源代码的使用方法》文件。 __________________________________________________________________ 注意： 1.建议读者下载源文件后，将该源文件进行备份，读者使用副本源文件进行学习，这样一但出问题就不用再从网上下载了。 2.将源文件中“数据库文件”文件夹一定要复制到C盘根目录下，这样才能保证您连接数据库文件成功，具体方法参见《附录A 源代码的使用方法》。 对于书中源代码除了数据库外其他都能正常使用，而示例中数据库需要用户在自己的计算机上注册后才能使用，如果不注册数据源就运行应用程序是检索不到任何数据的，下面以连接学生选课系统数据库为例具体介绍如何连接数据库文件。 第1章 认识PowerBuilder 9.0 1 1.1 PowerBuilder 9.0简介 1 1.1.1 中国软件业现状 1 1.1.2 为什么要学习PowerBuilder 9.0 2 1.1.3 PowerBuilder的概述 2 1.1.4 PowerBuilder的特点 3 1.1.5 PowerBuilder 9.0的新特性 6 1.2 安装PowerBuilder 9.0软硬件需求 9 1.2.1 软件环境需求 9 1.2.2 硬件环境需求 9 1.3 PowerBuilder 9.0功能界面介绍 10 1.3.1 PowerBuilder 9.0界面简介 10 1.3.2 常用功能菜单 10 1.4 工作环境设置 16 1.4.1 工具栏的设置 16 1.4.2 窗口排列 19 1.4.3 快捷键设置 20 1.4.4 系统选项设置 21 1.5 用5分钟制作一个简单实例 22 1.5.1 实例运行界面 22 1.5.2 新建一个工作空间对象 22 1.5.3 新建一个应用程序对象 23 1.5.4 创建窗体 23 1.5.5 为应用程序添加open事件代码 25 1.6 小结 27 1.7 习题 27 第2章 编程基础知识 28 2.1 PowerScript脚本语言书写规则 28 2.1.1 忽略大小写 28 2.1.2 语句的断行、续行和分割 28 2.1.3 注释 29 2.2 数据类型 29 2.3 变量和作用域 30 2.3.1 定义变量 30 2.3.2 引用变量 30 2.3.3 变量的作用域 30 2.4 操作符 31 2.5 标识符 32 2.5.1 标识符的构成 32 2.5.2 匈牙利命名法 32 2.6 常用代词 33 2.7 控制语句 34 2.7.1 判断语句 34 2.7.2 循环语句 36 2.8 结构 38 2.8.1 创建结构 38 2.8.2 使用结构 40 2.9 函数 40 2.9.1 Open（）和Close（）函数 41 2.9.2 MessageBox（）函数 41 2.9.3 类型转换函数 41 2.9.4 类型判断函数 42 2.9.5 其他函数 42 2.10 ODBC数据源与专用数据库接口 43 2.10.1 什么是ODBC数据源 43 2.10.2 专用数据库接口 43 2.10.3 连接数据库 44 2.10.4 配置ODBC 48 2.11 SQL语言 49 2.11.1 SQL语言的格式 49 2.11.2 在PowerBuilder 9中使用SQL语句 51 2.12 类和对象的概念 56 2.12.1 继承 57 2.12.2 重载和多态性 57 2.12.3 封装 57 2.12.4 属性、事件和函数 57 2.13 在PowerBuilder 9.0中实现面向对象编程 58 2.13.1 创建对象 58 2.13.2 设置对象属性 59 2.13.3 编写事件代码 59 2.13.4 实现继承对象 60 2.14 用户对象和用户事件 61 2.14.1 用户对象分类 61 2.14.2 定义用户对象 62 2.14.3 使用用户对象 64 2.14.4 用户事件 66 2.15 小结 67 2.16 习题 68 第3章 创建数据库 69 3.1 数
React-select：ReactJS下拉选择控件的深入实践
React-select 是一个基于React的可访问的单选和多选下拉选择框组件。它旨在提供一个简洁的用户界面和强大的功能，同时保持灵活的可定制性。库的设计目标是使开发者能够轻松集成和使用，同时能够适应各种不同的应用场景。return (<Select/>React-select支持各种特性，包括但不限于异步数据加载、自定义过滤逻辑、以及多值选择。它还提供了丰富的样式定制接口，使得开发者可以根据自己的UI/UX需求调整组件的外观。
打造Vista风格日历控件的C#开发实战指南
本文还有配套的精品资源，点击获取 简介：Vista风格日历控件是基于C#开发的UI组件，具有Windows Vista的经典视觉效果，易于使用且高度可定制。它支持日期选择、事件处理等，并可集成到各种Windows应用程序中。控件提供自定义外观、丰富的开发文档、良好的兼容性、源代码访问以及性能优化，旨在提升用户体验和软件界面的现代感。本实战指南将引导开发者学习如何有效使用和定...
兼容全浏览器的个性化select下拉框设计与实现
在实际开发中，<select>元素的尺寸控制是实现布局一致性的第一步。默认情况下，<select>会根据内容自动调整宽度，这在固定容器或栅格系统中极易导致错位。为此，应显式设置width属性以锁定控件尺寸：/* 与height匹配，确保文本垂直居中 */属性说明推荐值width控制下拉框整体宽度固定像素（如200px）或百分比（如100%height设定控件高度，影响点击热区大小至少36px以符合无障碍点击区域标准。
精美的XP风格VB日历控件设计与实现
htmltable {th, td {th {pre {简介：在Visual Basic（VB）环境下设计的日历控件采用微软Windows XP视觉样式，为应用程序提供直观、美观的日期选择功能。控件源码公开，便于开发者根据需求定制和扩展功能，增强用户体验。控件集成日历选择、日期范围选择、日期验证等功能，适用于多种软件应用，提升日历功能的实用性和便捷性。
JavaScript

87,994

社区成员

224,689

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章