diff --git a/README.md b/README.md index 816bd32..a985bf3 100644 --- a/README.md +++ b/README.md @@ -29,6 +29,8 @@ $.tabsToSelect({ selectCalss: 'styler', // Класс, добавляемый с обёртке селекта selectWrapperCalss: 'styler-wrapper', + // Куда вставлять сформированный селект (селектор внутри блока с табами) + selectAppendTo: '', onInit: function () { // Срабатывает при инициализации плагина }, @@ -41,6 +43,6 @@ $.tabsToSelect({ }, onResized: function () { // Срабатывает при изменении размера окна - }, + } }); ``` diff --git a/src/js/jquery.tabsToSelect.js b/src/js/jquery.tabsToSelect.js index 23730c7..782bdba 100644 --- a/src/js/jquery.tabsToSelect.js +++ b/src/js/jquery.tabsToSelect.js @@ -1,8 +1,8 @@ /**! * Плагин для реализации адаптивных табов, превращающихся в селект * @link https://github.com/pafnuty/tabsToSelect - * @date 27.10.2015 - * @version 1.0.0 + * @date 05.02.2016 + * @version 1.0.2 * */ (function ($, window, document) { @@ -10,12 +10,15 @@ var pluginName = 'tabsToSelect', previousResizeWidth = 0, $window = $(window), - $tabs = $('.tts-tabs'), + // $document = $(document), + $tabs, defaults = { // Класс, добавляемый с селекту selectCalss: '', // Класс, добавляемый с обёртке селекта selectWrapperCalss: '', + // Куда вставлять сформированный селект (селектор внутри блока с табом) + selectAppendTo: '', // Срабатывает при инициализации плагина onInit: function () {}, // Срабатывает перед сменой активного таба @@ -25,10 +28,19 @@ // Срабатывает после смены активного таба afterTabSwich: function (event) {}, // Срабатывает при изменении размера окна - onResized: function () {}, + onResized: function () {} }; + /** + * Костылёк, но без него некорректно работает, если перенести скрипт в шапку. + * + * @todo По хорошему нужно переписать плагин. + */ + $(function () { + $tabs = $('.tts-tabs'); + }); + function Plugin(obj, options) { this.settings = $.extend({}, defaults, options); @@ -44,22 +56,22 @@ // Пробегаем по табам $.each($tabs, function () { - var $this = $(this), // Текущий блок с табами + var $tabBlock = $(this), // Текущий блок с табами $select = $(''), // Блок с селектом - $tabSwitchers = $this.find('.tts-tabs-switcher'), // Переключатели табов + $tabSwitchers = $tabBlock.find('.tts-tabs-switcher'), // Переключатели табов $selectInner = []; // Массив для option`s // Пробегаем по переключателям табов и формируем селект $.each($tabSwitchers, function (i, tabSwitcher) { var $tabSwitcher = $(tabSwitcher), // Текущий переключатель selected = ($tabSwitcher.hasClass('active')) ? 'selected' : '', // Определяем активный таб - option = ''; + option = ''; $selectInner.push(option); }); $select - // Добавляем в селект пункты + // Добавляем в селект пункты .html($selectInner.join('')) // Навешиваем обработчик на изменение этого селекта .on('change.' + pluginName, function (e) { @@ -69,27 +81,39 @@ // Запускаем событие смены активного таба $(this).trigger({ type: 'tabSwitch.' + pluginName, - tab: tab, + tab: tab }); } }); - $this - // Вставляем сформированный селект в начало блока с табами - .prepend($select) + // Вставляем сформированный селект в положенное для него место + if (self.settings.selectAppendTo) { + var $selectAppendTo = $tabBlock.find(self.settings.selectAppendTo); + if ($selectAppendTo.length) { + $select.appendTo($selectAppendTo); + } + else { + $tabBlock.prepend($select); + } + } + else { + $tabBlock.prepend($select); + } + + $tabBlock // Навешиваем обработчик на клик по неативным переключателям .on('click.' + pluginName, '.tts-tabs-switcher:not(.active)', function () { var tab = $(this).index(); // Запускаем событие смены активного таба $(this).trigger({ type: 'tabSwitch.' + pluginName, - tab: tab, + tab: tab }); }) // Навешиваем обработчик для смены активного таба .on('tabSwitch.' + pluginName, function (e) { - // Выполняем колбэк перед сменой активного таба - var beforeTabSwich = self.settings.beforeTabSwich.call($this, e); + // Выполняем функцию перед сменой активного таба + var beforeTabSwich = self.settings.beforeTabSwich.call($thisTab, e); if (beforeTabSwich) { var $thisTab = $($tabSwitchers[e.tab]), @@ -99,7 +123,7 @@ // Меняем активные пункт селекта $select.val(e.tab).trigger({ type: 'change', - flag: true, // для предотвращения рекурсии при клике на переключатель таба + flag: true // для предотвращения рекурсии при клике на переключатель таба }); // Меняем активный таб @@ -117,8 +141,8 @@ } - // Выполняем колбэк после смены активного таба - self.settings.afterTabSwich.call($this, e); + // Выполняем функцию после смены активного таба + self.settings.afterTabSwich.call($tabBlock, e); }); // Заворачиваем селект в контейнер $select.wrap('
'); @@ -128,7 +152,7 @@ self.winResize(event); }); - // Выполняем колбэк после инициализации плагина + // Выполняем функцию после инициализации плагина self.settings.onInit.call($tabs); @@ -142,7 +166,7 @@ return; } - // Выполняем колбэк при ресайзе окна + // Выполняем функцию при ресайзе окна this.settings.onResized(); previousResizeWidth = windowWidth; @@ -150,11 +174,11 @@ } }); - if ($[pluginName] == undefined) { + if (typeof $[pluginName] === 'undefined') { $[pluginName] = function (options) { return new Plugin(this, options); }; } -}(jQuery, window, document)); \ No newline at end of file +}($, window, document)); \ No newline at end of file diff --git a/src/js/jquery.tabsToSelect.min.js b/src/js/jquery.tabsToSelect.min.js index e55eef9..3e85e2c 100644 --- a/src/js/jquery.tabsToSelect.min.js +++ b/src/js/jquery.tabsToSelect.min.js @@ -1,8 +1,8 @@ /**! * Плагин для реализации адаптивных табов, превращающихся в селект * @link https://github.com/pafnuty/tabsToSelect - * @date 27.10.2015 - * @version 1.0.0 + * @date 05.02.2016 + * @version 1.0.2 * */ -!function(t,e,i){"use strict";function s(e,i){this.settings=t.extend({},o,i),this._defaults=o,this.init()}var n="tabsToSelect",a=0,c=t(e),r=t(".tts-tabs"),o={selectCalss:"",selectWrapperCalss:"",onInit:function(){},beforeTabSwich:function(t){return!0},afterTabSwich:function(t){},onResized:function(){}};t.extend(s.prototype,{init:function(){var e=this;t.each(r,function(){var i=t(this),s=t(''),a=i.find(".tts-tabs-switcher"),c=[];t.each(a,function(e,i){var s=t(i),n=s.hasClass("active")?"selected":"",a='";c.push(a)}),s.html(c.join("")).on("change."+n,function(e){if(!e.flag){var i=1*t(this).val();t(this).trigger({type:"tabSwitch."+n,tab:i})}}),i.prepend(s).on("click."+n,".tts-tabs-switcher:not(.active)",function(){var e=t(this).index();t(this).trigger({type:"tabSwitch."+n,tab:e})}).on("tabSwitch."+n,function(c){var r=e.settings.beforeTabSwich.call(i,c);if(r){var o=t(a[c.tab]),l=o.closest(".tts-tabs").find(".tts-tabs-item"),h=l.eq(o.index());s.val(c.tab).trigger({type:"change",flag:!0}),o.addClass("active").siblings().removeClass("active"),l.removeClass("active"),h.addClass("active"),o.trigger({type:"tabClick."+n,tab:h})}e.settings.afterTabSwich.call(i,c)}),s.wrap('')}),c.on("resize."+n+" orientationchange."+n,function(t){e.winResize(t)}),e.settings.onInit.call(r)},winResize:function(t){if(t&&("resize"===t.type||"orientationchange"===t.type)){var e=c.width();if(e===a)return;this.settings.onResized(),a=e}}}),void 0==t[n]&&(t[n]=function(t){return new s(this,t)})}(jQuery,window,document); \ No newline at end of file +!function(t,e,i){"use strict";function s(e,i){this.settings=t.extend({},r,i),this._defaults=r,this.init()}var n,a="tabsToSelect",c=0,o=t(e),r={selectCalss:"",selectWrapperCalss:"",selectAppendTo:"",onInit:function(){},beforeTabSwich:function(t){return!0},afterTabSwich:function(t){},onResized:function(){}};t(function(){n=t(".tts-tabs")}),t.extend(s.prototype,{init:function(){var e=this;t.each(n,function(){var i=t(this),s=t(''),n=i.find(".tts-tabs-switcher"),c=[];if(t.each(n,function(e,i){var s=t(i),n=s.hasClass("active")?"selected":"",a='";c.push(a)}),s.html(c.join("")).on("change."+a,function(e){if(!e.flag){var i=1*t(this).val();t(this).trigger({type:"tabSwitch."+a,tab:i})}}),e.settings.selectAppendTo){var o=i.find(e.settings.selectAppendTo);o.length?s.appendTo(o):i.prepend(s)}else i.prepend(s);i.on("click."+a,".tts-tabs-switcher:not(.active)",function(){var e=t(this).index();t(this).trigger({type:"tabSwitch."+a,tab:e})}).on("tabSwitch."+a,function(c){var o=e.settings.beforeTabSwich.call(r,c);if(o){var r=t(n[c.tab]),l=r.closest(".tts-tabs").find(".tts-tabs-item"),f=l.eq(r.index());s.val(c.tab).trigger({type:"change",flag:!0}),r.addClass("active").siblings().removeClass("active"),l.removeClass("active"),f.addClass("active"),r.trigger({type:"tabClick."+a,tab:f})}e.settings.afterTabSwich.call(i,c)}),s.wrap('')}),o.on("resize."+a+" orientationchange."+a,function(t){e.winResize(t)}),e.settings.onInit.call(n)},winResize:function(t){if(t&&("resize"===t.type||"orientationchange"===t.type)){var e=o.width();if(e===c)return;this.settings.onResized(),c=e}}}),"undefined"==typeof t[a]&&(t[a]=function(t){return new s(this,t)})}($,window,document); \ No newline at end of file