Javascript-форум (https://javascript.ru/forum/)
-   Библиотеки/Тулкиты/Фреймворки (https://javascript.ru/forum/library-toolkit-framework/)
-   -   Проблемма с раскрывающимся блоком на jQuery (https://javascript.ru/forum/library-toolkit-framework/10004-problemma-s-raskryvayushhimsya-blokom-na-jquery.html)

kirys0 15.06.2010 11:58

Проблемма с раскрывающимся блоком на jQuery
 
Не раскрывается выпадающий блок.
Вот код. Что не так?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Kirys | Услуги </title>
<meta http-equiv="Content-Type" content="text/html; charset=Utf-8">
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="stylesheet" type="text/css" href="http://kirys.pp.ru/styles.css"/>
<link rel="stylesheet" type="text/css" href="http://kirys.pp.ru/style.css"/>
</head>
<body>
<table align="center">
<td>
<a href="http://kirys.pp.ru/"><img src="http://kirys.pp.ru/kirussait.jpg"><a/>    
<a href="http://kirys.pp.ru/portfolio" onMouseOver="document.myImage1.src='http://kirys.pp.ru/images/panel_nepoln_01.jpg'" onMouseOut="document.myImage1.src='http://kirys.pp.ru/images/panel_01.jpg'"><img src="http://kirys.pp.ru/images/panel_01.jpg" name="myImage1" ></a>
<img src="http://kirys.pp.ru/images/panel_vydelenie_02.jpg" name="myImage2" >
<a href="http://kirys.pp.ru/about" onMouseOver="document.myImage3.src='http://kirys.pp.ru/images/panel_nepoln_03.jpg'" onMouseOut="document.myImage3.src='http://kirys.pp.ru/images/panel_03.jpg'"><img src="http://kirys.pp.ru/images/panel_03.jpg" name="myImage3" ></a>
</td>
</table>
<div id="content-left">
<div id="works" style="display:none "><font class="title2">Приветствуем вас на сайте студии «Kirys» !</font>
  <p class="text"> Мы занимаемся дизайном групп в социальной сети «<a href="http://vkontakte.ru">Вконтакте</a>».</p>
</div>
<div class="text">Наша студия занимается дизайном групп в социальной сети «<a href="http://vkontakte.ru">Вконтакте</a>» посредством Вики-разметки.<br><br>
<p class="title2">Мы предлагаем услуги:</p> 
<p class="netitle">Графическое оформление (Вики + Фотошоп) : </p>
<ul>
<li>Только главная страница - 12-20 голосов или 80 - 120 <object class="robject" name="object" data="http://www.artlebedev.ru/;-)/ruble.svg" type="image/svg+xml">
        <embed name="object2" src="http://www.artlebedev.ru/;-)/ruble.svg" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/" />
    </object></li>
<li>Внутреняя  навигация - 15-30 голосов или 100 - 200 <object class="robject" name="object" data="http://www.artlebedev.ru/;-)/ruble.svg" type="image/svg+xml">
        <embed name="object2" src="http://www.artlebedev.ru/;-)/ruble.svg" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/" />
    </object></li> 
<li>Главная + Навигация - 22-40 голосов или 150 - 250 <object class="robject" name="object" data="http://www.artlebedev.ru/;-)/ruble.svg" type="image/svg+xml">
        <embed name="object2" src="http://www.artlebedev.ru/;-)/ruble.svg" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/" />
    </object></li>
</ul>
<br>

<div><a href="#">Кликни по мне</a></div>
<div class="blocks no-display" style="width: 20em">Блок с дополнительной интригующей, познавательной, необычайно полезной и своевременной инфомацией.</div><br/>
<br>
<p class="netitle">Вики оформление (Вики-разметка + Иконки) : </p>
<ul>
<li>Только главная страница - 5 голосов или 35 <object class="robject" name="object" data="http://www.artlebedev.ru/;-)/ruble.svg" type="image/svg+xml">
        <embed name="object2" src="http://www.artlebedev.ru/;-)/ruble.svg" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/" />
    </object></li>
<li>Внутреняя  навигация - 10 голосов или 70 <object class="robject" name="object" data="http://www.artlebedev.ru/;-)/ruble.svg" type="image/svg+xml">
        <embed name="object2" src="http://www.artlebedev.ru/;-)/ruble.svg" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/" />
    </object></li> 
<li>Главная + Навигация - 15 голосов или 100 <object class="robject" name="object" data="http://www.artlebedev.ru/;-)/ruble.svg" type="image/svg+xml">
        <embed name="object2" src="http://www.artlebedev.ru/;-)/ruble.svg" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/" />
    </object></li>
</ul>
</div>
</div>
<script type="text/javascript" src="http://kirys.pp.ru/jquery.js" ></script>
<script type="text/javascript" src="http://kirys.pp.ru/jquery.disable.text.select.js"></script>
<script type="text/javascript">
(function($) {
	$.fn.openCloseBlocks = function(blocks, options) {
		var defaults = { 
			speed: 'normal'
		}, 
		opts 		= $.extend(defaults, options),
  		togglers 	= $(this),
  		bls 		= $(blocks); if(!bls) return;
  		
  		togglers.each(function(index) {
  			$(this).click(function(e) {
  				e.preventDefault(); 			
  				$(bls[index]).slideToggle(opts['speed']);
  			});
  		});
	};
})(jQuery);

$('div > a').openCloseBlocks($('div.blocks'), {
	speed: 'fast'
});



// выпадающий список под ссылкой
(function($) {
	$.fn.dropDownBlock = function(block, options) {
		var defaults = { 
			speed: 'fast',
			top: $(this).height(),
			left: 0
		}, 
		opts 	= $.extend(defaults, options),
  		toggler = $(this),
  		block 	= $(block);
  		toggler.css({'outline': 'none'})
  		
  		toggler.click(function(e) {
  			e.preventDefault();
  			$(block).css({
        		'position' 	: 'absolute',
        		'top' 		: (toggler.offset().top + opts['top']) + 'px',
        		'left' 		: (toggler.offset().left + opts['left']) + 'px'
      		});
      		if($(block).is(':visible')) $(block).fadeOut(opts['speed']);
      		else $(block).fadeIn(opts['speed']);      		
      		this.focus();
  		});
  		toggler.blur(function() {
  			$(block).fadeOut(opts['speed']);
  		});
	};
})(jQuery);

$('#toggler').dropDownBlock($('#drop-down-list'));

// Выделение нескольких чекбоксов клавишей шифт
(function($) {
	$.fn.setCheckboxesShift = function() {
		var cbx = this,
		last = -1, 	// номер предыдущего чекбокса;
		start, 		// служебные
		finish; 	// переменные
	
		// проходим по каждому указанному чекбоксу
		cbx.each(function(index) {
			// при клике по нему (или его лэйблу)
			$(this).click(function(e) {
				// проверяем, стал ли он чекнутым
				if($(e.target).attr('checked')) {
					// теперь смотрим, больше ли у предыдущего индекс
					if(index > last) { 	start 	= last; 	finish 	= index;
					} else { 			start 	= index; 	finish 	= last; }
				
					// если был предыдущий и зажата клавиша Шифт
					if(last > -1 && e.shiftKey) {	
						// проходим с начального до конечного чекбокса		
						for(i = start; i <= finish; i ++) {
							// и делаем их выделенными
							$(cbx[i]).attr('checked', 'checked');
						}
					}
					// запоминаем индекс только что кликнутого чекбокса
					last = index;
				}
			});
		});
	};
})(jQuery);

$('#checkboxes-list').disableTextSelect();
$('#checkboxes-list :checkbox').setCheckboxesShift(); 
</script>
</body>
</html>

Shaci 15.06.2010 12:44

многа буков

kirys0 15.06.2010 13:10

В смысле?

Skipp 15.06.2010 13:14

Цитата:

многа буков
Перевожу:
Ваш код громоздкий и что-то не хочется в нём возится:)

kirys0 15.06.2010 13:15

До того как вставляю в готовую страницу всё работает (на пустой сстранице)

Skipp 15.06.2010 13:17

kirys0,
В смысле?

kirys0 15.06.2010 13:20

ну вот этот код работает
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<HEAD>
<meta http-equiv="Content-Language" content="ru"/>
<TITLE>Раскрытие блока при клике на ссылку</TITLE>
<link rel="stylesheet" type="text/css" href="http://kirys.pp.ru/styles.css"/>
<link rel="stylesheet" type="text/css" href="http://kirys.pp.ru/style.css"/>
</HEAD>
<BODY>
<DIV id="order-link"><A href="#">Заказать</A></DIV>
<DIV style="WIDTH: 40em" class="blocks no-display"><div id="order">Чтобы сделать заказ нужно отправить сообщение на электропочту:<br>
<a href="mailto:order@kirys.pp.ru?subject=Заказать дизайн  для группы"><img src="mail.png"></a> <a href="mailto:order@kirys.pp.ru?subject=Заказать дизайн  для группы">order@kirys.pp.ru<br></a>
или написать мне В Контакте<br>
<a href="http://vkontakte.ru/write17948837"><img src="vkontakte.png"></a> <a href="http://vkontakte.ru/write17948837">Отправить сообщение</a></div></DIV><BR>

<SCRIPT type=text/javascript
src="jquery.js"></SCRIPT>

<SCRIPT type=text/javascript>
// раскрытие блока при клике на ссылку
(function($) {
	$.fn.openCloseBlocks = function(blocks, options) {
		var defaults = {
			speed: 'normal'
		},
		opts 		= $.extend(defaults, options),
  		togglers 	= $(this),
  		bls 		= $(blocks); if(!bls) return;

  		togglers.each(function(index) {
  			$(this).click(function(e) {
  				e.preventDefault();
  				$(bls[index]).slideToggle(opts['speed']);
  			});
  		});
	};
})(jQuery);

$('div > a').openCloseBlocks($('div.blocks'), {
	speed: 'fast'
});



// выпадающий список под ссылкой
(function($) {
	$.fn.dropDownBlock = function(block, options) {
		var defaults = {
			speed: 'fast',
			top: $(this).height(),
			left: 0
		},
		opts 	= $.extend(defaults, options),
  		toggler = $(this),
  		block 	= $(block);
  		toggler.css({'outline': 'none'})

  		toggler.click(function(e) {
  			e.preventDefault();
  			$(block).css({
        		'position' 	: 'absolute',
        		'top' 		: (toggler.offset().top + opts['top']) + 'px',
        		'left' 		: (toggler.offset().left + opts['left']) + 'px'
      		});
      		if($(block).is(':visible')) $(block).fadeOut(opts['speed']);
      		else $(block).fadeIn(opts['speed']);
      		this.focus();
  		});
  		toggler.blur(function() {
  			$(block).fadeOut(opts['speed']);
  		});
	};
})(jQuery);

$('#toggler').dropDownBlock($('#drop-down-list'));
</SCRIPT>
</BODY></HTML>


Часовой пояс GMT +3, время: 11:47.