combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小_javascript技巧

简介
对于combox功能实现的最小化js代码,页面原型参考dojo的combox模样,支持键盘动作以及自动筛选,高亮等

API
初始化方法
编码方式
var c=new combox(document.getElementById('a'));
或者
var c=new combox(document.getElementById('a'),{ debug:true });
Css申明方式

<select class="combox" debug="true">
只要class中包含了combox即可,class中同时包含其他样式也可以。如

<select class="abc combox def">
亦可

配置参数说明
combox支持配置参数如下

debug: true/false,是否显示原始的select元素可见
searchMode: 0为模糊不区分大小写,1为前缀搜索不区分大小写
remoteSourceUrl:远程数据源url,支持json格式为下
[
{"text":"a","value":"b"}, {"text":"a1","value":"b1"}
]
remoteFilterUrl:筛选时候读取的远程url,参数为xxxx?asdasd=~!value!~,~!value!~为宏,在触发时会被替换为当前输入框的值
allowAnyValue:默认为false,不允许combox输入非options内的数据
displayValue:combox的显示值,当displayValue在combox的options里面能够找到与之对应的value时候,它显示该option的text,否则他显示displayValue
pleaseSelect:当combox的txtBox值为pleaseSelect的文本时,下拉时展开所有options
mouseDblClick:0为单击,1为双击
举例:

var c=new combox(document.getElementById('a'),{
allowAnyValue:true,
pleasSelect:'请选择',
debug:true })
或者
<select class="combox" allowAnyValue="true" pleasSelect="请选择" debug="true">
亦可

项目的google code地址

http://code.google.com/p/enhancehtml/

效果

演示地址http://demo.jb51.net/js/combox/demo.htm
下载地址http://jb51.net/jiaoben/25840.html

时间: 2024-10-25 09:28:08

combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小_javascript技巧的相关文章

常用Javascript函数与原型功能收藏(必看篇)_javascript技巧

如下所示: // 重复字符串 String.prototype.repeat = function(n) { return new Array(n+1).join(this); } // 替换全部 String.prototype.replaceAll = function(str1, str2) { return this.replace(new RegExp(str1, "gm"), str2); } // 清除空格 String.prototype.trim = function

WEB开发之注册页面验证码倒计时代码的实现_javascript技巧

近期因为开发一个新的H5+backbone 项目,验证输入手机号 验证码倒计时功能. #如上图所示 要实现验证码的倒计时的效果 首先做页面的布局 理清楚页面效果需要实现的逻辑思路 对手机号及验证码和密码做正则的规则校验 前端样式布局代码 <ul> <li class="phone bgImg"> <input type="text" id="phone" maxlength="11" placeh

JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)_javascript技巧

在项目开发过程中,也许你会遇这样的情况. 在某一Js文件中需要完成某一功能,但这一功能的大部分代码在另外一个Js文件中已经完成了,自己只需要调用这个方法再加上几句代码就可以实现所需的功能. 我们知道,在html中,利用<script language="javascript" type="text/javascript" src="./script.js"></script>引入的两个js是不可以相互调用的.那么该如何解决

js 刷新页面的代码小结 推荐_javascript技巧

1. Javascript 返回上一页 history.go(-1), 返回两个页面: history.go(-2); 2. history.back(). 3. window.history.forward()返回下一页 4. window.history.go(返回第几页,也可以使用访问过的URL) 例: <a href="javascript:history.go(-1);">向上一页</a> response.Write("<script

javascript 异步页面查询实现代码(asp.net)_javascript技巧

1. testlist.aspx页面: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <link rel="stylesheet" href="jscript/autoSuggest.css" type="text/css&q

页面右下角弹出提示框示例代码js版_javascript技巧

复制代码 代码如下: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+r

Foundation框架 &#8211; 快速创建跨平台的网站页面原型

整个一周都在揪心的猫事中度过.从十月底到现在的这段日子里,倒是越发懂得珍惜每天中片刻的宁静时光.有时会怀疑家里是否有时空漩涡一类的东西,不然钟表怎么会走的那么快,一点儿也不愿停下等等我的样子.一切都会好起来. 独白终了,进入正题.最近两篇译文都有涉及框架和跨平台方面的话题:前一篇中,我们了解了一些用于移动应用开发的前端框架工具:今天这篇的立足点偏向设计开发流程的上游,它将向我们展示怎样使用Foundation框架快速创建跨平台的.可以在多种设备上进行测试的响应式页面原型.下面开始正文部分. 开门

javascript不同页面传值的改进版_javascript技巧

其实原理也很简单.同样先通过getAttribute判断type属性,捕捉到按钮.然后在按钮onclick时把i通过url传入子页面. 复制代码 代码如下: <h2>input1</h2> <input type="text" /><input type="submit" /> <h2>input2</h2> <input type="text" /><in

JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述_javascript技巧

所以Javascript已经成为了web开发最最基本的要求之一了. 而在现实的敏捷开发中,我们通常会选择一个JS框架来取代繁琐的Native Javascript的编写.你会发现这样会节省很多的时间,写的代码也很清晰便捷.(当然在学生时代的是有也质疑过,用框架会对原生态的 Javascript理解不深入,其实这是多虑了的.在对框架的深入的同时,对原生的js也会理解的更透彻一些.成为一个精明的开发者,两者是相依相偎的.而最好的状态就是想Qzone前端一样,完全按照自己的需求开发出一套JS,CSS框