liuyt611
- 浏览: 26105 次
- 性别:
- 来自: 北京
-
文章分类
最新评论
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS+CSS美化的漂亮Select列表框</title>
<style type="text/css">
body{background:#CFDFEF;font:12px/150% "Lucida Grande", Arial, Verdana, Helvetica, sans-serif;}
#uboxstyle .select_box{width:100px;height:24px;}
#macstyle .select_box{width:91px;height:24px;}
#tm2008style .select_box{width:102px;height:24px;}
#uboxstyle div.tag_select{display:block;color:#79A2BD;width:80px;height:24px;background:transparent url("/jscss/demoimg/200907/ubox-select.gif") no-repeat 0 0;padding:0 10px;line-height:24px;}
#uboxstyle div.tag_select_hover{display:block;color:#79A2BD;width:80px;height:24px;background:transparent url("/jscss/demoimg/200907/ubox-select.gif") no-repeat 0 -24px;padding:0 10px;line-height:24px;}
#uboxstyle div.tag_select_open{display:block;color:#79A2BD;width:80px;height:24px;background:transparent url("/jscss/demoimg/200907/ubox-select.gif") no-repeat 0 -48px;padding:0 10px;line-height:24px;}
#uboxstyle ul.tag_options{position:absolute;padding:0;margin:0;list-style:none;background:transparent url("/jscss/demoimg/200907/ubox-select.gif") no-repeat right bottom;width:100px;padding:0 0 5px;margin:0;}
#uboxstyle ul.tag_options li{background:transparent url("/jscss/demoimg/200907/ubox-select.gif") repeat-y -100px 0;display:block;width:80px;padding:0 10px;height:24px;text-decoration:none;line-height:24px;color:#79A2BD;}
#uboxstyle ul.tag_options li.open_hover{background:transparent url("/jscss/demoimg/200907/ubox-select.gif") no-repeat 0 -72px;color:#fff}
#uboxstyle ul.tag_options li.open_selected{background:transparent url("/jscss/demoimg/200907/ubox-select.gif") no-repeat 0 -96px;color:#fff}
#macstyle div.tag_select{display:block;color:#000;width:71px;height:24px;background:transparent url("/jscss/demoimg/200907/mac-select.gif") no-repeat 0 -24px;padding:0 10px;line-height:24px;}
#macstyle div.tag_select_hover{display:block;color:#000;width:71px;height:24px;background:transparent url("/jscss/demoimg/200907/mac-select.gif") no-repeat 0 0;padding:0 10px;line-height:24px;}
#macstyle div.tag_select_open{display:block;color:#000;width:71px;height:24px;background:transparent url("/jscss/demoimg/200907/mac-select.gif") no-repeat 0 -48px;padding:0 10px;line-height:24px;}
#macstyle ul.tag_options{position:absolute;margin:-4px 0 0;list-style:none;background:transparent url("/jscss/demoimg/200907/mac-select.gif") no-repeat left bottom;width:100px;padding:0 0 5px;margin:0;width:71px;}
#macstyle ul.tag_options li{background:transparent url("/jscss/demoimg/200907/mac-select.gif") repeat-y -91px 0;display:block;width:61px;padding:0 0 0 10px;height:24px;text-decoration:none;line-height:24px;color:#000;}
#macstyle ul.tag_options li.open_hover{background:transparent url("/jscss/demoimg/200907/mac-select.gif") no-repeat -162px 0;color:#000}
#macstyle ul.tag_options li.open_selected{background:transparent url("/jscss/demoimg/200907/mac-select.gif") no-repeat -162px -24px;color:#fff}
#tm2008style div.tag_select{display:block;color:#000;width:82px;height:22px;background:transparent url("/jscss/demoimg/200907/tm2008-select.gif") no-repeat 0 0;padding:0 10px;line-height:22px;}
#tm2008style div.tag_select_hover{display:block;color:#000;width:82px;height:22px;background:transparent url("/jscss/demoimg/200907/tm2008-select.gif") no-repeat 0 -22px;padding:0 10px;line-height:22px;}
#tm2008style div.tag_select_open{display:block;color:#000;width:82px;height:22px;background:transparent url("/jscss/demoimg/200907/tm2008-select.gif") no-repeat 0 -44px;padding:0 10px;line-height:22px;}
#tm2008style ul.tag_options{position:absolute;margin:0;list-style:none;background:transparent url("/jscss/demoimg/200907/tm2008-select.gif") no-repeat left bottom;width:100px;padding:0 0 1px;margin:0;width:80px;}
#tm2008style ul.tag_options li{background:transparent url("/jscss/demoimg/200907/tm2008-select.gif") repeat-y -102px 0;display:block;width:61px;padding:0 10px;height:22px;text-decoration:none;line-height:22px;color:#000;}
#tm2008style ul.tag_options li.open_hover{background:transparent url("/jscss/demoimg/200907/tm2008-select.gif") no-repeat 0 -88px;color:#000}
#tm2008style ul.tag_options li.open_selected{background:transparent url("/jscss/demoimg/200907/tm2008-select.gif") no-repeat 0 -66px;color:#19555F}
</style>
<script type="text/javascript">
var selects = document.getElementsByTagName('select');
var isIE = (document.all && window.ActiveXObject && !window.opera) ? true : false;
function $(id) {
return document.getElementById(id);
}
function stopBubbling (ev) {
ev.stopPropagation();
}
function rSelects() {
for (i=0;i<selects.length;i++){
selects[i].style.display = 'none';
select_tag = document.createElement('div');
select_tag.id = 'select_' + selects[i].name;
select_tag.className = 'select_box';
selects[i].parentNode.insertBefore(select_tag,selects[i]);
select_info = document.createElement('div');
select_info.id = 'select_info_' + selects[i].name;
select_info.className='tag_select';
select_info.style.cursor='pointer';
select_tag.appendChild(select_info);
select_ul = document.createElement('ul');
select_ul.id = 'options_' + selects[i].name;
select_ul.className = 'tag_options';
select_ul.style.position='absolute';
select_ul.style.display='none';
select_ul.style.zIndex='999';
select_tag.appendChild(select_ul);
rOptions(i,selects[i].name);
mouseSelects(selects[i].name);
if (isIE){
selects[i].onclick = new Function("clickLabels3('"+selects[i].name+"');window.event.cancelBubble = true;");
}
else if(!isIE){
selects[i].onclick = new Function("clickLabels3('"+selects[i].name+"')");
selects[i].addEventListener("click", stopBubbling, false);
}
}
}
function rOptions(i, name) {
var options = selects[i].getElementsByTagName('option');
var options_ul = 'options_' + name;
for (n=0;n<selects[i].options.length;n++){
option_li = document.createElement('li');
option_li.style.cursor='pointer';
option_li.className='open';
$(options_ul).appendChild(option_li);
option_text = document.createTextNode(selects[i].options[n].text);
option_li.appendChild(option_text);
option_selected = selects[i].options[n].selected;
if(option_selected){
option_li.className='open_selected';
option_li.id='selected_' + name;
$('select_info_' + name).appendChild(document.createTextNode(option_li.innerHTML));
}
option_li.onmouseover = function(){ this.className='open_hover';}
option_li.onmouseout = function(){
if(this.id=='selected_' + name){
this.className='open_selected';
}
else {
this.className='open';
}
}
option_li.onclick = new Function("clickOptions("+i+","+n+",'"+selects[i].name+"')");
}
}
function mouseSelects(name){
var sincn = 'select_info_' + name;
$(sincn).onmouseover = function(){ if(this.className=='tag_select') this.className='tag_select_hover'; }
$(sincn).onmouseout = function(){ if(this.className=='tag_select_hover') this.className='tag_select'; }
if (isIE){
$(sincn).onclick = new Function("clickSelects('"+name+"');window.event.cancelBubble = true;");
}
else if(!isIE){
$(sincn).onclick = new Function("clickSelects('"+name+"');");
$('select_info_' +name).addEventListener("click", stopBubbling, false);
}
}
function clickSelects(name){
var sincn = 'select_info_' + name;
var sinul = 'options_' + name;
for (i=0;i<selects.length;i++){
if(selects[i].name == name){
if( $(sincn).className =='tag_select_hover'){
$(sincn).className ='tag_select_open';
$(sinul).style.display = '';
}
else if( $(sincn).className =='tag_select_open'){
$(sincn).className = 'tag_select_hover';
$(sinul).style.display = 'none';
}
}
else{
$('select_info_' + selects[i].name).className = 'tag_select';
$('options_' + selects[i].name).style.display = 'none';
}
}
}
function clickOptions(i, n, name){
var li = $('options_' + name).getElementsByTagName('li');
$('selected_' + name).className='open';
$('selected_' + name).id='';
li[n].id='selected_' + name;
li[n].className='open_hover';
$('select_' + name).removeChild($('select_info_' + name));
select_info = document.createElement('div');
select_info.id = 'select_info_' + name;
select_info.className='tag_select';
select_info.style.cursor='pointer';
$('options_' + name).parentNode.insertBefore(select_info,$('options_' + name));
mouseSelects(name);
$('select_info_' + name).appendChild(document.createTextNode(li[n].innerHTML));
$( 'options_' + name ).style.display = 'none' ;
$( 'select_info_' + name ).className = 'tag_select';
selects[i].options[n].selected = 'selected';
}
window.onload = function(e) {
bodyclick = document.getElementsByTagName('body').item(0);
rSelects();
bodyclick.onclick = function(){
for (i=0;i<selects.length;i++){
$('select_info_' + selects[i].name).className = 'tag_select';
$('options_' + selects[i].name).style.display = 'none';
}
}
}
</script>
</head>
<body>
<form id="form" name="form" method="post" action="">
<br /><br />
<div id="uboxstyle">
<h3 style="color:#6D93AB;font-size:14px;">U-Box Style</h3>
<select name="language" id="language">
<option value="English" selected="selected">English</option>
<option value="简体中文" >简体中文</option>
<option value="日本語" >日本語</option>
<option value="Deutsch" >Deutsch</option>
<option value="Español" >Español</option>
<option value="Polski" >Polski</option>
<option value="Português" >Português</option>
<option value="Svenska" >Svenska</option>
</select>
</div>
<br /><br />
<h3 style="color:#6D93AB;font-size:14px;">Mac Style</h3>
<div id="macstyle">
<select name="language_mac" id="language_mac">
<option value="English" selected="selected">English</option>
<option value="简体中文" >简体中文</option>
<option value="日本語" >日本語</option>
<option value="Deutsch" >Deutsch</option>
<option value="Italiano" >Italiano</option>
<option value="Polski" >Polski</option>
<option value="Português" >Português</option>
<option value="Svenska" >Svenska</option>
</select>
</div>
<br /><br />
<h3 style="color:#6D93AB;font-size:14px;">TM2008 Style</h3>
<div id="tm2008style">
<select name="language_tm2008" id="language_tm2008">
<option value="English">English</option>
<option value="简体中文" >简体中文</option>
<option value="日本語" >日本語</option>
<option value="Français" >Français</option>
<option value="Italiano" >Italiano</option>
<option value="Polski" >Polski</option>
<option value="Português" >Português</option>
<option value="Svenska" >Svenska</option>
</select>
</div>
</form>
</body>
</html>
来源http://www.codefans.net/jscss/code/1354.shtml
分享到：
发表评论
-
获取当前鼠标点击的位置
2015-05-13 14:39 0<img src="images/a.gi ... -
判断checkbox是否选中
2015-05-12 11:22 631$('#checker').click(function( ... -
ie67中li下的间隙问题
2014-03-21 17:42 546一、以下是引发此BUG的条件： 必要条件： l ... -
含滚动条的内容区域，文字居中问题 版心问题
2014-01-23 14:53 0最近在工作中遇到了一些版心问题，下面简单的记录一下。 ht ... -
IE6下溢出多余文字--多了一只猪
2013-10-29 14:22 367在IE6中，会无缘无故多出几个字儿来，这是IE6BUG 。 ... -
遇到的问题
2013-10-21 17:45 0影视课堂： 1、影视课堂--影视课堂 当含有滚动条的一个块 ... -
点击空白处下拉列表隐藏，全选，反选，不选
2013-08-13 09:44 728<!DOCTYPE html PUBLIC &quo ... -
美化单个checkbox
2013-08-02 10:37 498<script language="jav ... -
美化type="file"
2013-08-02 10:30 542<div class="fileInput ... -
ie6兼容png前置与背景
2013-07-23 11:16 704次方法需要用到一个插件：DD_belatedPNG.js ... -
美化select
2013-07-29 13:46 543需要用到一个selectbox.js插件，在这里直接粘贴到代码 ... -
下载--美化select
2013-07-29 13:47 479<!DOCTYPE html PUBLIC &quo ... -
视频播放 ---滚动条的设置
2013-07-29 13:52 855此方法需要引入一个插件：jscroll.js. 以 ... -
CSS 子div设置float之后父div无法自适应高度问题 --清除浮动
2013-04-18 17:31 0向父容器的末尾再插入一个额外的标签，并令其清除浮动（clear ... -
同一行图片和文字垂直居中以及图片和文字间隙问题
2013-04-04 23:47 14741、垂直居中： 如果一个div中含有图片和文字，并且 ... -
透明度相关问题
2013-04-04 04:48 0背景渐变问题： http://hi.baidu.com/dii ... -
ie6兼容-------Xun
2013-07-23 10:33 6191、float属性对margin的影响-----双边距问题 ...
相关推荐
在网页开发中，选择框（Select）是常见的一种交互...在实际项目中，可以根据具体需求选择合适的 jQuery select 美化插件，如 Select2、Chosen 等，它们都有丰富的文档和示例，便于开发者快速上手和集成到自己的项目中。
Bootstrap Select 是一个基于流行的前端框架 Bootstrap 的扩展组件，专门用于增强和美化 HTML 的 `<select>` 元素。在Bootstrap框架的基础上，它提供了丰富的定制选项、多选、分组、搜索过滤、可点击的选项等特性，...
市场上有很多优秀的美化select插件，如`Select2`、`Chosen`、`jQuery SelectBoxIt`等。它们各具特色，开发者可以根据项目的具体需求，比如是否支持多选、搜索功能、国际化等，来选择合适的插件。 综上所述，基于...
- **安装**：你可以通过npm、bower或者直接下载JS和CSS文件来获取`select2`。 - **基本应用**：在HTML中引入`select2.css`和`select2.js`，然后通过JavaScript初始化`select2`，如`$("#mySelect").select2();`。 ...
之前我们分享过很多款非常漂亮而且实用的jQuery美化版Select下拉框插件，比如...今天我们要给大家介绍另一款基于jQuery的自定义美化Select下拉框插件，它的配置十分简单，引用插件库后用几行jQuery代码初始化即可。
这时，我们就需要借助jQuery这样的JavaScript库来对`select`进行美化。本文将详细介绍如何在jQuery基础上美化`select`，并实现自定义函数，同时确保原有的功能如取值、增删改等操作不受影响。 首先，我们需要引入...
**jQuery Select2 美化插件详解** `jQuery Select2` 是一款广泛使用的JavaScript库，专门用于美化和增强HTML `<select>` 元素。它提供了丰富的功能和自定义选项，使得原本简单的下拉选择框变得功能强大且视觉上更具...
2. **数据绑定**：将`<select>`的`<option>`元素的文本和值映射到自定义元素的内部元素（如`<span>`），这样用户看到的选项就与原始`<select>`保持一致。 3. **事件处理**：监听自定义元素的点击事件，当用户点击...
Bootstrap Select 是一个流行的前端开发框架 Bootstrap 的扩展组件，专门用于增强和美化原生 HTML 下拉选择框。这个组件提供了一套完整的解决方案，让开发者能够轻松地实现具有多种功能和自定义选项的下拉选择菜单。...
5. **JavaScript库**：`select-lists4.js`可能是一个扩展了原生`<select>`功能的库，提供了更复杂的下拉菜单样式和行为。它可能包含对颜色状态支持的API，或者可以用来实现更高级的交互功能。 综上所述，实现...
在网页设计中，"select下拉菜单美化"是一个常见的需求，尤其在现代用户体验设计中，原始的...通过下载并研究"select下拉菜单美化.rar"，你可以学习到如何将平凡的HTML select元素转化为符合现代网页设计标准的组件。
- `select2css.js`可能是用于处理模拟Select的JavaScript代码，可能包含了点击事件监听、显示/隐藏下拉选项、选中项更新等功能。 - 例如，当用户点击模拟的Select时，可以显示一个由`div`元素构建的下拉菜单，并...
jQuery oform beta 0.1.5 - form 表单美化插件源代码 版权：zhang yang soft ... 浏览器支持：IE、Firefox、Opera , google chrome (谷歌) ... 时间: 2010-2-4 tags: jquery oform 表单 美化 插件 开源
首先，你需要在项目中引入jQuery库，然后下载SelectList Plugin的压缩包，包含CSS样式文件和JavaScript文件。将其放置在合适的位置，并在HTML文档中通过`<link>`和`<script>`标签引入，确保jQuery库在SelectList ...
2. 应用插件：在页面加载完成后，调用`$('select').niceSelect()`方法对需要美化的`<select>`元素应用插件。例如： ```html $(document).ready(function(){ $('select').niceSelect(); }); ``` 3. 自定义样式：...
下拉框的表单美化插件,mSelect.js源代码，mSelect 是一个含有漂亮下拉框、漂亮按钮的表单美化插件，支持下拉框的滑动展开、折叠，原下拉的onchange事件，selected/disabled属性，支持上下键选择，支持表单的reset，...
$('#your-select-element').select2(); }); ``` 如果你不想使用第三方插件，也可以自定义样式。通过CSS可以改变select的外观，但要注意由于浏览器的限制，直接修改原生select样式的效果有限。可以考虑创建一个...
jquery.selectbox.js select下拉菜单美化代码 jquery.selectbox.js select下拉菜单美化代码 jquery.selectbox.js select下拉菜单美化代码
2. **Mac 风格select框**：Mac风格的select框模仿了苹果系统中的下拉列表样式，可能包括半透明背景、圆角和特定的字体样式。这种风格的实现需要对按钮和选项列表进行精细的定制，以保持与苹果界面的一致性。此外，...