Итак. Имеем вот такой скрипт превращения выпадающего списка в маркированный.
jQuery.fn.selecttolist = function(options) {
return this.each(function() {
var select = $(this);
select.hide();
var buttonsHtml = $('
- ');
optGroup.children('option').each(function() {
var liHtml = $('');
if ($(this).attr('disabled') || select.attr('disabled')) {
liHtml.addClass('disabled');
liHtml.append('' + $(this).html() + '');
} else {
liHtml.append('' + $(this).html() + '');
}
if ((!options || !options.noDefault) && select.attr("selectedIndex") == selectIndex) {
liHtml.children('a, span').addClass('picked');
}
ulHtml.append(liHtml);
selectIndex++;
});
buttonsHtml.append(ulHtml);
}
var optGroups = select.children('optgroup');
if (optGroups.length == 0) {
addOptGroup(select);
} else {
optGroups.each(function() {
addOptGroup($(this));
});
}
select.after(buttonsHtml);
buttonsHtml.find('a').click(function(e) {
e.preventDefault();
buttonsHtml.find('a, span').removeClass('picked');
$(this).addClass('picked');
$(select.find('option')[$(this).attr('data-select-index')]).attr('selected', 'selected');
select.trigger('change');
});
});
};
$('select').selecttolist();
$('li:first-child').children().addClass('picked');
body,
ul {
margin: 0;
padding: 0;
}
ul {
display: flex;
flex-wrap: wrap;
list-style: none;
}
a {
display: block;
color: #333;
text-decoration: none;
padding: 10px;
}
div {
padding: 30px;
}
a:hover,
.picked {
background: #eee;
}
Вопрос такой. Возможно ли приделать к данному решению проверку содержимого опций селектора и заполнения фона блоков найденым значением. Пробую 2 варианта.
1-й. Когда проверяется содержимое опции по первому символу и количеству символов. Например, в таком виде опции: , если первый символ #, а всего символов 7, то вставляем этот хеш в background ссылки созданного выпадающего списка.
2-й. Создать файл с заданными значениями вот такого вида:
jQuery.fn.selecttolist.init({ colors: { 'Черный': '#000000', 'Красный': '#FF0000', 'Белый': '#FFFFFF', 'Серый': '#CCCCCC', 'Полоска': 'url(/images/poloska.png) no-repeat center center', 'Кружок': 'url(/images/krug.png) no-repeat center center' }, hideColorsTitle: true });
И при совпадении содержимого опции с заданными значениями из списка, подставлять это значение в background ссылки созданного маркированного списка.
Что хотелось бы получить:
Буду благодарен за любую помощь ибо сам уже замучился с данной задачей.
Ответ
jQuery.fn.selecttolist = function(options) { return this.each(function() { var select = $(this); select.hide(); var buttonsHtml = $('
'); var selectIndex = 0; var addOptGroup = function(optGroup) { if (optGroup.attr('label')) { buttonsHtml.append('' + optGroup.attr('label') + ''); } var ulHtml = $('- ');
optGroup.children('option').each(function() {
var liHtml = $('');
if ($(this).attr('disabled') || select.attr('disabled')) {
liHtml.addClass('disabled');
liHtml.append('' + $(this).html() + '');
} else {
var content = $(this).html();
var style = "";
if (/#[0-9a-fA-F]{6}/.test(content)) { // is css-color
style = "background: " + content;
} else if (content in options.colors) { // is predefined background
style = "background: " + options.colors[content];
}
liHtml.append('' + $(this).html() + '');
}
if ((!options || !options.noDefault) && select.attr("selectedIndex") == selectIndex) {
liHtml.children('a, span').addClass('picked');
}
ulHtml.append(liHtml);
selectIndex++;
});
buttonsHtml.append(ulHtml);
}
var optGroups = select.children('optgroup');
if (optGroups.length == 0) {
addOptGroup(select);
} else {
optGroups.each(function() {
addOptGroup($(this));
});
}
select.after(buttonsHtml);
buttonsHtml.find('a').click(function(e) {
e.preventDefault();
buttonsHtml.find('a, span').removeClass('picked');
$(this).addClass('picked');
$(select.find('option')[$(this).attr('data-select-index')]).attr('selected', 'selected');
select.trigger('change');
});
});
};
$('select').selecttolist({
colors: {
'Черный': '#000000',
'Красный': '#FF0000',
'Белый': '#FFFFFF',
'Серый': '#CCCCCC',
'Полоска': 'url(/images/poloska.png) no-repeat center center',
'Кружок': 'url(/images/krug.png) no-repeat center center'
},
hideColorsTitle: true
});
$('li:first-child').children().addClass('picked');
body,
ul {
margin: 0;
padding: 0;
}
ul {
display: flex;
flex-wrap: wrap;
list-style: none;
}
a {
display: block;
color: #333;
text-decoration: none;
padding: 10px;
}
div {
padding: 30px;
}
a:hover,
.picked {
background: #eee;
}
Комментариев нет:
Отправить комментарий