Pemalam pengeditan tag jQuery Panduan penggunaan Tagit_jquery

1. Fungsi pemalam Tagit

Tingkatkan interaktiviti tapak web dan tingkatkan pengalaman pengguna. Bagi fungsi lain, sebenarnya tidak ada. Hanya gantikannya dengan teks input. Tetapi teks tidak mempunyai fungsi gesaan input, manakala tagit mempunyai fungsi ini. Contoh rasmi adalah seperti berikut:

Teg kata kunci kepada keseluruhan. Mudah untuk memadam dan menyemak imbas.

2. Alamat rasmi Tagit

http://aehlke.github.io/tag-it/
Alamat rasmi mempunyai arahan penggunaan dan contoh. Padanan warna kes penggunaan juga boleh dipilih. Tetapi terdapat hanya jenis ini untuk dipilih daripada pemalam The Tagit menggunakan jqueryui, jadi gaya yang disediakan oleh jqueryui juga serasi. jqueryui juga merupakan pemalam untuk jquery, menyediakan elemen antara muka yang sangat berfungsi. jqueryui juga menyediakan beberapa gaya untuk kita pilih, tetapi hanya itu sahaja yang boleh dipilih. Saya ingin membuat beberapa pengubahsuaian, tetapi mendapati sukar untuk mengubah suai gaya beberapa elemen Jika saya menukar satu tempat, saya akan menukar tempat lain secara tidak sengaja. Sesetengah tempat juga menyediakan gaya percuma pemalam jqueryui, dan sudah tentu terdapat juga yang berbayar. Apa yang kami panggil pemalam tagit sambungan jqueryui.

Lebih mudah untuk mengubah suai gaya tagit Dalam ujian, saya hanya akan mengubah suai gaya tagit, hanya untuk menunjukkan cara mengubah suainya. Terdapat banyak cara untuk mengubah suai gaya, dan ini hanyalah salah satu daripadanya.

Tagit menyokong operasi acara, seperti peristiwa yang boleh dicetuskan sebelum mengedit, selepas mengedit, sebelum pemadaman dan selepas pemadaman.

3. Cara menggunakan Tagit

Tagit sangat mudah digunakan, tetapi ia merujuk kepada banyak fail. Kerana Tagit adalah lanjutan daripada jqueryui, apabila kita merujuk jquery, kita juga mesti merujuk gaya jqueryui dan jqueryui. Kemudian tambah sendiri.
1. Fail rujukan

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery-ui.js" type="text/javascript"></script>
<script src="tag-it.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="jquery-ui.css">
<link href="jquery.tagit.css" rel="stylesheet" type="text/css">

2. Gaya tersuai

#container{
width:400px;
}
input[type=submit]{
padding:8px;
}
/*定义边框*/
#singleFieldTags{
border:1px solid #b1c9dc;
background:#e7e3ca;
}
/*定义输入元素text*/
#singleFieldTags input{
background:#e7e3ca;
color:blue;
}
/*定义标签样式*/
#singleFieldTags li{
background:#e7e3ca;
border:1px solid #930;
color:red;
}
/*第一输入元素的父元素*/
#singleFieldTags .tagit-new{
border:none;
}

Kod 3.js

$(function(){
var sampleTags = ['c++', 'java', 'php', 'coldfusion', 'javascript', 'asp', 'ruby', 'python', 'c', 'scala', 'groovy', 'haskell', 'perl', 'erlang', 'apl', 'cobol', 'go', 'lua'];
$('#myTags').tagit({
singleField: true, 
singleFieldNode: $('#myTagsValues')
});
$('#singleFieldTags').tagit({
//输入提示
availableTags: sampleTags,
// 与赋值操作有关
singleField: true,
allowSpaces: true, //标签中是否允许空格
singleFieldNode: $('#mySingleField') //将值保存到mySingleField元素
});
$('#submit1').click(function(){
alert($('#myTagsValues').val());
});
$('#submit2').click(function(){
alert($('#mySingleField').val());
});
});

4. HTML digunakan

<div id="container">
<p><b>测试用例1</b></p>
<ul id="myTags">
</ul>
<input type="hidden" id="myTagsValues" />
<input type="submit" value="获取输入信息" id="submit1"/>
<P><b>测试用例2</b></P>
<p><b>绑定默认关键词，在添加关键词时允许空格</b></p>
<p>修改后的样式</p>
<ul id="singleFieldTags">
</ul>
<input name="tags" id="mySingleField" value="CSharp, jQuery" disabled="true">
<br />
<input type="submit" value="获取输入信息" id="submit2" />
</div>

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.