Simple jQuery Tag

 Author : hadinug, 05 November, 2014, Komentar

simple jquery tag plugins


Masih berhubungan dengan javascript atau jquery, kali ini kita akan mencoba bagaimana membuat sebuah plugin jquery sederhana untuk tag. Plugin ini sudah kami coba dan kami gunakan dibeberapa project web yang kami tangani. Scriptya simple dan penggunaan nya sangat sederhana. So mari ikuti tahapan-tahapan pembuatannya:



Langkah-1 jQuery plugin [tag.js]


(function($) {
    $.fn.tag = function(options) {
        var set = $.extend({
            idTag: "ca-tag",
            width: "auto",
            vInput: false
        }, options);
        return this.each(function() {
            var t = $(this), d = new Date(), tagID = d.getTime(), elm = $('input#' + set.idTag);
            // menjadikan nilai tag lama kedalam dalam vield inputdalam visual tag
            var oTag = elm.val().split('#'), vTag = '';
            for (i = 0; i < (oTag.length - 1); i++) {
                vTag += '<span class="ca-tag-data">' + oTag[i] +
                        '<a href="javascript:void(0);" class="icon-remove" onclick="rTag(this,\''+set.idTag+'\',\''+oTag[i]+'\')">&times;</a>' +
                        '</span>';
            } 
            // menambahkan tag
            t.parent()
                    .append('<div class="ca-tag" id="' + tagID + '" style="width:'+options.width+'"><span class="pTag">' + vTag + '</span>' +
                    '<span class="nTag" contenteditable="true" placeholder="add a tag"><br/></span>' +
                    '</div>');
            if(!set.vInput){
               t.hide(); 
            }else{
               t.attr('readonly',true);
            }
            // membuat focus pada elemen contenteditable
            var div = $('#' + tagID + ' span.pTag'), i = $('#' + tagID + ' span.nTag');
            $('#' + tagID).click(function() {
                i.focus();
            });

            i.keypress(function(event) {
                var keycode = (event.keyCode ? event.keyCode : event.which);
                if (keycode == '13') {
                    val = $(this).text();
                    sTag = val + '<a href="javascript:void(0);" class="icon-remove" onclick="rTag(this,\''+elm+'\',\''+val+'\')">&times;</a>';
                    /**
                     * @type @exp;@exp;elm@pro;val@call;@call;split|@exp;elm@pro;val@call;@call;split
                     * mengecek ketersediaan tag dengan syarat sbb:
                     * 1. jika sudah tersedia maka akan ditambahkan kelas error, sebagai penanda bahwa tag yang diketikan sudah ada
                     * 2. jika belum ada nilai tag yang diketikan didalam elemen array input field, maka nilai text tag akan dimasukan ke dalam input field
                     */
                    var aTag = elm.val().split('#');
                    if ($.inArray(val, aTag) != -1) {
                        div.append('<span class="ca-tag-data tag-error">' + sTag + '</span>');
                    } else {
                        div.append('<span class="ca-tag-data">' + sTag + '</span>');
                        t.val(elm.val() + val + '#');
                    }
                    $(this).html('');
                }
            });
        });
    };
}(jQuery));

// make function to remove tag
function rTag(i,v,val) {
    $(i).parent().remove(); 
    var iV = $('#'+v).val();
    iV= iV.replace(val+'#','');
    $('#'+v).val(iV);
}


Langkah-2 CSS [tag.css]


 .ca-tag{
    float: left;
    padding: 1px 3px; 
    position: relative;
    border: 1px solid #ddd;
    min-height: 15px;
    cursor: text;
    margin-bottom: 15px;
    width: 99%;
}
.nTag{  
    width: auto; 
    min-width: 2px;
    padding: 1px 0;
    float: left;
    margin: 3px 0;
}
.ca-tag-data{  
    float: left;
    padding: 1px 5px;
    margin: 3px 5px 3px 0;
    opacity: .8;
    position: relative;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background: #2693ba;
    color: #fff;
    border: 1px solid #0066CC;
}
.ca-tag-data a{
    padding: 2px;
    color: #fff;
    background: #2693ba;
    text-decoration: none;
    font-size: 11px;
    border-radius: 5px;
    font-weight: 500;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    margin-left: 5px;
} 
.ca-tag-data a:hover{
    opacity: 0.6;
}
.tag-error{
    background: #ff9999;
    color: #ff3333;
    border: 1px solid #ff3333;
}
.tag-error a{
    background: #ff0000;
    color: #fff;
    border: 1px solid #ff3333;
}



Langkah-3 Implementasi [HTML]

-Load javascript and css librari

<link type="text/css" rel="stylesheet" href="screen.css"/> 
<link type="text/css" rel="stylesheet" href="tag.css"/> 
<script src="jquery.min.js"></script>
<script src="tag.js"></script>  


-Html & Jquery code

<div> 
    <input type="text" name="tag" id="tags" validation="required" value="hadinug#hello#">  
</div>
<script type="text/javascript">
    $('input[name="tag"]').tag({
        idTag: 'tags',
        width: '570px'
    });
</script>


Sangat mudah bukan, silahkan download dan lihat demonya disini

 
Bagikan halaman ke sosial media
 
Tags :   jQuery    plugin    jQueryTag       

Tentang Penulis

writer hadinug
Web Developer di PT. Yafii Solusi Internasional

Link: http://ysi.co.id

   Komentar Anda