打造个性化的Select(可编辑)

由于系统自带的Select实在是不好用,这里我用javascript写了一个全新的Select.

功能:
  1.可编辑的Select
  2.长度可以随意修改
  3.可以遮盖系统Select
  4.支持forms 
  5.支持CSS修改外观
  6.修正在IE 5.0上运行出错的问题
  7.支持使用js脚本
使用方法
[b]var 实体化变量=new editselect(名字,长度,默认字符串,宽度,高度,只读)[/b]
[b]实体化变量.add(option数值,JS脚本)[/b]

这只是一个测试版,很多功能没有完善,比如没有区分value和caption等等,希望大家提出宝贵意见.

EditSelect

function isIE(){
a=navigator.appVersion.split(";")
b=a[1].split(" ")
return parseFloat(b[2])
}

if (isIE()

selectÁÐ表

'
}
else
{
scHTML='

selectÁÐ表

'
}

document.write(scHTML)
vDiv=selectcontent
vDivHtml=selecthtml

function editselect(name,size,defaulttext,width,height,readonly){
var combo=this;
this.options=new Array();
this.oj=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='

'
+'

'
+'

6

'
+'

'
document.write(esHTML)
this.sbutton=eval("document.all."+this.buttonname)

if (this.readonly==1) eval("document.all."+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='

'
for (i=0;i

'+combo.options[i]
}
vHTML+="

"
vDivHtml.innerHTML=vHTML

vtop=pDiv.offsetTop+pDiv.offsetHeight
vleft=pDiv.offsetLeft+2

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

.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
}

可编辑的Select var sel1=new editselect("select1","25","可编辑的Select","");
sel1.add("这是一个可以编辑的Select")
sel1.add("支持CSS")
sel1.add("可以通过CSS,修改外形")
sel1.add("突破原来的Select诸多限制")
长度可以随意修改
可以设置为只读

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")

可以遮盖系统Select
var sel3=new editselect("select3","25","可以遮盖系统Select","",41);
sel3.add("这是一个可以编辑的Select")
sel3.add("支持CSS")
sel3.add("可以通过CSS,修改外形")
sel3.add("突破原来的Select诸多限制")

  系统的Select 

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

(0)

相关推荐

  • 打造个性化的Select(可编辑)

    由于系统自带的Select实在是不好用,这里我用javascript写了一个全新的Select. 功能:   1.可编辑的Select   2.长度可以随意修改   3.可以遮盖系统Select   4.支持forms    5.支持CSS修改外观   6.修正在IE 5.0上运行出错的问题   7.支持使用js脚本 使用方法 [b]var 实体化变量=new editselect(名字,长度,默认字符串,宽度,高度,只读)[/b] [b]实体化变量.add(option数值,JS脚本)[/b]

  • 打造个性化右键菜单—注册表使用全攻略之十三

    打造个性化右键菜单-注册表使用全攻略之十三 鼠标的右键选单中有很多快捷命令,给用户日常操作带来了极大的方便.但是,系统不可能做到将您所希望使用的命令都集成到右键选单中,有时您需要的命令根本就不存在,这就只能靠我们自己动手添加进去了.那么就让我们来看几个添加快捷命令的实例吧,只要把握了基本方法,我们就可以触类旁通,添加其他命令. 添加"关闭计算机" 一般我们都是通过点"开始"→"关闭系统"→"关闭计算机"→"确定&qu

  • 用jquery与css打造个性化的单选框和复选框

    上图是经过css和jquery美化后的效果,怎么样呢?是不是很爽啊!这个是我从另一个脚本库看到的一个效果,觉得挺不错的,然后就用jquery自己实现了一个.供大家鉴赏! 话不多说,直接上代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  • python基于爬虫+django,打造个性化API接口

    简述 今天也是同事在做微信小程序的开发,需要音乐接口的测试,可是用网易云的开放接口比较麻烦,也不能进行测试,这里也是和我说了一下,所以就用爬虫写了个简单网易云歌曲URL的爬虫,把数据存入mysql数据库,再利用django封装装了一个简单的API接口,给同事测试使用. 原理 创建django项目,做好基础的配置,在views里写两个方法,一个是从mysql数据库中查数据然后封装成API,一个是爬虫方法,数据扒下来以后,通过django的ORM把数据插入到mysql数据库中. 这里的路由也是对应两

  • Jquery插件之打造自定义的select标签

    首先看下效果 复制代码 代码如下: <head> <title></title> <link type="text/css" rel="Stylesheet" href="JQSelect.css" /> <script type="text/javascript" src="jquery-1.2.6.js"></script> <

  • 打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)

    最近做项目,我负责做网页前端,客户需要利用触摸屏进行操作,不外接鼠标键盘,但要求能录入文字,包括数字,英文,中文.思考了一下,决定用JS实现虚拟键盘. 首先上网搜索了一下JS虚拟键盘,在经过仔细筛选后,相中了VirtualKeyboard,一款功能强大的JS虚拟键盘插件. 先简单介绍一下VirtualKeyboard,它内置了100多种键盘布局和200多种输入法,9套可选皮肤方案,而且支持自建输入法,功能相当强大. 先附上下载地址,目前的最新版本3.94:http://www.coralloso

  • laravel-admin解决表单select联动时,编辑默认没选上的问题

    今天在开发公司一个功能时,公司开发环境用的是laravel-admin,因为需要用上select联动,所以根据文档说明进行开发,并成功的使用上了,代码我就不重复,大家可以去参考laravel-admin官网的说明. 首先我们找到select的js,路径:跟目录/vendor/encore/laravel-admin/src/Form/Field下的Select.php文件,找到下面代码: $script = <<<EOT $(document).on('change', "{$

  • jqGrid 学习笔记整理——进阶篇(一 )

    在浏览导航栏添加所需按钮 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>DEMO</title> <link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css" /> <link rel=&

  • Java中jqGrid 学习笔记整理——进阶篇(二)

    相关阅读: Java中jqGrid 学习笔记整理--进阶篇(一) 本篇开始正式与后台(java语言)进行数据交互,使用的平台为 JDK:java 1.8.0_71 myEclisp 2015 Stable 2.0 Apache Tomcat-8.0.30 Mysql 5.7 Navicat for mysql 11.2.5(mysql数据库管理工具) 一.数据库部分 1.创建数据库 使用Navicat for mysql创建数据库(使用其他工具或直接使用命令行暂不介绍) 2. 2.创建表 双击打

  • 国外十大最流行的PHP框架排名

    以下为十个目前最流行的基于MVC设计模式的PHP框架. 1. Yii Yii是一个基于组件的高性能的PHP的框架,用于开发大规模Web应用.Yii采用严格的OOP编写,并有着完善的库引用以及全面的教程.从MVC,DAO/ActiveRecord,widgets,caching,等级式RBAC,Web服务,到主体化,I18N和L10N,Yii提供了今日Web 2.0应用开发所需要的几乎一切功能.而且这个框架的价格也并不太高.事实上,Yii是最有效率的PHP框架之一. 2. CodeIgniter

随机推荐