Numbers for tags and tags URLs added. pill HTML structure changes. no core styles. Styles added manually.

Author: Serhioromano

css/bootstrap-tags.css

@@ -1,10 +1 @@
-*[data-tag-id] {
-    margin-right: 5px;
-    font-weight: 100;
-    font-size: 14px;
-    line-height: 18px;
-}
-*[data-tag-id] a {
-    cursor: pointer;
-    margin-left: 5px;
-}
+

index.html

@@ -11,7 +11,8 @@
 		<h1>Bootstrap Tags Demo</h1>
 		<p>Bootstrap tags is an UI component to manage values with Ajax</p>
 		<p>
-			<a href="https://github.com/Serhioromano/bootstrap-tags" class="btn">Fork on GitHub</a>
+			<a href="https://github.com/Serhioromano/bootstrap-tags" class="btn btn-inverse">Fork on GitHub</a>
+			<a class="btn btn-success" href="https://github.com/Serhioromano/bootstrap-tags">Documentation</a>
 		</p>
 	</div>
 	<div class="row">
@@ -20,6 +21,22 @@ <h1>Bootstrap Tags Demo</h1>
 		</div>
 		<div class="span8">
 			<div id="bs-tags"></div>
+			<style type="text/css">
+				#bs-tags *[data-tag-id] {
+					margin-right: 5px;
+					font-weight: 100;
+					font-size: 14px;
+					line-height: 20px;
+				}
+				#bs-tags *[data-tag-id] a.tag-remove {
+					margin-left: 5px;
+					margin-right: -3px;
+				}
+				#bs-tags *[data-tag-id] a.tag-link {
+					color: #ffffff;
+					text-decoration: underline;
+				}
+			</style>
 		</div>
 	</div>
 </div>

js/bootstrap-tags.js

@@ -1,5 +1,5 @@
 ;
-(function ($) {
+(function($) {
     "use strict";
 
     var defaults = {
@@ -9,9 +9,12 @@
         templates: {
             // {0} - text, {1} - id, {2} - delete icon
             pill: '<span class="badge badge-info" data-tag-id="{1}">{0}</span>',
-            delete_icon: '<i class="icon-remove-sign"></i>'
+            delete_icon: '<i class="icon-remove-sign"></i>',
+            number: ' <sup><small>{0}</small></sup>'
         },
 
+        tag_link_target: '', // may be _blank or other.
+
         can_delete: true,
         can_add: true,
 
@@ -21,87 +24,113 @@
             delete: "Delete"
         },
 
-        onLoadDefaults: function (values) {
+        remove_url: '',
+
+        onLoadDefaults: function(values) {
             return values;
+        },
+        onRemove: function(pill) {
         }
+
     };
     var options = {};
 
     function Tags(context) {
         var $self = this;
 
-        if (options.values_url) {
+        if(options.values_url) {
             $.ajax({
                 dataType: 'json', type: 'get', async: false, url: options.values_url
-            }).done(function (json) {
-                    if (typeof json == "object") {
+            }).done(function(json) {
+                    if(typeof json == "object") {
                         options.values = $.merge(options.values, json);
                     }
                 });
         }
         options.values = options.onLoadDefaults(options.values);
 
         var pills_list = $(document.createElement('div')).appendTo(context);
-        var hidden_list = $(document.createElement('div')).appendTo(context);
 
-        $.each(options.values, function (key, value) {
-            $self.addTag(pills_list, hidden_list, value);
+        $.each(options.values, function(key, value) {
+            $self.addTag(pills_list, value);
         });
 
         $('[data-toggle="tooltip"]').tooltip();
     }
 
-    Tags.prototype.addTag = function (pills_list, hidden_list, value) {
+    Tags.prototype.addTag = function(pills_list, value) {
         var $self = this;
 
-        if (typeof value == "string") {
+        if(typeof value == "string") {
             value = {id: value, text: value, html: value};
         }
         value.html = value.html || value.text;
+        value.url = value.url || '';
+        value.num = parseInt(value.num || '0');
+
+        if(!value.id || !value.text) {
+            $.error('Not correct object format to create tag/pill');
+        }
+
+        if(value.url) {
+            value.text = '<a class="tag-link" target="' + options.tag_link_target + '" href="' + value.url + '">' + value.text + '</a>';
+        }
 
         var icon = '';
-        if(options.can_delete){
+        if(options.can_delete) {
             icon = $(document.createElement('a'))
                 .attr({
+                    "href": "javascript:void(0)",
+                    "class": "tag-remove",
                     "data-toggle": "tooltip",
                     "title": options.lang.delete
                 })
                 .html(options.templates.delete_icon.toString())
-                .click(function(){
+                .click(function() {
                     $self.removeTag(this);
                 });
         }
 
-        var tag = $(options.templates.pill.format(value.text, value.id)).append(icon);
+        var num = value.num > 0 ? options.templates.number.format(value.num) : '';
 
+        var tag = $(options.templates.pill.format(value.text, value.id))
+            .append(num, icon, $(document.createElement('input'))
+                .attr({
+                    "data-tag-hidden": value.id,
+                    "name": options.input_name,
+                    "type": "hidden",
+                    "value": value.id
+                })
+            );
 
         pills_list.append(tag);
-        hidden_list.append($(document.createElement('input')).attr({
-            "data-tag-hidden": value.id,
-            "name": options.input_name,
-            "type": "hidden",
-            "value": value.id
-        }));
     }
 
     Tags.prototype.removeTag = function(tag) {
-        $(tag).closest('[data-tag-id]').animate({width:0, padding:0}, 200, 'swing', function(){
-            $(this).remove();
+        $(tag).closest('[data-tag-id]').animate({width: 0, "padding-right": 0, "padding-left": 0}, 200, 'swing', function() {
+            var $this = $(this);
+            if(options.remove_url) {
+                $.ajax({
+                    dataType: 'json', type: 'post', async: false, url: options.remove_url, data: {id: $this.data('tag-id')}
+                });
+            }
+            options.onRemove($this);
+            $this.remove();
         });
     }
 
-    $.fn.tags = function (params) {
+    $.fn.tags = function(params) {
         options = $.extend(true, {}, defaults, params);
-        return this.each(function () {
+        return this.each(function() {
             new Tags($(this));
         })
     }
 }(window.jQuery));
 
-if (!String.prototype.format) {
-    String.prototype.format = function () {
+if(!String.prototype.format) {
+    String.prototype.format = function() {
         var args = arguments;
-        return this.replace(/{(\d+)}/g, function (match, number) {
+        return this.replace(/{(\d+)}/g, function(match, number) {
             return typeof args[number] != 'undefined' ? args[number] : match;
         });
     };

urls/defaults.json

@@ -2,12 +2,15 @@
     {
         "id": "2",
         "text": "Apple",
-        "html": "This is <b>Apple</b>!"
+        "html": "This is <b>Apple</b>!",
+        "num": 5,
+        "url": "http://tags/"
     },
     {
         "id": "3",
         "text": "Mango",
-        "html": "I like <b>Mango</b>!"
+        "html": "I like <b>Mango</b>!",
+        "url": "/"
     },
     {
         "id": "5",