Jadual Kandungan
1. Cipta kesan statik
Rumah hujung hadapan web tutorial js Kod pelaksanaan kotak lungsur boleh diedit berdasarkan jquery_jquery

Kod pelaksanaan kotak lungsur boleh diedit berdasarkan jquery_jquery

May 16, 2016 pm 04:40 PM
kotak drop down Boleh diedit

Prinsipnya ialah menambah kotak teks pada ul untuk mensimulasikan kotak lungsur dan menggunakan fon untuk mensimulasikan butang lungsur.

1. Cipta kesan statik

Mula-mula gunakan css dan html untuk menjadikannya kelihatan seperti sepatutnya. Berikut ialah dua Saya menggunakan fon, yang boleh dibuat sendiri di tapak web icomoon. Kelebihan menggunakan fon ialah sangat mudah untuk meletakkan kotak input, dan anda juga boleh mengawal saiz, warna, dsb. Satu-satunya kelemahan ialah IE6 dan IE7 tidak boleh memaparkan fon ini kerana ia tidak menyokong pemilih :before , tetapi ia boleh dicapai melalui beberapa kaedah lain Anda boleh mencubanya sendiri. Di bawah ialah kod html

<span style="display:inline-block;position:relative" class="combox_border">
 <input type="text" class="combox_input"/><font class="ficomoon icon-angle-bottom combox_button" style="display:inline-block"></font>
 <ul style="position:absolute;top:29px;left:-1px" class="combox_select">
 <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >选项一</a></li>
 <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >选项二</a></li>
 <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >选项三</a></li>
 <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >选项四</a></li>
 </ul>
</span>
Salin selepas log masuk

1. Terdapat gaya dan kelas dalam teg Gaya ini adalah atribut yang diperlukan dan mesti mempunyai
2. Bahagian paling luar dibalut dengan span, dan kemudian diberi atribut blok sebaris Sebabnya elemen sebaris digunakan adalah untuk kemudahan susun atur masa hadapan akan disertakan dengan float Terapung dan gaya lain lebih menyusahkan untuk dikawal
3. Ikon-sudut-bawah Ficomoon sedang mentakrifkan fon
4. Kedudukan atribut span adalah relatif Saya merancang untuk menggunakan kedudukan ul untuk mensimulasikan drop-down Kedudukan ul adalah mutlak. berkod
5. Saya menambah tag pada kandungan dalam li. Saya hanya mahu malas di sini terpulang kepada kandungan untuk menukar gaya.

Di bawah ialah kod CSS:

@font-face {
 font-family: 'icomoon';
 src:url('fonts/icomoon.eot&#63;-fl11l');
 src:url('fonts/icomoon.eot&#63;#iefix-fl11l') format('embedded-opentype'),
 url('fonts/icomoon.woff&#63;-fl11l') format('woff'),
 url('fonts/icomoon.ttf&#63;-fl11l') format('truetype'),
 url('fonts/icomoon.svg&#63;-fl11l#icomoon') format('svg');
 font-weight: normal;
 font-style: normal;
}
.ficomoon{font-family:'icomoon';}
.icon-angle-top:before {content: "\f102"}.icon-angle-bottom:before {content: "\f103"}
/*下面的可根据自己的实际情况做修改*/
.combox_border{border:1px solid #c2c2c2;height:28px;width:245px}
.combox_input{border:0;line-height:25px;height:25px;padding-left: 5px;width:85%;vertical-align: middle;}
.combox_button{width:12%;text-align:center;vertical-align: middle;cursor:pointer;border-left:1px solid #c2c2c2}
.combox_select{border:1px solid #c2c2c2;border-top:0;width:100%}
.combox_select li{overflow:hidden;height:30px;line-height:30px;cursor:pointer;}
.combox_select a {display: block;line-height: 28px;padding: 0 8px;text-decoration: none;color: #666;}
.combox_select a:hover {text-decoration: none;background:#f5f5f5}
Salin selepas log masuk

Combox_border dan gaya lain di sini boleh disesuaikan dan gaya CSS3 boleh ditambah untuk mencantikkan mereka. Saya buat gaya ringkas di sini.

2. Cipta kesan khas JS

Semasa saya melakukan JS, saya menghadapi masalah pelik, iaitu, tiada ralat akan dilaporkan dalam mana-mana penyemak imbas, tetapi dalam IE6, ia akan menyebabkan ralat sifat objek yang tidak ditetapkan Akhirnya, saya mendapati bahawa ia adalah kerana daripada masalah pengekodan fail js, bukan UTF-8, cuma tukar pengekodan.

Pertama ialah format pemalam jquery

(function($){
 $.fn.combox = function(options) {
 
 };
})(jQuery);
Salin selepas log masuk

Kemudian tambah parameter lalai

var defaults = { 
 borderCss: "combox_border", 
 inputCss: "combox_input", 
 buttonCss: "combox_button", 
 selectCss: "combox_select",
 datas:[]
};
var options = $.extend(defaults, options);
Salin selepas log masuk

borderCss 最外面包裹的样式,就是上面的span
inputCss 输入框的样式
buttonCss 按钮的样式,就是
selectCss 下拉列表的样式
datas 下拉列表中的内容

Kemudian terdapat kaedah rendering

this.each(function() {
var _this = $(this);
_this = _initBorder(_this);//初始化外框CSS IE6中需要有返回值
_this = _initInput(_this);//初始化输入框
_initSelect(_this);//初始化下拉列表
});
Salin selepas log masuk

Janakan kotak input, butang, kotak lungsur turun, lampirkan gaya dan masa secara dinamik. Saya meletakkan tiga rendering dalam tiga fungsi masing-masing untuk menjadikannya lebih jelas

       function _initBorder($border) {//初始化外框CSS
 $border.css({'display':'inline-block', 'position':'relative'}).addClass(options.borderCss);
 return $border;
 }
 
 function _initInput($border){//初始化输入框
 $border.append('<input type="text" class="'+options.inputCss+'"/>');
 $border.append('<font class="ficomoon icon-angle-bottom '+options.buttonCss+'" style="display:inline-block"></font>');
 //绑定下拉特效
 $border.delegate('font', 'click', function() {
 var $ul = $border.children('ul');
 if($ul.css('display') == 'none') {
 $ul.slideDown('fast');
 $(this).removeClass('icon-angle-bottom').addClass('icon-angle-top');
 }else {
 $ul.slideUp('fast');
 $(this).removeClass('icon-angle-top').addClass('icon-angle-bottom');
 } 
 });
 return $border;//IE6需要返回值
 }
 
 function _initSelect($border) {//初始化下拉列表
 $border.append('<ul style="position:absolute;left:-1px;display:none" class="'+options.selectCss+'">');
 var $ul = $border.children('ul');
 $ul.css('top',$border.height()+1);
 var length = options.datas.length;
 for(var i=0; i<length ;i++)
 $ul.append('<li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+options.datas[i]+'</a></li>');
 $ul.delegate('li', 'click', function() {
 $border.children(':text').val($(this).text());
 $ul.hide();
 $border.children('font').removeClass('icon-angle-top').addClass('icon-angle-bottom');//确定的时候要将下拉的icon改变
 });
 return $border;
 }
Salin selepas log masuk

Saya menambah simbol $ pada parameter dalam tiga fungsi supaya saya dapat mengetahui bahawa ini adalah objek jquery. Tiada masalah teknikal dalam fungsi ini Semuanya adalah logik biasa dan semula jadi Anda juga boleh menukar kod pada bila-bila masa mengikut keperluan anda yang berbeza ubah suai.

Berikut ialah pemalam panggilan:

<script type="text/javascript">
$(document).ready(function() {
 $('#combox').combox({datas:['选项一','选项二','选项三']});
})
</script>
</head>
<body>
  <span id="combox"></span>
</body>
</html>
Salin selepas log masuk

Ia hanya memerlukan satu ayat, yang sangat mudah.

demo demo: http://demo.jb51.net/js/2014/combox_jquery/

Muat turun demo: http://www.jb51.net/jiaoben/199034.html

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimana untuk menggunakan Vue untuk melaksanakan jadual data boleh diedit? Bagaimana untuk menggunakan Vue untuk melaksanakan jadual data boleh diedit? Jun 25, 2023 pm 06:20 PM

Dengan pembangunan berterusan teknologi hadapan, jadual data telah menjadi salah satu alat penting untuk pengurusan perusahaan dan paparan data. Dalam pembangunan harian, kadangkala perlu mengubah suai atau menambah data dalam jadual data Pada masa ini, adalah perlu untuk melaksanakan jadual data boleh diedit. Artikel ini akan memperkenalkan cara menggunakan Vue untuk melaksanakan jadual data boleh diedit. 1. Idea pelaksanaan Apabila melaksanakan fungsi jadual data boleh diedit, kita perlu mengambil kira perkara berikut: Persembahan data: Menghasilkan data ke dalam jadual untuk paparan dan penyuntingan. Pengeditan jadual: Edit data dalam jadual.

Bagaimana untuk melaksanakan kotak lungsur turun berbilang pilihan dalam Vue Bagaimana untuk melaksanakan kotak lungsur turun berbilang pilihan dalam Vue Nov 07, 2023 pm 02:09 PM

Cara melaksanakan kotak lungsur turun berbilang pilihan dalam Vue Dalam pembangunan Vue, kotak lungsur turun ialah salah satu komponen bentuk biasa. Biasanya, kami menggunakan kotak lungsur radio untuk memilih pilihan. Walau bagaimanapun, kadangkala kita perlu melaksanakan kotak lungsur berbilang pilihan supaya pengguna boleh memilih berbilang pilihan pada masa yang sama. Dalam artikel ini, kami akan memperkenalkan cara untuk melaksanakan kotak lungsur turun berbilang pilihan dalam Vue dan memberikan contoh kod khusus. 1. Gunakan pustaka komponen ElementUI ElementUI ialah pustaka komponen desktop berdasarkan Vue, yang menyediakan UI yang kaya.

Cara menggunakan Layui untuk membangunkan sistem pengurusan jadual peribadi yang boleh diedit Cara menggunakan Layui untuk membangunkan sistem pengurusan jadual peribadi yang boleh diedit Oct 25, 2023 am 11:42 AM

Bagaimana menggunakan Layui untuk membangunkan sistem pengurusan jadual peribadi yang boleh diedit Dalam beberapa tahun kebelakangan ini, dengan perkembangan pesat teknologi maklumat dan kadar kehidupan orang yang semakin pantas, pengurusan jadual peribadi telah menjadi semakin penting. Untuk membolehkan orang ramai mengurus masa dan tugas mereka dengan lebih baik, kami boleh menggunakan Layui, rangka kerja UI bahagian hadapan berdasarkan JavaScript Ia menyediakan komponen yang kaya dan gaya ringkas, dan sangat sesuai untuk membangunkan sistem pengurusan jadual peribadi. 1. Persediaan persekitaran Pertama, kita perlu menyediakan persekitaran pembangunan. pastikan anda

Penyelesaian masalah menatal kotak lungsur mudah alih Vue Penyelesaian masalah menatal kotak lungsur mudah alih Vue Jun 29, 2023 pm 11:49 PM

Bagaimana untuk menyelesaikan masalah menatal kotak drop-down mudah alih dalam pembangunan Vue Dengan populariti terminal mudah alih, semakin banyak aplikasi web telah mula dibangunkan untuk peranti mudah alih. Dalam proses pembangunan mudah alih, kami sering menghadapi masalah, iaitu masalah menatal kotak lungsur pada peranti mudah alih. Pada bahagian PC tradisional, penatalan kotak lungsur turun dikawal oleh bar skrol lalai penyemak imbas, tetapi pada peranti mudah alih, tiada bar skrol, jadi kotak lungsur tidak boleh ditatal. Ini mungkin menyebabkan pengguna tidak dapat memilih semua pilihan dalam kotak lungsur dalam beberapa senario.

Kaedah pelaksanaan jadual boleh diedit dalam dokumen Vue Kaedah pelaksanaan jadual boleh diedit dalam dokumen Vue Jun 20, 2023 pm 06:43 PM

Vue.js ialah salah satu rangka kerja bahagian hadapan yang paling popular pada masa ini Ia menggunakan pendekatan dipacu data untuk membina antara muka pengguna dan mempunyai ciri pengikatan data dua hala dan komponenisasi. Dalam dokumentasi Vue.js, kaedah untuk melaksanakan jadual boleh diedit disediakan. Artikel ini akan memperkenalkan langkah pelaksanaan khusus kaedah ini. Untuk menyediakan data, anda mesti terlebih dahulu menyediakan satu set data Di sini kami mengambil maklumat pelajar sebagai contoh. Format data boleh menjadi tatasusunan, setiap elemen mengandungi atribut seperti nama, jantina, umur, dsb. pelajar:[{nama:'Xiao Ming

Cara menggunakan Vue dan Canvas untuk membangunkan aplikasi grafik vektor yang boleh diedit Cara menggunakan Vue dan Canvas untuk membangunkan aplikasi grafik vektor yang boleh diedit Jul 19, 2023 pm 03:07 PM

Cara menggunakan Vue dan Canvas untuk membangunkan aplikasi grafik vektor yang boleh diedit Pengenalan: Dalam beberapa tahun kebelakangan ini, grafik vektor telah semakin digunakan secara meluas dalam bidang reka bentuk, dan terdapat banyak alatan reka bentuk berdasarkan grafik vektor seperti Adobe Illustrator. Dalam pembangunan web, kami juga berharap dapat membangunkan aplikasi grafik vektor yang boleh diedit untuk memenuhi keperluan tersuai pengguna untuk reka bentuk. Artikel ini akan memperkenalkan cara menggunakan Vue dan Canvas untuk membangunkan aplikasi grafik vektor yang boleh diedit dan memberikan contoh kod terperinci. Persediaan Pertama, I

Cara menggunakan Layui untuk membangunkan pembaca e-buku yang menyokong kebolehsuntingan Cara menggunakan Layui untuk membangunkan pembaca e-buku yang menyokong kebolehsuntingan Oct 24, 2023 am 08:08 AM

Gambaran keseluruhan cara menggunakan Layui untuk membangunkan pembaca e-buku boleh diedit: Layui ialah rangka kerja bahagian hadapan yang mudah digunakan dan berkuasa yang menyediakan set komponen UI yang kaya dan alatan pembangunan, membolehkan pembangun membina dengan pantas yang cantik dan berfungsi sepenuhnya aplikasi web. Artikel ini akan memperkenalkan cara menggunakan rangka kerja Layui untuk membangunkan pembaca e-buku yang menyokong keboleheditan, membolehkan pengguna melakukan operasi seperti menyerlahkan, menanda dan mencatat nota dalam e-buku. Langkah 1: Penyediaan projek Pertama, kita perlu menyediakan struktur projek asas. Buat a

Cara menggunakan Layui untuk melaksanakan fungsi jadual boleh diedit Cara menggunakan Layui untuk melaksanakan fungsi jadual boleh diedit Oct 25, 2023 am 11:27 AM

Cara menggunakan Layui untuk melaksanakan fungsi jadual boleh diedit Layui ialah rangka kerja UI bahagian hadapan yang klasik dan ringkas dengan komponen yang kaya dan fungsi yang berkuasa. Semasa proses pembangunan menggunakan Layui, kita mungkin menghadapi keperluan untuk melaksanakan fungsi jadual boleh diedit. Artikel ini akan memperkenalkan cara menggunakan komponen jadual dan komponen bentuk Layui untuk melaksanakan fungsi jadual boleh diedit, dan menyediakan contoh kod khusus. 1. Perkenalkan perpustakaan Layui Pertama, perkenalkan fail perpustakaan Layui yang berkaitan ke dalam projek. Boleh pilih

See all articles