chia sẻ code thêm meta tags giống youtube
Tagify là một plugin jQuery nhỏ được sử dụng để tạo đầu vào thẻ / mã thông báo hiệu suất cao, đơn giản, hiệu suất cao từ trường đầu vào hoặc textarea. Nó cũng cung cấp một phiên bản JavaScript vanilla cho phép bạn triển khai các thẻ đầu vào trong JavaScript thuần.
Tính năng, đặc điểm:
- Tự động ngăn chặn các thẻ trùng lặp.
- Tự động phân chia văn bản đầu vào thành các thẻ bằng dấu phẩy hoặc phím Enter.
- Tương thích với Bootstrap 4 và Bootstrap 3.
Làm thế nào để sử dụng nó:
1. Đặt biểu định kiểu chính
tagify.cssvào head:1 | <link href="tagify.css" rel="stylesheet"> |
2. Bao gồm tệp JavaScript
jQuery.tagify.jssau jQuery.1 | <script src="//code.jquery.com/jquery.min.js"></script> |
2 | <script src="jQuery.tagify.js"></script> |
3. Bạn cũng có thể bao gồm phiên bản vanilla JS nếu bạn muốn triển khai Tagify bằng JavaScript thuần túy.
1 | <script src="tagify.js"></script> |
4. Tạo trường nhập liệu hoặc trường văn bản thông thường cho đầu vào thẻ. Bạn có thể đặt các thẻ được xác định trước trong
valuethuộc tính như sau:1 | <input name="tags" placeholder="write some tags" value="predefined tags here"> |
5. Khởi tạo Tagify và thực hiện.
1 | // jQuery |
2 | $('[name=tags]').tagify(); |
3 |
4 | // Vanilla JavaScript |
5 | var input = document.querySelector('input[name=tags]'), |
6 | tagify =new Tagify( input ); |
6. Kích hoạt tính năng phát hiện trùng lặp.
1 | $('[name=tags]').tagify({duplicates :false}); |
7. Thêm tùy chọn cấu hình.
01 | $('[name=tags]').tagify({ |
02 |
03 | // [regex] split tags by any of these delimiters ("null" to cancel) |
04 | delimiters:",", |
05 |
06 | // regex pattern to vali<a href="https://www.jqueryscript.net/time-clock/">date</a> input by. |
07 | pattern:null, |
08 |
09 | // maximum number of tags |
10 | maxTags: Infinity, |
11 |
12 | // exposed callbacks object to be triggered on certain events |
13 | callbacks: {}, |
14 |
15 | // automatically adds the text which was inputed as a tag when blur event happens |
16 | addTagOnBlur:true, |
17 |
18 | // allow tuplicate tags |
19 | duplicates:false, |
20 |
21 | // is this list has any items, then only allow tags from this list |
22 | whitelist: [], |
23 |
24 | // a list of non-allowed tags |
25 | blacklist: [], |
26 |
27 | // should ONLY use tags allowed in whitelist |
28 | enforceWhitelist:false, |
29 |
30 | // tries to autocomplete the input's value while typing |
31 | autoComplete:true, |
32 |
33 | // String - when tags have multiple properties, and for each tag another property should be used besides the "value" |
34 | <a href="https://www.jqueryscript.net/tags.php?/map/">map</a>ValueToProp:"", |
35 |
36 | dropdown: { |
37 | classname: '', |
38 | enabled: 2,// minimum input characters needs to be typed for the dropdown to show |
39 | maxItems: 10 |
40 | } |
41 | |
42 | }); |
8. Phương thức API.
01 | var myInput = $('[name=tags]').tagify(); |
02 |
03 | // adds new tag |
04 | // String (word, single or multiple with a delimiter) or an Array of Objects |
05 | myInput.addTags(); |
06 |
07 | // removes a specific tag |
08 | myInput.removeTag(DOM); |
09 |
10 | // removes all tags |
11 | myInput.removeAllTags(); |
12 |
13 | // destroy the plugin |
14 | myInput.destroy(); |
9. Sự kiện.
01 | var myInput = $('[name=tags]').tagify(); |
02 |
03 | myInput |
04 | .on('add',function(e, tagName){ |
05 | // on add |
06 | }) |
07 |
08 | .on('remove',function(e, tagName){ |
09 | // on remove |
10 | }) |
11 |
12 | .on('duplicate',function(e, tagName){ |
13 | // on duplicate |
14 | }) |
15 |
16 | .on('maxTagsExceed',function(e){ |
17 | // on maxTagsExceed |
18 | }) |
19 |
20 | .on('blacklisted',function(e, tagName){ |
21 | // on blacklisted |
22 | }) |
23 |
24 | .on('notWhitelisted',function(e, tagName){ |
25 | // on notWhitelisted |
26 | }) |
Loading...
Đăng nhận xét
Đăng nhận xét