"Iconpicker"
Bootstrap 3.0.0 Snippet by victor-valencia

<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>Iconpicker</h2> <div class="col-md-12"> <button class="btn btn-default" data-icon="glyphicon-eject" role="iconpicker">Hola</button> </div> </div> </div>
.caret { margin-left: 10px !important; }
$(function(){ var icons = [ 'glyphicon-adjust', 'glyphicon-align-center', 'glyphicon-align-justify', 'glyphicon-align-left', 'glyphicon-align-right', 'glyphicon-arrow-down', 'glyphicon-arrow-left', 'glyphicon-arrow-right', 'glyphicon-arrow-up', 'glyphicon-asterisk', 'glyphicon-backward', 'glyphicon-ban-circle', 'glyphicon-barcode', 'glyphicon-bell', 'glyphicon-bold', 'glyphicon-book', 'glyphicon-bookmark', 'glyphicon-briefcase', 'glyphicon-bullhorn', 'glyphicon-calendar', 'glyphicon-camera', 'glyphicon-certificate', 'glyphicon-check', 'glyphicon-chevron-down', 'glyphicon-chevron-left', 'glyphicon-chevron-right', 'glyphicon-chevron-up', 'glyphicon-circle-arrow-down', 'glyphicon-circle-arrow-left', 'glyphicon-circle-arrow-right', 'glyphicon-circle-arrow-up', 'glyphicon-cloud', 'glyphicon-cloud-download', 'glyphicon-cloud-upload', 'glyphicon-cog', 'glyphicon-collapse-down', 'glyphicon-collapse-up', 'glyphicon-comment', 'glyphicon-compressed', 'glyphicon-copyright-mark', 'glyphicon-credit-card', 'glyphicon-cutlery', 'glyphicon-dashboard', 'glyphicon-download', 'glyphicon-download-alt', 'glyphicon-earphone', 'glyphicon-edit', 'glyphicon-eject', 'glyphicon-envelope', 'glyphicon-euro', 'glyphicon-exclamation-sign', 'glyphicon-expand', 'glyphicon-export', 'glyphicon-eye-close', 'glyphicon-eye-open', 'glyphicon-facetime-video', 'glyphicon-fast-backward', 'glyphicon-fast-forward', 'glyphicon-file', 'glyphicon-film', 'glyphicon-filter', 'glyphicon-fire', 'glyphicon-flag', 'glyphicon-flash', 'glyphicon-floppy-disk', 'glyphicon-floppy-open', 'glyphicon-floppy-remove', 'glyphicon-floppy-save', 'glyphicon-floppy-saved', 'glyphicon-folder-close', 'glyphicon-folder-open', 'glyphicon-font', 'glyphicon-forward', 'glyphicon-fullscreen', 'glyphicon-gbp', 'glyphicon-gift', 'glyphicon-glass', 'glyphicon-globe', 'glyphicon-hand-down', 'glyphicon-hand-left', 'glyphicon-hand-right', 'glyphicon-hand-up', 'glyphicon-hd-video', 'glyphicon-hdd', 'glyphicon-header', 'glyphicon-headphones', 'glyphicon-heart', 'glyphicon-heart-empty', 'glyphicon-home', 'glyphicon-import', 'glyphicon-inbox', 'glyphicon-indent-left', 'glyphicon-indent-right', 'glyphicon-info-sign', 'glyphicon-italic', 'glyphicon-leaf', 'glyphicon-link', 'glyphicon-list', 'glyphicon-list-alt', 'glyphicon-lock', 'glyphicon-log-in', 'glyphicon-log-out', 'glyphicon-magnet', 'glyphicon-map-marker', 'glyphicon-minus', 'glyphicon-minus-sign', 'glyphicon-move', 'glyphicon-music', 'glyphicon-new-window', 'glyphicon-off', 'glyphicon-ok', 'glyphicon-ok-circle', 'glyphicon-ok-sign', 'glyphicon-open', 'glyphicon-paperclip', 'glyphicon-pause', 'glyphicon-pencil', 'glyphicon-phone', 'glyphicon-phone-alt', 'glyphicon-picture', 'glyphicon-plane', 'glyphicon-play', 'glyphicon-play-circle', 'glyphicon-plus', 'glyphicon-plus-sign', 'glyphicon-print', 'glyphicon-pushpin', 'glyphicon-qrcode', 'glyphicon-question-sign', 'glyphicon-random', 'glyphicon-record', 'glyphicon-refresh', 'glyphicon-registration-mark', 'glyphicon-remove', 'glyphicon-remove-circle', 'glyphicon-remove-sign', 'glyphicon-repeat', 'glyphicon-resize-full', 'glyphicon-resize-horizontal', 'glyphicon-resize-small', 'glyphicon-resize-vertical', 'glyphicon-retweet', 'glyphicon-road', 'glyphicon-save', 'glyphicon-saved', 'glyphicon-screenshot', 'glyphicon-sd-video', 'glyphicon-search', 'glyphicon-send', 'glyphicon-share', 'glyphicon-share-alt', 'glyphicon-shopping-cart', 'glyphicon-signal', 'glyphicon-sort', 'glyphicon-sort-by-alphabet', 'glyphicon-sort-by-alphabet-alt', 'glyphicon-sort-by-attributes', 'glyphicon-sort-by-attributes-alt', 'glyphicon-sort-by-order', 'glyphicon-sort-by-order-alt', 'glyphicon-sound-5-1', 'glyphicon-sound-6-1', 'glyphicon-sound-7-1', 'glyphicon-sound-dolby', 'glyphicon-sound-stereo', 'glyphicon-star', 'glyphicon-star-empty', 'glyphicon-stats', 'glyphicon-step-backward', 'glyphicon-step-forward', 'glyphicon-stop', 'glyphicon-subtitles', 'glyphicon-tag', 'glyphicon-tags', 'glyphicon-tasks', 'glyphicon-text-height', 'glyphicon-text-width', 'glyphicon-th', 'glyphicon-th-large', 'glyphicon-th-list', 'glyphicon-thumbs-down', 'glyphicon-thumbs-up', 'glyphicon-time', 'glyphicon-tint', 'glyphicon-tower', 'glyphicon-transfer', 'glyphicon-trash', 'glyphicon-tree-conifer', 'glyphicon-tree-deciduous', 'glyphicon-unchecked', 'glyphicon-upload', 'glyphicon-usd', 'glyphicon-user', 'glyphicon-volume-down', 'glyphicon-volume-off', 'glyphicon-volume-up', 'glyphicon-warning-sign', 'glyphicon-wrench', 'glyphicon-zoom-in', 'glyphicon-zoom-out', ]; var length = icons.length; var rows = 3; var cols = 4; var target = $('button[role="iconpicker"]').html(''); var input = $('<input type="hidden"></input>') var span = $('<span></span>'); target.append(span).append(input).append('<span class="caret"></span>'); target.data('page', 1); var updateNav = function(page){ var total_pages = Math.ceil( length / (cols * rows) ); table.find('.page-count').html(page + ' / ' + total_pages); if(page == 1){ table.find('.btn-previous').addClass('disabled'); } else{ table.find('.btn-previous').removeClass('disabled'); } if(page == total_pages){ table.find('.btn-next').addClass('disabled'); } else{ table.find('.btn-next').removeClass('disabled'); } }; var table = $('<table class="table-icons"><thead></thead><tbody></tbody></table>'); var tr = $('<tr></tr>'); for(var i=0; i<cols; i++){ var btn = $('<button class="btn btn-primary"><span class="glyphicon"></span></button>'); var td = $('<td class="text-center"></td>'); if(i == 0 || i == cols - 1){ btn.val((i==0) ? -1: 1); btn.addClass((i==0) ? 'btn-previous': 'btn-next'); btn.find('span').addClass((i==0) ? 'glyphicon-arrow-left': 'glyphicon-arrow-right'); td.append(btn); tr.append(td); } else if(tr.find('.page-count').length == 0){ td.attr('colspan', cols-2).append('<span class="page-count"></span>'); tr.append(td); } } table.find('thead').append(tr); var bindEvents = function(){ table.find('.btn-previous, .btn-next').off('click').on('click', function(){ //console.log(this); var page = parseInt(target.data('page')); var inc = parseInt($(this).val()); changeList(page+inc); }); table.find('.btn-icon').off('click').on('click', function(){ //console.log(this); select($(this).val()); }); } updateNav(1); var selected = -1; var select = function(icon){ //console.log(icon); selected = $.inArray(icon, icons); if(icon != '' && selected >= 0){ target.data('icon', icon); input.val(icon); span.attr('class', '').addClass('glyphicon').addClass(icon); table.find('button.btn-warning').removeClass('btn-warning'); target.popover('hide'); } } var switchPage = function(icon){ //console.log(icon); selected = $.inArray(icon, icons); if(icon != '' && selected >= 0){ var page = (selected != 0) ? Math.ceil( selected / (cols * rows) ) : 1; // changeList(page); } table.find('.'+icon).parent().addClass('btn-warning'); } var changeList = function(page){ page = parseInt(page); updateNav(page); var tbody = table.find('tbody').empty(); var offset = (page - 1) * rows * cols; for(var i=0; i<rows; i++){ var tr = $('<tr></tr>'); for(var j=0; j<cols; j++){ var pos = offset+(i*cols)+j; //console.log(offset+'--'+i+'---'+rows+'---'+j+'---'+cols); var btn = $('<button class="btn btn-default btn-icon"></button>').hide(); if(pos < length){ btn = $('<button class="btn btn-default btn-icon" value="' + icons[pos] + '"><span class="glyphicon ' + icons[pos] + '"></span></button>'); } var td = $('<td></td>').append(btn); tr.append(td); } tbody.append(tr); } target.data('page', page); bindEvents(); } changeList(1); target.popover({ //trigger: 'hover', //title: 'X', html: true, content: table, }).on('shown.bs.popover', function () { //console.log('show.bs.popover'); switchPage(target.data('icon')); bindEvents(); }) select(target.data('icon')); });

Related: See More


Questions / Comments: