Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.12.2016, 14:18
Новичок на форуме
Отправить личное сообщение для sunat1709@mail.ru Посмотреть профиль Найти все сообщения от sunat1709@mail.ru
 
Регистрация: 04.12.2016
Сообщений: 6

нужно немного переделать тумлер на селекте
есть такой код
$(document).ready(function(){
  
  $('select.makeMeFancy').tzSelect({
    render : function(option){
      return $('<li>',{
        html:   '<img src="'+option.data('icon')+'" /><span>'+
            option.data('html-text')+'</span>'
      });
    },
    className : 'hasDetails'
  });
  
  // Calling the default version of the dropdown
  $('select.regularSelect').tzSelect();
 
});

(function($){
  
  $.fn.tzSelect = function(options){
    options = $.extend({
      render : function(option){
        return $('<li>',{
          html : option.text()
        });
      },
      className : ''
    },options);
    
    return this.each(function(){
      
      // The "this" points to the current select element:
      
      var select = $(this);
    
      var selectBoxContainer = $('<div>',{
        width       : select.outerWidth(),
        className   : 'tzSelect',
        html        : '<div class="selectBox"></div>'
      });
    
      var dropDown = $('<ul>',{className:'dropDown'});
      var selectBox = selectBoxContainer.find('.selectBox');
      
      // Looping though the options of the original select element
 
      if(options.className){
        dropDown.addClass(options.className);
      }
      
      select.find('option').each(function(i){
        var option = $(this);
    
        if(i==select.attr('selectedIndex')){
          selectBox.html(option.text());
        }
        
        // As of jQuery 1.4.3 we can access HTML5 
        // data attributes with the data() method.
        
        if(option.data('skip')){
          return true;
        }
        
        // Creating a dropdown item according to the
        // data-icon and data-html-text HTML5 attributes:
        
        var li = options.render(option);
 
        li.click(function(){
          
          selectBox.html(option.text());
          dropDown.trigger('hide');
          
          // When a click occurs, we are also reflecting
          // the change on the original select element:
          select.val(option.val());
          $( "form:first" ).trigger( "submit" );
          return false;
        });
    
        dropDown.append(li);
      });
      
      selectBoxContainer.append(dropDown.hide());
      select.hide().after(selectBoxContainer);
      
      // Binding custom show and hide events on the dropDown:
      
      dropDown.bind('show',function(){
        
        if(dropDown.is(':animated')){
          return false;
        }
        
        selectBox.addClass('expanded');
        dropDown.slideDown();
        
      }).bind('hide',function(){
        
        if(dropDown.is(':animated')){
          return false;
        }
        
        selectBox.removeClass('expanded');
        dropDown.slideUp();
        
      }).bind('toggle',function(){
        if(selectBox.hasClass('expanded')){
          dropDown.trigger('hide');
        }
        else dropDown.trigger('show');
      });
      
      selectBox.click(function(){
        dropDown.trigger('toggle');
        return false;
      });
    
      // If we click anywhere on the page, while the
      // dropdown is shown, it is going to be hidden:
      
      $(document).click(function(){
        dropDown.trigger('hide');
      });
    });
  }
  
})(jQuery);


так вот, у меня 8 селектов. при открытии одного и клике на другой никакой из них не закрывается. помогите срочно!
Ответить с цитированием
  #2 (permalink)  
Старый 04.12.2016, 14:40
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,078

sunat1709@mail.ru,
может полный пример на пару селектов, здесь или в другой песочнице?
Ответить с цитированием
  #3 (permalink)  
Старый 04.12.2016, 14:49
Новичок на форуме
Отправить личное сообщение для sunat1709@mail.ru Посмотреть профиль Найти все сообщения от sunat1709@mail.ru
 
Регистрация: 04.12.2016
Сообщений: 6

вот сами селекты. обычные селекты
<select class="makeMeFancy">
  <option data-icon="####">пункт</option>
</select>
<select class="makeMeFancy">
  <options data-icon="####">пункт</options>
</select>

думаю надо что то цикла замутить. выборку из цикла класса expanted, и задать им удаление класса. я примерно понял что надо делать. но реализовать не могу, так как не владею JS а только PHP немного.

Последний раз редактировалось sunat1709@mail.ru, 04.12.2016 в 14:54. Причина: добавил инфу
Ответить с цитированием
  #4 (permalink)  
Старый 04.12.2016, 14:53
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,078

sunat1709@mail.ru,
макет это всё полностью и html и css и js.
строка 98 в конец
$('.dropDown').not(dropDown).trigger('hide');
Ответить с цитированием
  #5 (permalink)  
Старый 04.12.2016, 15:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,078

sunat1709@mail.ru,
ненужно уже ничего смотрите пост №4
Ответить с цитированием
  #6 (permalink)  
Старый 04.12.2016, 15:09
Новичок на форуме
Отправить личное сообщение для sunat1709@mail.ru Посмотреть профиль Найти все сообщения от sunat1709@mail.ru
 
Регистрация: 04.12.2016
Сообщений: 6

ура! получилось!
спасибо огромное! вроде какая-то мелочь, а 4 день не мог решить! благодарю! хорошо что есть такие люди как Вы!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Нужно переделать (немного изменить) скрипт в шаблоне сайта. dmitry116 Работа 0 19.09.2016 14:45
помогите немного переделать форму обратной связи rav Общие вопросы Javascript 0 20.10.2011 16:41
Немного переделать скрипт генерации логинов leny Общие вопросы Javascript 3 12.10.2011 18:08
Нужно переделать скрипт Ksushan Работа 4 29.05.2011 00:04