这里有新鲜出炉的 jQuery 示例,程序狗速度看过来!
jQuery 是一个兼容多浏览器的 javascript 框架,核心理念是 write less,do more(写得更少, 做得更多)。jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布,吸引了来自世界各地的众多 JavaScript 高手加入,由 Dave Methvin 率领团队进行开发。
1. 解决了有些 select 美化代码, 无法触发原有 select 控件的 onchange 事件问题。 2. 允许多次调用 $("...").selectCSS(),以解决 Select 的 options 更新后无法同步的问题。
基于 CSS 和 JS 的网页 SELECT 下拉框美化, JQUERY 插件,最近为公司的网页制做部,开发了一个用于美化网页上 select 下拉框的 JQUERY 插件,拿来与大家分享。
使用方法如下:主要文件包括 selectCss.css 和 selectCss.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>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>
- 无标题文档
- </title>
- <link href="selectCss.css" rel="stylesheet" type="text/css" />
- <script src="jquery-1.3.2.min.js" type="text/javascript">
- </script>
- <script src="selectCss.js" type="text/javascript">
- </script>
- <script type="text/javascript">
- $(document).ready(function() {
- $("select").selectCss();
- });
- </script>
- </head>
- <body>
- <select name="" onchange="alert(this.value)" id="select1">
- <option value="1" title="选项选项选项选项">
- 选项1
- </option>
- <option value="2">
- 选项2
- </option>
- <option value="3">
- 选项3
- </option>
- </select>
- <select name="" id="select2">
- <option value="1">
- 选项31
- </option>
- <option value="2">
- 选项32
- </option>
- <option value="3">
- 选33
- </option>
- </select>
- </body>
- </html>
selectCss.js 文件代码:
selectCss.Css 文件代码:
- (function($){
- function hideOptions(speed){
- if(speed.data){speed=speed.data}
- if($(document).data("nowselectoptions"))
- {
- $($(document).data("nowselectoptions")).slideUp(speed);
- $($(document).data("nowselectoptions")).prev("div").removeClass("tag_select_open");
- $(document).data("nowselectoptions",null);
- $(document).unbind("click",hideOptions);
- $(document).unbind("keyup",hideOptionsOnEscKey);
- }
- }
- function hideOptionsOnEscKey(e){
- var myEvent = e || window.event;
- var keyCode = myEvent.keyCode;
- if(keyCode==27)hideOptions(e.data);
- }
- function showOptions(speed){
- $(document).bind("click",speed,hideOptions);
- $(document).bind("keyup",speed,hideOptionsOnEscKey);
- $($(document).data("nowselectoptions")).slideDown(speed);
- $($(document).data("nowselectoptions")).prev("div").addClass("tag_select_open");
- }
- $.fn.selectCss=function(_speed){
- $(this).each(function(){
- var speed=_speed||"fast";
- if($(this).data("cssobj")){
- $($(this).data("cssobj")).remove();
- }
- $(this).hide();
- var divselect = $("<div></div>").insertAfter(this).addClass("tag_select");
- $(this).data("cssobj",divselect);
- var divoptions = $("<ul></ul>").insertAfter(divselect).addClass("tag_options").hide();
- divselect.click(function(e){
- if($($(document).data("nowselectoptions")).get(0) != $(this).next("ul").get(0)){
- hideOptions(speed);
- }
- if(!$(this).next("ul").is(":visible"))
- {
- e.stopPropagation();
- $(document).data("nowselectoptions",$(this).next("ul"));
- showOptions(speed);
- }
- });
- divselect.hover(function(){
- $(this).addClass("tag_select_hover");
- }
- ,
- function(){
- $(this).removeClass("tag_select_hover");
- });
- $(this).change(function(){
- $(this).nextAll("ul").children("li:eq("+ $(this)[0].selectedIndex +")").addClass("open_selected").siblings().removeClass("open_selected");
- $(this).next("div").html($(this).children("option:eq("+ $(this)[0].selectedIndex +")").text());
- });
- $(this).children("option").each(function(i){
- var lioption= $("<li></li>").html($(this).text()).attr("title",$(this).attr("title")).appendTo(divoptions);
- if($(this).attr("selected")){
- lioption.addClass("open_selected");
- divselect.html($(this).text());
- }
- lioption.data("option",this);
- lioption.click(function(){
- lioption.data("option").selected=true;
- $(lioption.data("option")).trigger("change",true)
- });
- lioption.hover(
- function(){$(this).addClass("open_hover");},
- function(){ $(this).removeClass("open_hover"); }
- );
- });
- });
- }
- })(jQuery);
- .tag_select {
- display: block;
- color: #000;
- width: 179px;
- height: 23px;
- background: transparent url("images/index_22.jpg") no - repeat 0 0;
- padding: 0 10px;
- line - height: 23px;
- color: #7D7D7D;
- font - size: 12px;
- cursor: pointer
- }.tag_select_hover {
- color: #ff0000;
- background: transparent url("selectbg.jpg") no - repeat 0 0;
- }.tag_select_open {
- color: #0000ff;
- background: transparent url("selectbg.jpg") no - repeat 0 0;
- }
- ul.tag_options {
- position: absolute;
- margin: 0;
- list - style: none;
- background: #fff;
- padding: 0 0 1px;
- margin: 0;
- width: 162px;
- height: 100px;
- overflow: hidden;
- overflow - y: auto;
- font - size: 12px;
- margin - left: 10px;
- cursor: pointer;
- z - index: 1000
- }
- ul.tag_options li {
- background: #fff;
- display: block;
- width: 140px;
- padding: 0 10px;
- height: 20px;
- text - decoration: none;
- line - height: 20px;
- color: #000;
- font - weight: normal;
- font - size: 12px
- }
- ul.tag_options li.open_hover {
- background: #0000ff;
- color: #000;
- font - weight: normal;
- font - size: 12px
- }
- ul.tag_options li.open_selected {
- background: #ccc;
- font - size: 12px;
- font - weight: bold;
- }
selectbg.jpg 图片:
来源: http://www.phperz.com/article/17/0424/284053.html