"Cloud Tag"
Bootstrap 3.0.0 Snippet by kdridi

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2> </div> <div class="row" id="tags"> <div class="tag-list btn-group"> <button class="tag btn"> <a href="#">value</a> </button> </div> </div> </div>
(function($) { $(document).ready(function() { try { var Tag = function(parent, elemt) { this.parent = parent; this.elemt = elemt; }; Tag.prototype.value = function(text) { this.elemt.show(); this.elemt.find('a').text(text).attr('href', '#' + text); return this; }; Tag.prototype.show = function() { this.elemt.show(); return this.parent; }; var TagList = function() { this.elemt = $('#tags'); this.template = this.elemt.find('.tag-list .tag').first(); this.template.hide(); }; TagList.prototype.newTag = function() { var tag = this.elemt.find('.tag-list .tag').first(); tag.clone().insertBefore(tag); return new Tag(this, tag); }; var tagList = new TagList(); for(var index = 0; index < 100; ++index) { tagList.newTag().value('afd'+index).show(); } } catch(e) { alert(e); } }); })(jQuery);

Related: See More


Questions / Comments: