нужно немного переделать тумлер на селекте
есть такой код
$(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 селектов. при открытии одного и клике на другой никакой из них не закрывается. помогите срочно! |
sunat1709@mail.ru,
может полный пример на пару селектов, здесь или в другой песочнице? |
вот сами селекты. обычные селекты
<select class="makeMeFancy"> <option data-icon="####">пункт</option> </select> <select class="makeMeFancy"> <options data-icon="####">пункт</options> </select> думаю надо что то цикла замутить. выборку из цикла класса expanted, и задать им удаление класса. я примерно понял что надо делать. но реализовать не могу, так как не владею JS а только PHP немного. |
sunat1709@mail.ru,
макет это всё полностью и html и css и js. строка 98 в конец
$('.dropDown').not(dropDown).trigger('hide');
|
sunat1709@mail.ru,
ненужно уже ничего смотрите пост №4 |
ура! получилось!
спасибо огромное! вроде какая-то мелочь, а 4 день не мог решить! благодарю! хорошо что есть такие люди как Вы!:dance: :dance: :dance: :thanks: :thanks: :thanks:
|
| Часовой пояс GMT +3, время: 09:06. |