Heim > Web-Frontend > js-Tutorial > Hauptteil

select标签模拟/美化方法采用JS外挂式插件_jquery

WBOY
Freigeben: 2016-05-16 17:38:49
Original
1482 Leute haben es durchsucht

在这将本人对,仅改变外观,不改变不干预Form行为,后期加载JS。(注:本脚本依赖jQuery)

啥也不说了,都在代码里。

复制代码 代码如下:
 
$(document).ready(function () {
// 找出需要美化的则将被忽略
var selects = $("select.beautify");
if (selects.length > 0) {
//先在代码底部增加一个
,用来承载和显示下拉框选项
$("body").append("");
//挨个美化呗
selects.each(function () {
//给本函数下的 this (也就是 , .dummy 将用于我们对此类 进行专门样式定义
//同时将 插入 dom, 紧跟原 ")
.attr("disabled", this.disabled)
.css("width", parseInt(this.style.width) + "px")
.css("display", this.style.display)
.insertAfter(this)
.val(this.options[this.selectedIndex].text);
//将 被点击时
input.click(function () {
//调出前面创建的
,并清空内容
//将 一致
$(select).hasClass("extend")
? div.css("width", "")
: div.css("width", $(this).innerWidth());
//将
Verwandte Etiketten:
Quelle:php.cn
Vorheriger Artikel:点击隐藏页面左栏或右栏实现js代码_javascript技巧 Nächster Artikel:html组件不可输入(只读)同时任何组件都有效_jquery
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage