| |
|
|
| | Всем привет. Ф-ция предназначена для стилизованного селекта.
Вызывается так - newselect();
А хотелось бы - $('div.select-text').newselect();
Сама ф-ция:
function newselect(){
var num = -1;
$('div.select-text').each(function(index){
$('div.select-text').eq(index).click(function(event){
if(num != index){
event.stopPropagation();
if(num != -1){
$('div.select-text').eq(num).removeAttr('style').find('div.select-box').removeAttr('style');
}
if($(event.target).closest('div.select-box').length == 0 && $(this).is('div.blocked') == false){
var lhg = 0;
$(this).css('box-shadow', '0 0 4px #929292').find('div.select-box').css({'display': 'block', 'box-shadow' : '0 0 4px #929292'}).find('li').each(function(){
lhg += $(this).innerHeight();
});
if(lhg > 264){
if($(this).find('li.active').attr('rel') != 0){
$(this).find('div.viewport').css('height', 264).parent().tinyscrollbar_update('relative');
}else{
$(this).find('div.scrollbar').removeClass('hidden').next().css('height', 264).removeClass('noscroll').parent().tinyscrollbar_update();
}
}else{
$(this).find('div.scrollbar').addClass('hidden').next().css('height', lhg).addClass('noscroll').parent().tinyscrollbar_update();
}
num = index;
}
}
}).each(function(){
this.onselectstart = function(){
return false;
};
}).find('div.select-box').tinyscrollbar();
});
$('body').click(function(event){
if(num != -1 && ($(event.target).closest('li').length == 1 || $(event.target).closest('div.select-box').length == 0)){
if($(event.target).closest('li').length == 1){
$(event.target).parent().find('li.active').removeAttr('class');
$(event.target).closest('li').addClass('active').parents('div.select-text').find('span').html($(event.target).closest('li').html()).parent().find('input').val($(event.target).closest('li').attr('rel')).change();
}
$('div.select-text').eq(num).removeAttr('style').find('div.select-box').removeAttr('style');
num = -1;
}
});
}
|
Нашел пример, но не совсем могу разобраться в нем:
(function( $ ) {
$.fn.myPlugin = function() {
// Тут пишем функционал нашего плагина
};
})(jQuery);
|
Получается, там где писать код, я заменяю $('div.select-text') на this? Встречается в 4 местах и 1 раз parents('div.select-text').
Благодарю. | |
| |
|
|
|
| |
|
|
| |
для: TetRiska
(31.10.2013 в 19:06)
| | | В плагине не должно быть обращения к конкретному элементу, иначе в нем нет никакого смысла - можно просто задать процедуру.
Если что, напишите, что именно вы хотите получить из чего - у меня ожидается свободное время, попробую сделать, а вы потом разберетесь в коде что и как. | |
| |
|
|
| |
|
|
| |
для: Deed
(01.11.2013 в 14:13)
| | | Смотрел примеры, доступно описано, спасибо, но пока еще сложно, а нужно как можно быстрей реализовать. В данный момент не устраивает в моей ф-ции:
1 - то, что я вешаю на класс $('div.select-text') выпадающий список через newselect(), в дальнейшем такое не прокатит, нужно на ид, чтобы не было пересечений с другими формами с такими же элементами, т.е. нужно будет вызывать так: newselect('#select-region, #select-city')
2 - то, что клик по боди вызывается сразу с запуском ф-ции, а нужно вызывать при открытии выпадающего списка и удалять после закрытия
3 - то, что вызывается не как плагин
1-2 пункты завтра буду пробовать реализовывать, вот с плагином будет вопрос :)
приведу хтмл код выпадающего списка:
<div class="select-text">
<span>выберите область</span>
<i></i>
<input id="select-region" value="0" type="hidden" />
<div class="select-box">
<div class="scrollbar">
<div class="track">
<div class="thumb">
<div class="end"></div>
</div>
</div>
</div>
<div class="viewport">
<ul class="overview">
<li class="active" rel="0">выберите область</li>
</ul>
</div>
</div>
</div>
|
| |
| |
|
|
| |
|
|
| |
для: TetRiska
(01.11.2013 в 21:32)
| | | Летчик.jpg | |
| |
|
|
| |
 6.9 Кб |
|
| |
для: Deed
(02.11.2013 в 11:40)
| | | В общем переписал ф-цию под плагин. Если есть замечания, говорите, буду править. Приложил практически весь кусок работы: плагин скрола + мой плагин + хтмл структуру селекта и сам вызов. | |
| |
|
|
| |
|
|
| |
для: Deed
(02.11.2013 в 11:40)
| | | так посмотрите мой плагин? верно сделал? есть замечания? | |
| |
|
|
