Скриншот
Код (установка в HTML-низ):
Скрипт
Код:<!--дополнительные смайлы v.3 © Romych--> <style type="text/css"> #wrapper {width: 500px;} /* вкладки доп смайлов */ ul.tabs {height: 24px;line-height: 23px;margin: 0 0 3px;list-style: none;} ul.tabs li {float: left;cursor:pointer;} ul.tabs li a {background:transparent url("https://forumstatic.ru/files/0017/d8/50/91984.png") no-repeat scroll 0 0 / cover ;color: #444444;display: block;margin-bottom: -1px;padding: 0 5px 1px;position: relative;text-align: center;text-decoration: none;width:76px;} ul.tabs li a:hover {color:#EFEFEF;background: url("https://forumstatic.ru/files/0017/d8/50/91984.png")no-repeat scroll 0 -25px/ cover; text-decoration:none;} ul.tabs li.tab-current a {color: #444;border:medium hidden;line-height: 22px;background-position: 0 -47px;} ul.tabs li.tab-current a:hover {color: #6A5ACD;} #smilies-area div[class^="t"]:not(.t1) {display: none;width: 450px;} </style> <script type="text/javascript"> var nabor = []; nabor[2] = [ 'https://image.ibb.co/dB5dGw/insm28026.gif', 'https://image.ibb.co/cKbUOb/insm28128.gif', 'https://image.ibb.co/b1fZpG/insm28201.gif', 'https://image.ibb.co/f1Q0UG/insm28209.gif', 'https://image.ibb.co/gxyLUG/negi09011.gif', 'https://image.ibb.co/bD1JGw/pini12076.gif', 'https://image.ibb.co/cWxEpG/tabi04005.gif', 'https://image.ibb.co/n3in9G/tabi04009.gif', 'https://image.ibb.co/m2q0UG/tabi04025.gif', 'https://image.ibb.co/g2gkww/tabi04028.gif', 'https://image.ibb.co/ebrkww/tabi04031.gif', 'https://image.ibb.co/iVqdGw/tabi04035.gif', 'https://image.ibb.co/kBuS9G/tabi04038.gif', 'https://image.ibb.co/gTvpOb/tabi04041.gif', 'https://image.ibb.co/eeww3b/tabi04047.gif', 'https://image.ibb.co/cFqdGw/tabi04051.gif', 'https://image.ibb.co/nnaCbw/tabi04054.gif', 'https://image.ibb.co/iZSQww/tabi04056.gif', 'https://image.ibb.co/ngGkww/tabi04057.gif', 'https://image.ibb.co/cpRUOb/tabi04097.gif', 'https://image.ibb.co/fde5ww/tabi04100.gif', 'https://image.ibb.co/es8b3b/tabi04114.gif', 'https://image.ibb.co/e1O9Ob/tabi04122.gif', 'https://image.ibb.co/cQ1kww/tabi04125.gif', 'https://image.ibb.co/hOYn9G/tabi04127.gif', 'https://image.ibb.co/nLvCbw/tabi04169.gif', 'https://image.ibb.co/jGHfUG/tabi04174.gif', 'https://image.ibb.co/dEPiib/tabi04176.gif', 'https://image.ibb.co/jQXEpG/tabi04185.gif', 'https://image.ibb.co/mbkCbw/tabi04186.gif', 'https://image.ibb.co/ctOb3b/tabi04188.gif', 'https://image.ibb.co/nKDXbw/tabi04190.gif', 'https://image.ibb.co/cKv0UG/tabi04194.gif' ]; nabor[3]= ['https://image.ibb.co/drHODb/diablo.gif', 'https://image.ibb.co/m4MiDb/resent.gif', 'https://image.ibb.co/nO3wYb/rossiya.gif', 'https://image.ibb.co/eA0bYb/sad.gif', 'https://image.ibb.co/iZtwYb/sarcasm.gif', 'https://image.ibb.co/jKPQRw/smajliki_praising.gif', 'https://image.ibb.co/kzXqtb/smile1.gif', 'https://image.ibb.co/b7CUmw/smile2.gif', 'https://image.ibb.co/n4rdeG/smile3.gif', 'https://image.ibb.co/gQ6YDb/smile4.gif', 'https://image.ibb.co/dDzmYb/smile6.gif', 'https://image.ibb.co/f2mYDb/smile7.gif', 'https://image.ibb.co/cDoftb/smile8.gif', 'https://image.ibb.co/kLSvRw/smile9.gif', 'https://image.ibb.co/jn54KG/smile10.gif', 'https://image.ibb.co/d1PLtb/smile12.gif', 'https://image.ibb.co/bziDDb/smile14.gif', 'https://image.ibb.co/hJeLtb/smile16.gif', 'https://image.ibb.co/cAn6Yb/smile18.gif', 'https://image.ibb.co/kPO26w/smile19.gif', 'https://image.ibb.co/gJEWzG/smile20.gif', 'https://image.ibb.co/f3cUmw/smile25.gif', 'https://image.ibb.co/iNTDDb/smile26.gif', 'https://image.ibb.co/it9yeG/smile37.gif', 'https://image.ibb.co/iRLh6w/smile41.gif', 'https://image.ibb.co/hFLRYb/smile46.gif', 'https://image.ibb.co/h1gpmw/smile47.gif', 'https://image.ibb.co/igtrzG/smile48.gif', 'https://image.ibb.co/fVUmYb/smile51.gif', 'https://image.ibb.co/fWF4KG/smile54.gif', 'https://image.ibb.co/cBPLtb/smile59.gif', 'https://image.ibb.co/nbDDDb/smile63.gif', 'https://image.ibb.co/maGpmw/smile67.gif', 'https://image.ibb.co/gqXUmw/smile74.gif', 'https://image.ibb.co/nH7vRw/smile76.gif', 'https://image.ibb.co/d2LtDb/smile100.gif', 'https://image.ibb.co/nKj9mw/smile106.gif', 'https://image.ibb.co/cQNJeG/smile109.gif', 'https://image.ibb.co/j7Oftb/smile132.gif', 'https://image.ibb.co/mS2JeG/smile134.gif', 'https://image.ibb.co/gw1BzG/smile140.gif', 'https://image.ibb.co/mhH6Yb/smile145.gif', 'https://image.ibb.co/creyeG/smile147.gif', 'https://image.ibb.co/e3bdeG/smile148.gif', 'https://image.ibb.co/nQuWzG/smile160.gif', 'https://image.ibb.co/jyCjKG/smile168.gif', 'https://image.ibb.co/gm4yeG/smile170.gif', 'https://image.ibb.co/cw8ftb/smile174.gif', 'https://image.ibb.co/ge7JeG/smile181.gif', 'https://image.ibb.co/bK5RYb/smile186.gif', 'https://image.ibb.co/hW0FRw/smile190.gif', 'https://image.ibb.co/n3bYDb/smile193.gif', 'https://image.ibb.co/mYbdeG/smile196.gif', 'https://image.ibb.co/dKXJeG/smile197.gif', 'https://image.ibb.co/hgwdeG/smile206.gif', 'https://image.ibb.co/jdDftb/smile215.gif', 'https://image.ibb.co/eYqRYb/smile225.gif', 'https://image.ibb.co/d11BzG/smile227.gif', 'https://image.ibb.co/krjWzG/smile232.gif', 'https://image.ibb.co/h2mdeG/smile262.gif', 'https://image.ibb.co/gdjyeG/smile270.gif', 'https://image.ibb.co/ceJPKG/smile280.gif', 'https://image.ibb.co/dUsUmw/smile358.gif', 'https://image.ibb.co/iqSvRw/smile372.gif', 'https://image.ibb.co/iX7vRw/smile376.gif', 'https://image.ibb.co/gjuLtb/smile379.gif', 'https://image.ibb.co/dRnJeG/smile380.gif', 'https://image.ibb.co/hAP9mw/smile381.gif', 'https://image.ibb.co/j7vtDb/smile382.gif', 'https://image.ibb.co/dbiftb/smile383.gif', 'https://image.ibb.co/c6c6Yb/smile385.gif', 'https://image.ibb.co/mEEmYb/smile386.gif', 'https://image.ibb.co/mWCJeG/smile394.gif', 'https://image.ibb.co/grwdeG/smile404.gif', 'https://image.ibb.co/ioDftb/smile405.gif', 'https://image.ibb.co/fGHvRw/smile408.gif', 'https://image.ibb.co/ejTftb/smile423.gif', 'https://image.ibb.co/m6p9mw/smile429.gif', 'https://image.ibb.co/iPYDDb/smile431.gif', 'https://image.ibb.co/dnaRYb/smile437.gif', 'https://image.ibb.co/htjyeG/smile438.gif', 'https://image.ibb.co/kFuaRw/smile439.gif', 'https://image.ibb.co/eqwN6w/smile448.gif', 'https://image.ibb.co/mfR0tb/smile453.gif', 'https://image.ibb.co/hTJDDb/smile454.gif', 'https://image.ibb.co/cmkwzG/2.gif', 'https://image.ibb.co/egi5tb/6.gif', 'https://image.ibb.co/k7Jabw/7.gif', 'https://image.ibb.co/cZaMGw/8.gif', 'https://image.ibb.co/erWHpG/29781735.gif', 'https://image.ibb.co/keWvbw/29781757.gif', 'https://image.ibb.co/cqbTww/29781761.gif', 'https://image.ibb.co/mYbdeG/smile196.gif', 'https://image.ibb.co/f3Hq9G/by.gif', 'https://image.ibb.co/dkAoww/icon_biggrin.gif', 'https://image.ibb.co/ms3mib/icon_neutral.gif', 'https://image.ibb.co/iRDmib/JC_doubledown.gif', 'https://image.ibb.co/e5ixpG/JC_doubleup.gif', 'https://image.ibb.co/dgce3b/JC_see_stars.gif', 'https://image.ibb.co/ger6ib/Kid_Rock_03.gif', 'https://image.ibb.co/mfYxpG/Kid_Rock_05.gif', 'https://image.ibb.co/nNdmib/l_coffee.gif', 'https://image.ibb.co/cMKFbw/Laie_74.gif', 'https://image.ibb.co/ikcOUG/MG_216.gif', 'https://image.ibb.co/d1Se3b/phil_04.gif', 'https://image.ibb.co/ghpLtb/smile455.gif', 'https://image.ibb.co/eJi26w/smile457.gif', 'https://image.ibb.co/iVzKpG/chad01020.gif', 'https://image.ibb.co/cDfQUG/chad01040.gif', 'https://image.ibb.co/edKKpG/flgbelar.gif', 'https://image.ibb.co/gUroib/flgrussi.gif', 'https://image.ibb.co/kaoC9G/funi01049.gif', 'https://image.ibb.co/g19kUG/funi01050.gif', 'https://image.ibb.co/gJ7Hbw/funi01052.gif', 'https://image.ibb.co/iV4xbw/funi01053.gif', 'https://image.ibb.co/mMaQUG/funi01081.gif', 'https://image.ibb.co/euqs9G/funi01093.gif', 'https://image.ibb.co/bCZxbw/funi01110.gif', 'https://image.ibb.co/nm3C9G/funi01113.gif', 'https://image.ibb.co/dY0s9G/funi01123.gif', 'https://image.ibb.co/bVKG3b/madi11017.gif', 'https://image.ibb.co/j77fUG/madi11043.gif', 'https://image.ibb.co/mSmJGw/madi11056.gif', 'https://image.ibb.co/g3T9Ob/misi07001.gif', 'https://image.ibb.co/mh179G/misi07010.gif', 'https://image.ibb.co/cqOyGw/misi07033.gif', 'https://image.ibb.co/jCjS9G/misi07040.gif', 'https://image.ibb.co/eCaCbw/misi07115.gif', 'https://image.ibb.co/ioU5ww/misi07119.gif', 'https://image.ibb.co/fVN3ib/misi07158.gif', 'https://image.ibb.co/e6Gkww/misi07162.gif', 'https://image.ibb.co/bALCbw/musi08017.gif', 'https://image.ibb.co/eGJb3b/negi09028.gif', 'https://image.ibb.co/kSR79G/pini12004.gif', 'https://image.ibb.co/c0US9G/pini12020.gif', 'https://image.ibb.co/mm2sbw/pini12055.gif', 'https://image.ibb.co/iLCsbw/pini12111.gif', 'https://image.ibb.co/mZsEpG/pini12118.gif', 'https://image.ibb.co/dhE5ww/pini12126.gif', 'https://image.ibb.co/iNWkww/pini12136.gif', 'https://image.ibb.co/nFmw3b/pini12146.gif', 'https://image.ibb.co/hNLdGw/pini12165.gif', 'https://image.ibb.co/kEcQww/pini12181.gif', 'https://image.ibb.co/gFCsbw/sadi02009.gif', 'https://image.ibb.co/cHrw3b/sati03014.gif', 'https://image.ibb.co/b8AZpG/sati03020.gif', 'https://image.ibb.co/dTqCbw/tabi04172.gif', 'https://image.ibb.co/d1Lh6w/yarost.gif' ]; nabor[4] = [ 'https://image.ibb.co/iW7x9G/35542318.gif', 'https://image.ibb.co/j89AUG/fors12004.gif', 'https://image.ibb.co/mUMPpG/fors12008.gif', 'https://image.ibb.co/iYeYib/fors12009.gif', 'https://image.ibb.co/dXVH9G/fors12010.gif', 'https://image.ibb.co/cPqvww/fors12011.gif', 'https://image.ibb.co/mvUzOb/fors12013.gif', 'https://image.ibb.co/iiMDib/fors12021.gif', 'https://image.ibb.co/nzkH9G/fors12025.gif', 'https://image.ibb.co/dFq63b/fors12034.gif', 'https://image.ibb.co/eYm2bw/fors12042.gif', 'https://image.ibb.co/iYVTGw/fors12043.gif', 'https://image.ibb.co/mdjAUG/fors12047.gif', 'https://image.ibb.co/i4GqUG/miss02045.gif', 'https://image.ibb.co/dpSx9G/miss02394.gif', 'https://image.ibb.co/nqMeOb/miss02905.gif', 'https://image.ibb.co/kRENbw/pads01001.gif', 'https://image.ibb.co/dOPzOb/pads01009.gif', 'https://image.ibb.co/movH9G/pads01011.gif', 'https://image.ibb.co/fMSKOb/pads01028.gif', 'https://image.ibb.co/g3Cx9G/pads01041.gif', 'https://image.ibb.co/is0jpG/pads01080.gif', 'https://image.ibb.co/cDGeOb/pads01090.gif' ]; $(function(){ $('#smilies-block').addClass('t1'); var vkladki = '<div id="wrapper"><ul class="tabs tabs1" onclick="return changeVisibility (\'smilies-area\', false)"><li class="t1 tab-current"><a>Базовые</a></li>'; vkladki += '<li class="t2"><a>Слоганы</a></li>'; //дополнительная вкладка, идущая следом за стандартным набором vkladki += '<li class="t3"><a>Классика</a></li>'; //дополнительная вкладка vkladki += '<li class="t4"><a>Печати</a></li>'; //дополнительная вкладка vkladki += '</ul>'; vkladki += '<div class="t2"></div>'; //дополнительный блок смайлов, идущий следом за стандартным vkladki += '<div class="t3"></div>'; //дополнительный блок смайлов vkladki += '<div class="t4"></div>'; //дополнительный блок смайлов vkladki += '</div>'; $('#smilies-area').prepend(vkladki); $.each(nabor, function(i){if (nabor[i]!=undefined){for (var q=0;q<nabor[i].length;q++){$('div.t'+i).append('<img src="'+nabor[i][q]+'" onclick=smile(\'[img]'+nabor[i][q]+'[/img]\') />');}}}); $('ul.tabs.tabs1 li').click(function(){var thisClass = this.className.slice(0,2);$('#smilies-area div[class^="t"]').hide();$('div.' + thisClass).fadeToggle('slow');$('ul.tabs.tabs1 li').removeClass('tab-current');$(this).addClass('tab-current'); });}); </script>
Названия вкладок в исходном скрипте замены на другие:
Стандартные → Базовые
Table → Слоганы
Classic → Классика
Stamp → Печати
Пример с тремя вкладками - здесь.