[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Помогите разобраться со скриптом JQUERY!!
Гость_Алексей
Добрый вечер!
Нашел для решения своей задачи готовый пример, но не пойму как сделать одну штуку там, ибо в JQUERY не силен вообще (специализируюсь больше на PHP).

В общем есть файлик jquery.scrollablecombo.js, в котором ВСЁ и происходит.
В файле index.html что-то типа такого:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>
UI Elements: jQuery Combo Box Plugin</title>
<meta
http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta
name="description" content="UI Elements: jQuery Combo Box Plugin" />
<meta
name="keywords" content="jquery, plugin, combo box, select"/>
<!-- The JavaScript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script
type="text/javascript" src="jquery.scrollablecombo.js"></script>
<script
type="text/javascript">
$(function() {
$('#ui_element').scrollablecombo();

});
</script>
<link
rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>

</head>
<body>
<select
id="ui_element">
<option
value="A" selected>Option Item A</option>
<option
value="B">Option Item B</option>
<option
value="C">Option Item C</option>
<option
value="D">Option Item D</option>
<option
value="E">Option Item E</option>
<option
value="F">Option Item F</option>
<option
value="G">Option Item G</option>
<option
value="H">Option Item H</option>
<option
value="I">Option Item I</option>
<option
value="J">Option Item J</option>
</select>
</body>
</html>



А вот если я вешаю на Селект обработчик onChange, тюе вот так будет:
<select id="ui_element" onchange="alert(this.value);" >


то ничего не происходит)) А я хочу, чтобы при выборе того или иного пункта выпадающего списка, у меня вылетало окошко с выбранным значением (т.е с value).
Вот как такое можно реализовать?
Повторюсь, что с Jquery не умею работать, потому и обратился к вам за помощью!
P.S. выкладывать ли сюда содержимое файла jquery.scrollablecombo.js ?Он не большой )



Спустя 43 минуты (15.12.2011 - 23:12) Игорь_Vasinsky написал(а):
а дебаггер что говорит???

Спустя 19 минут, 29 секунд (15.12.2011 - 23:31) Гость_Алексей написал(а):
Дебаггером не пользуюсь)
Попробовал дописать там тег <form method='post' action='file.php'>, кнопку Сабмит добавил, так вот в ПХП, через этот метод пост, вообще ничего не приходит...ни значения, ничего.....просто пустота.... blink.gif

Спустя 12 минут, 47 секунд (15.12.2011 - 23:44) Игорь_Vasinsky написал(а):
Цитата
Дебаггером не пользуюсь)

это как ловить чёрную кошку в тёмной комноте.

установи GoogleChrome

открой свой сайт - нажми F12 - консоль - все ошибки JS - будут там.

Спустя 1 минута, 43 секунды (15.12.2011 - 23:46) killer8080 написал(а):
Цитата (Гость_Алексей @ 15.12.2011 - 21:29)
А вот если я вешаю на Селект обработчик onChange, тюе вот так будет:
<select id="ui_element" onchange="alert(this.value);" >


то ничего не происходит))

Возможно этот плагин вообще удаляет селект из документа, и подменяет его на dhtml?

Спустя 21 час, 33 минуты, 23 секунды (16.12.2011 - 21:19) Гость_Алексей написал(а):
killer8080, верно!)

Там всё это заменяется на ul и li, поэтому onChange и не работает...

Вот содержимое файла jquery.scrollablecombo.js


(function($) {

$.fn.scrollablecombo = function(options) {
var opts = $.extend({}, $.fn.scrollablecombo.defaults, options);
return this.each(function() {
$this = $(this);
var o = $.meta ? $.extend({}, opts, $this.data()) : opts;

function findHighestZIndex(){
var divs = document.getElementsByTagName('div');
var highest = 0;
for (var i = 0; i < divs .length; i++)
{
var zindex = divs[i].style.zIndex;
if (zindex > highest) {
highest = zindex;
}
}
return highest;
}

/**
* hide the select element
* graceful degradation
*/
$this.hide();

function makeScrollable($wrapper, $container){
var extra = 50;
var wrapperHeight = $wrapper.height() ;
$wrapper.css({overflow: 'hidden'});
$wrapper.scrollTop(0);
$wrapper.unbind('mousemove').bind('mousemove',function(e){
var ulHeight = $container.outerHeight() + 2*extra ;
var top = (e.pageY - $wrapper.offset().top) * (ulHeight-wrapperHeight ) / wrapperHeight - extra;
$wrapper.scrollTop(top);
});
}

/**
* let's build our element structure
*/
var $ul_e = $('<ul />');

$this.find('option').each(function(){
var $option = $(this);
var liclass = '';
if($option.attr('selected'))
liclass = 'selected';
var $li_e = $('<li />',{
className : liclass,
html : '<a href="'+$option.val()+'">'+$option.html()+'</a>'
});
$ul_e.append($li_e);
});

var $wrapper_e = $('<div />',{
className : 'cb_selectWrapper'
});

$wrapper_e.append($ul_e);

var $control_e = $('<div />',{
//id : 'ui_element',
className : 'cb_selectMain cb_down'
});

var $select_e = $('<div />',{
className : 'cb_select'
});

$select_e.append($wrapper_e).append($control_e);

var $selected = $ul_e.find('.selected');


function openCombo(){
var maxzidx = Math.max(findHighestZIndex(),99999);
$wrapper_e.css('z-index',parseInt(maxzidx+1000)).show();
$control_e.addClass('cb_up').removeClass('cb_down');
makeScrollable($wrapper_e,$ul_e);
}
function closeCombo(){
$wrapper_e.css('z-index',1000).hide();
$control_e.addClass('cb_down').removeClass('cb_up');
}
$control_e.html($selected.find('a').html())
.bind('click',function(){
(!$wrapper_e.is(':visible'))? openCombo() : closeCombo();
}
);
$selected.hide();

$this.parent().append($select_e);
$this.remove();

$ul_e.find('a').bind('click',function(e){
var $this = $(this);
$control_e.html($this.html());
var $selected = $ul_e.find('.selected');
$selected.show().removeClass('selected');
$this.parent().addClass('selected').hide();
closeCombo();
e.preventDefault();
});



});
};
$.fn.scrollablecombo.defaults = {

};
})(jQuery);


Что посоветуете в таком случае?

Спустя 7 минут, 25 секунд (16.12.2011 - 21:27) Гость_Алексей написал(а):
Просто задача у меня такая:
У меня есть как бы 2 списка выбора, причём второй строится на основе того, какой выбран первый. Ну т.е есть, например, 2 селекта, один это ПРОИЗВОДИТЕЛЬ МОНИТОРОВ, а второй это МОДЕЛЬ МОНИТОРА. Выбирая в первом, например, самсунг, он мне строит второй список моделей, относящихся к самсунгу....итд....
Так вот это всё работает так, что на первом селекте стоит onchange, т.е как только выбрал производителя - автоматически строится список моделей.
Все данные хранятся в базе данных. Если просто работать с 2-мя селектами - всё работает норм, проблема у меня в другом была, потому я и стал мучаться с такой вот реализацией Я её тут расписал, но её потом перекинули в тему ДИЗАЙН И ВЕРСТКА, вот она (http://phpforum.ru/index.php?showtopic=54981)

Спустя 21 час, 24 минуты, 17 секунд (17.12.2011 - 18:51) killer8080 написал(а):
Гость_Алексей
Фуфловый плагин. Селект он удаляет, а скрытый инпут не добавляет. Естественно на сервер ничего передаваться не будет. События селекта так же игнорируются, он тупо удаляется. Управление с клавиатуры не предусмотрено в принципе. Я бы 10 раз подумал прежде чем его использовать. Под твою задачу его нужно изрядно допиливать напильником.

Спустя 2 часа, 45 минут, 14 секунд (17.12.2011 - 21:36) Гость_Алексей написал(а):
Мда...
killer8080, а что бы ты посоветовал для реализации такой вот задачи, про которую я написал?

Спустя 17 часов, 43 минуты, 7 секунд (18.12.2011 - 15:19) killer8080 написал(а):
Гость_Алексей
вообще подмена стандартных контролов, не есть гуд. Могут возникнуть разные проблемы с кроссбраузерностью. Подумайте действительно ли оно нужно. Но если уж приспичило поищи более подходящий плагин, например здесь, может быть найдешь то что нужно.

Спустя 6 часов, 44 минуты, 27 секунд (18.12.2011 - 22:04) Гость_Алексей написал(а):
killer8080, ОГРОМНОЕ ТЕБЕ СПАСИБО за предоставленную ссылку! smile.gif
Нашел относительно неё скрипт подходящий, правда помучался там с настройками "под меня", но всё же она РАБОТАЕТ )))
Еще раз БОЛЬШОЕ СПАСИБО! smile.gif
Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.