<%@ page trimDirectiveWhitespaces="true" %> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" buffer="none" %> <%@ taglib uri="/tags/website" prefix="website" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib uri="/tags/website-function" prefix="fn" %> <website:script src="js/jquery.js"/> <select id="open_bank" name='open_bank' class='select field'> <option value='中国人民银行'>中国人民银行</option> <option value='中国工商银行'>中国工商银行</option> <option value='中国农业银行'>中国农业银行</option> <option value='中国建设银行'>中国建设银行</option> <option value='中国银行'>中国银行</option> <option value='中国民生银行'>中国民生银行</option> <option value='中国光大银行'>中国光大银行</option> </select> <style> .selectContainer{ position:relative; width: 64px; height:32px; _zoom:1; z-index:1000; border:1px solid #CCC; background: none; padding-left: 15px; font-size:12px; line-height:32px; float: left; } .selectContainer .selectOption{ line-height:32px; height:32px; white-space:nowrap; overflow:hidden; border:none; width:60px; z-index:1000; display:inline-block; } .selectContainer .shows{ width: 10px; height: 10px; position: absolute; right: 8px; top: 14px; background: url('skins/arrow.png') #fff no-repeat; } .selectContainer ul{ position:absolute; width:80px; top:25px; left:-1px; border-bottom:1px solid #CCC; display:none; list-style:none; padding:0; } .selectContainer ul li{ text-align:center; border:1px solid #CCC; border-bottom:1px solid #EEE; border-top:none; line-height:25px; background:#FFF; cursor:pointer} .selectContainer ul li:hover{background:#F5F5F5} .selectContainer ul.dis{display:block!important;} .selectContainer ul.undis{display:noneimportant;} .zIndex{z-index:10000!important} .selectContainer .gray{color:#DDD} </style> <div class="selectContainer"> <span class="selectOption gray">请选择</span> <ul class="selectMenu"> <li>江西省</li> <li>广东省</li> <li>江苏省</li> <li>河北省</li> <li>湖南省</li> </ul> <span class="shows"></span> </div> <script> (function($){ jQuery.fn.select = function(options){ return this.each(function(){ var $this = $(this); var $shows = $this.find(".shows"); var $selectOption = $this.find(".selectOption"); var $el = $this.find("ul > li"); $this.click(function(e){ $(this).toggleClass("zIndex"); $(this).children("ul").toggleClass("dis"); e.stopPropagation(); }); $el.bind("click",function(){ var $this_ = $(this); $this.find("span").removeClass("gray"); $this_.parent().parent().find(".selectOption").text($this_.text()); }); $("body").bind("click",function(){ $this.removeClass("zIndex"); $this.find("ul").removeClass("dis"); }) //eahc End }); } })(jQuery); $(document).ready(function(){ $(".selectContainer").select(); }); </script>
相关推荐
js select框美化用input文本框模拟select框美化特效,鼠标点击input框弹出选择二级菜单点击取值特效。
div css模拟美化的Select样式
它是一款Select下拉单选框模拟插件,模拟原有select下拉框的功能,不过比原始Select更具表现力,可以随心所欲的对其美化,同时它还支持键盘操作,可通过键盘选择下拉框选项,可自定义样式,可选择需要的seletc 进行...
select的默认样式往往很丑,为保证页面样式风格统一,需要对select进行美化。虽然其美化的插件很多,一搜一大把,但是需要引入长长的css文件和js文件实在是件头痛的事。其实select的实现原理很简单,就是一个点击 ...
调用方式:$.divselect("#divselect","#inputselect");...根据需要修改css背景、css宽度、css高度等图片或css样式实现自己想要的select下拉菜单表单美化效果。演示地址:http://www.bcty365.com/content-73-325-1.html
<select>标签的外观问题很恼人,各个浏览器都不一致,单单就IE,一个版本...标记,我们用一个class名称 “beautify” 来确定,没有这个样式的<select>则将被忽略 var selects = $(“select.beautify”); if
主要介绍了用CSS和Div美化SELECT样式的简单方法,同时提到了select相关的兼容性写法,需要的朋友可以参考下
主要介绍了jquery使用ul模拟select实现表单美化的方法,涉及jquery鼠标事件及页面元素样式的相关操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
内容索引:脚本资源,jQuery,单选框,jQuery插件 jQuery Select 从图中你就可看出,它是一款Select下拉单选框模拟插件,模拟原有select下拉框的功能,不过比原始Select更具表现力,可以随心所欲的对其美化,同时它还...
模拟select下拉列表特效,因为html的下拉列表的样式修改美化等有些复杂,不容易控制。注意用于对页面的颜色搭配过于讲究的。
VMCSelect 下拉菜单插件 Vmc Select 是一款模拟、美化SELECT控件的 JQuery 下拉菜单插件,拥有良好的兼容性。可方便快捷的定制样式及动画效果。
、根据原有的select 模拟生成新的 select。 2、支持键盘,可通过键盘选择选项。 3、可自定义样式。 4、方便灵活,可选择需要的seletc 进行模拟(非全局模拟) 5、判断用户是否开启脚本支持,若未开启,不进行...
这个是select版的,若想美化某些样式是不支持得,可以用div模拟版的,功能基本实现能用了,需要其他功能自己加上。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>双向...
所以为了能让它美化起来,就用JQ模拟了一个下拉框,可以随意定义样式。原生的下拉框也保留在div里面隐藏着,方便后台开发人员对其进行操作。 效果图如下: HTML代码如下: <!DOCTYPE html> <...
很多群员问了关于下拉框美化的问题,现打一个下拉框美化的制作过程,其实是模拟出来的下拉框。 问题1:为什么要模拟下拉框? 1,浏览器自带的 下拉框样式不好看。 2,在ie6下,下拉框的优先级大于层,经常导致下拉框...
JS+DIV+CSS实现仿表单下拉列表效果,是完全用CSS技术再配合JS实现的效果,用来代替传统的Select下拉框,虽然目前来说,此代码还有些粗糙,但对于美化列表的样式来说,可能以后会更方便,要比Select方便的多。...
推荐jQuery美化Select下拉单选框模拟插件V1.3.6版本下载 26.推荐jQuery美化select下拉框样式漂亮效果 27.下载jQuery网页表单美化修饰插件(jQtransForm美化表单) 28.一款jquery实现表单输入提示的Autobox插件...
实例054 美化ComboBox控件下拉列表 63 实例055 用ComboBox控件制作浏览器网址输入框 64 2.3 RichTextBox控件应用 65 实例056 在RichTextBox控件中添加超链接文字 65 实例057 在RichTextBox控件中显示RTF格式的...