jQuery Combobox 扩展 -

wister

浏览: 85163 次
性别:
来自: 北京

最近访客更多访客>>

feiyue81

deng131

fengaodlw

woshiliukun

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jQuery Combobox 扩展

博客分类：

javascript

jQuery UI JavaScript CSS Nokia

原版：http://jqueryui.com/demos/autocomplete/#combobox

感谢：http://waiting.iteye.com/blog/714655 （不要拍我啊 :D :D ）

主要修改：

1.修改了展开的button为img;

2.在使用级联更新时，为清空input的数据，将title属性替换为combobox_title为input的ID,可以在其他时候定位控件;

3.有很多样式写在了js里，大家可以抽取出来;

水平有限，实在不好意思，希望大家能继续完善此控件！

样例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script type="text/javascript" src="js/jquery.1.4.2.js"></script>
	<script type="text/javascript" src="js/jquery-ui.min.js"></script>
	<script type="text/javascript" src="js/jquery-ui-i18n.js"></script>
	<script type="text/javascript" src="js/jquery-combobox.js"></script>
	<link type="text/css" href="css/smoothness/jquery-ui.css" rel="stylesheet" />
<style> 
body,p,ul,li,input,h1,h2,dl,dd,dt,textarea,table,td,tr,form{padding:0px; margin:0px; list-style:none;}
body{font:12px \5b8b\4f53; color:#333; background:#6FA6CC;}
button.comboboxButton {width:2em; margin-left: -1px;}
button.comboboxButton .ui-button-text {display:block; line-height:1;}
.ui-autocomplete-input {margin:0; padding:0.3em 0 0.31em 0.3em; *padding:0.38em 0 0.46em 0.3em;}
ul.ui-autocomplete {max-height:300px; width:200px; overflow-x: hidden; overflow-y: auto; padding:2px;}/*firefox*/
* html ul.ui-autocomplete {height:200px; width:200px; overflow-x: hidden; overflow-y: auto; padding:2px;}/*ie6*/
*+html ul.ui-autocomplete {max-height:200px; width:200px; overflow-x: hidden; overflow-y: auto; padding:2px;}/*ie7*/
ul.ui-autocomplete {max-height:200px; width:200px; overflow-x: hidden; overflow-y: auto; padding:2px;}/*ie8*/
</style>
<script>			
</script>
</head>
<body>
<br/>
选择项:
<select id="drivercar" name="drivercar_id">
	<option value="1">louie</option>
	<option value="2">笔记本</option>
	<option value="3">zhangsan</option>
	<option value="4">lisi</option>
	<option value="5">iphone</option>
	<option value="6">nokia</option>
	<option value="7">诺基亚</option>
	<option value="8">谷歌</option>
	<option value="9">google</option>
	<option value="10" selected="selected">盗梦空间</option>
	<option value="11">血钻</option>
	<option value="12">剪刀手爱德华</option>
	<option value="13">A3</option>
	<option value="14">Audi TT</option>
</select>
<script> 
	$(document).ready(function(){
		//$('#drivercar').combobox({size: 30, title: 'drivercar'});
		$('#drivercar').combobox();
	});
</script>
</body>
</html>