没有这个样式的则将被忽略 var selects = $

作者:官方彩票手机投注网站-服务器运维

标签的外观问题很恼人,各个浏览器都不一致,单单就IE,一个版本就一个长相,还不能用CSS修饰。

在这将本人对的美化方法共享出来。优点: 仍保留使用,仅改变外观,不改变不干预Form行为,后期加载JS。

啥也不说了,都在代码里。复制代码 代码如下:$.ready { // 找出需要美化的标记,我们用一个class名称 "beautify" 来确定,没有这个样式的则将被忽略 var selects = $; if { //先在代码底部增加一个

,用来承载和显示下拉框选项 $.append("

"); //挨个美化呗 selects.each { //给本函数下的 this 设置一个别名,在下面的匿名函数中将会被用到 var select = this; //创建一个 , .dummy 将用于我们对此类 进行专门样式定义 //同时将 的部分属性和样式复制给这个 dummy input //创建完后,将这个 插入 dom, 紧跟原 var input = $("") .attr("disabled", this.disabled) .css("width", parseInt + "px") .css("display", this.style.display) .insertAfter .val(this.options[this.selectedIndex].text); //将 藏掉,不要在 .beautify 中去定义 display:none, 因为js加载失败时,我们还得用上它 this.style.display = "none"; // 当 被点击时 input.click { //调出前面创建的

,并清空内容 //将 的样式表传递给它,当需要对这个

进行修饰时,就靠这些样式定义 var div = $ .empty() .attr("class", select.className); //设置

的宽度 //在这里我们判断一个特殊的class名 "extend" //如果带有 .extend,表示宽度将受额外自定义控制;否则,宽度将默认与 一致 $.hasClass ? div.css : div.css.innerWidth; //将 复制到

里面,一个 对应一个 标记 for (var i = 0; i < select.options.length; i++) { var item = select.options[i]; var a = $("") .css("color", item.style.color) .addClass .html .appendTo; if (i == select.selectedIndex) { a.addClass; } //当选项被点击时, 内容显示为对应 ,关闭

层,同时将事件冒泡给原来的 a.click { var n = $; select.selectedIndex = n; input.val(select.options[n].text); div.hide; }); } //在这里我们判断一个特殊的class名 "noscroll" //当选项过多时,默认会让选项列表出现滚动条;但如果有 .noscroll 修饰,则强制不出现滚动条 var noscroll = (select.options.length < 10 || $.hasClass; if (/msie 6/i.test(window.navigator.userAgent)) { div.css("height", noscroll ? "auto" : "215px").css("overflow-y", noscroll ? "hidden" : "scroll"); } else { div.css("max-height", noscroll ? "10000px" : "215px"); } //在这里我们判断一个特殊的class名 "onside" //如果有 .onside 修饰,弹出的选项层将在侧面,否则是在下面 //注: 此处用到2个函数 locateBeside 和 locateBelow 是本人js库中的方法,稍等另外给出 $.hasClass ? div.locateBeside : div.locateBelow; //对反复点击 之类的事情,做一些智能调节 if (window.activeDummySelect == select) { div.slideToggle; } else { div.hide; window.activeDummySelect = select; } //在有滚动条的情况下,我们需要将滚动条滚动到当前选中项的位置 if (!select.selectedIndex > 6 && div[0].scrollHeight > div.height { div.scrollTop((select.selectedIndex - 3) * div[0].firstChild.offsetHeight); } }); }); //最后别忘了:点击网页上的游离区域时,应该隐藏

$.click { if .is && !$.is { $; } }); } }); 上面代码里说用到了2个方法: locateBeside 和 locateBelow, 是本人js库中对 jQuery 的扩展,顺便多赠送2个方法locate 和 locateCenter :-) 代码如下:复制代码 代码如下: $.fn.extend({ locate: function { if == "fixed") { y -= $; } return this.css; }, locateBeside: function { var p = $, w1 = $, w2 = this.outerWidth(), h2 = this.outerHeight(), x = p.left + w1 + 5 + , y = p.top; if < x + w2) { x = p.left - w2 - 5 - ; } if < y + h2) { y = p.top - (y + h2 + 15 - $; } return this.locate; }, locateBelow: function { var p = $; return this.locate.outerHeight() + 3 + ; }, locateCenter: function () { return this.locate - this.width.height / 2 + $ ); } }); 最后给出一些样式表定义的例子,以及演示效果:复制代码 代码如下: input.dummy { background-image: url(/static/images/combo.gif); background-position: right 12px; background-repeat: no-repeat; cursor: pointer !important; } input.dummy:hover, input.dummy:focus { background-image: url(/static/images/combo_hover.gif); } #dummydata { position: absolute; z-index: 20; border: 1px solid #a4601e; background-color: #393939; max-height: 200px; overflow: auto; } #dummydata a { display: block; color: #ddd; line-height: 25px; text-indent: 3px; text-overflow: ellipsis; } #dummydata a:hover { color: #198cef; text-decoration: none; } #dummydata.matrix { width: 208px; padding: 5px; } /* matrix 效果 */ #dummydata.matrix a { float: left; width: 33%; } #dummydata.matrix-large { width: 640px; padding: 5px; } /* matrix-large 效果 */ #dummydata.matrix-large a { float: left; width: 25%; } #dummydata a.fullwidth { float: none; } #dummydata a.delimiter { float: none; width: 100%; height: 10px; visibility: hidden; } #dummydata a.selected { color: yellow; } 上面样式定义的效果图

html中要做的,只是加几个class修饰

本文由彩票投注软件发布,转载请注明来源

关键词: