Решил что для этого как нельзя лучше подойдет YUI-grids, но в данном примере я его удалил, хотя для того чтобы его вернуть достаточно посмотреть каменты в коде и все станет ясно.

Как вы понимаете в осле вся красота от border-radius (тут классы от jquery UI) и box-shadow недоступна, поэтому graceful degradation. Хотя при большом желании на таблицу ложатся круглые углы от rocon

Так вот есть у этого плагина большой недостаток - он однострочный и все похожие плагины тоже, тоесть если у меня менюшка в две строки то хрен мне. Надо было срочно исправить недоразумение и я написал свой.

• Один
• Два
• Три
• Четыре
• Пять
• Шесть
• Семь

Код такой

<ul id="lavalamp" class="ui-corner-all">
<li style="top:60px;left:20px" class="active"><span class="text">Один</span></span></li>
<li style="top:40px;left:150px"><span class="text">Два</span></li>
<li style="top:10px;left:50px"><span class="text">Три</span></li>
<li style="top:60px;left:100px"><span class="text">Четыре</span></li>
<li style="top:120px;left:10px"><span class="text">Пять</span></li>
<li style="top:10px;left:150px"><span class="text">Шесть</span></li>
<li style="top:100px;left:100px"><span class="text">Семь</span></li>
</ul>
<div id="lava" class="ui-corner-all"></div>

#lavalamp {
	display: block;
	height: 150px;
	border: 5px solid #FF7F04;
	background: #ff7f04; /* old browsers */
	background: -moz-linear-gradient(top, #ff7f04 0%, #ffb76b 99%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff7f04), color-stop(99%,#ffb76b)); /* webkit */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff7f04', endColorstr='#ffb76b',GradientType=0 ); /* ie */
}

    #lavalamp li {
		color: #808080;
		cursor: pointer;
		display: block;
		float: left;
		height: 25px;
		position: relative;
		z-index: auto;
		padding: 0;
    }

        #lavalamp li span {
			display: block;
			font-size: 14px;
			font-weight: bold;
			line-height: 25px;
			position: relative;
			text-decoration: none;
			z-index: 200;
			padding: 0 5px;
        }

#lava {
	background-color: #e57807;
	position:absolute;
	left:0;
	top:0;
	height:0;
	width:0;
	z-index:100;
}

Градиент сделан при помощи тулзы Ultimate CSS Gradient Generator

jQuery(document).ready(function($){
	$("#lavalamp")
		.delegate("li","mouseenter",null,function(){
			var self = $(this);
			$("#lava").stop().animate({
				top : self.offset().top,
				left : self.offset().left,
				width : self.outerWidth(true),
				height : self.outerHeight(true)
			})
		})
		.delegate("li","click",null,function(){
			alert($(this).text());
		})
		.bind("mouseleave",null,function(){
			$(".active",this).eq(0).trigger("mouseover");
		})
		.trigger("mouseout");
});

]]> http://mabp.kiev.ua/2010/11/27/lavalamp/feed/ 1 http://mabp.kiev.ua/2010/10/17/ufi/ http://mabp.kiev.ua/2010/10/17/ufi/#comments Sun, 17 Oct 2010 14:09:13 +0000 CTAPbIu_MABP http://mabp.kiev.ua/?p=1270 Украина Футбол Интернешнл скоро будет иметь ахуительный новый сайт. На нем можно будет заказать билеты онлайн. Но ахуителен он не этим, а тем что за него взялся я.

Пока что юзал только YUI grid + reset дальше глянем. Это пока тока первый мокап.

Идея была хорошая, реализация - гавно. Сидел писал... Разруливал грабли.

Началось все с чертовой верстки, ее как обычно не понял IE, но там особых проблем не возникло, кое-что через скрипт поправил.

Первой неприятной граблей было отсутствие в jQuery поддержки колесика мишки, но плагин на этот случай нашелся очень быстро. Обожаю jQuery за огромное количество плагинов! И не смотря на то что плагин небольшой это уже давало лишний код и лишнюю зависимость для моего плагина. Не айс :(

Второй граблей стал ползунок, на него надо было натянуть drag. Тоесть перетаскивание, писать самому этот гемор я не решился, мне не настолько не хуй делать. Откуда взять драг? Правильно из jQuery UI. Примастырил я его довольно легко, благо там все просто. Оказалось еще два дополнительных файла (core и draggable) и килобайты лишнего кода. Мне это очень не понравилось, но ничего поделать я не мог.

Этот же ползунок надо было перемещать под мышку при клике на полоску прокрутки. Как мудак, почти целый день втыкал в формулу зависимости высоты ползунка от длинны текста, координат ползунка на полосе прокрутки и пытался сместить его на половину его высоты вверх чтобы он попадал на мышку центром. Потом только понял что то координата ползунка не зависит от длины полоски и ничего смещать не надо, она зависит от места куда кликнули. Как тока понял все быстро срослось. О чем я написал прошлую заметку

Ок, ползунок стал куда ему требовалось теперь надо было из скрипта активировать событие drag. Поначалу даже не знал с чего начать, пробовал вызывать события mousedown и mousemove по очереди, потом вызвать их оба сразу, никаких результатов. Полез в код UI разбираться. От туда как-то вытащил событие "mousedown.draggable", попытался его вызвать через trigger, получил ошибку о зациклившейся рекурсии. Долго ругался. Гуглил. Узнал что так можно было делать еще в версии 1.5.3, а теперь это перекрыли. Авторы советуют использовать плагин симуляции пользователя. Долго ругался на дополнительный код, хотел из него что-то удалить, плюнул, поставил. Ура! Заработало. Потом уже во время написания статьи и проверки в IE и других браузерах оказалось что работает этот чудо-плагин тока в FireFox'e. Н у и хуй с ним, всеравно в оригинальном плагине так не работало.

Пока гуглил решение проблемы с drag'ом нашел плагин который реализовывает этот же функционал и вроде как гибче в настройках. Поставил, легче не стало, зато кода вроде уменьшилось и не надо использовать весь UI. В общем оставил в коде закомментированным кусок для подключения плагина. кто хочет может ебаться.

Так я похоже уже всех замариновал пиздежом не по теме. Выкладываю рабочий пример. Цацкайтесь.

Будет настроение буду доделывать... Уберу чертов плагин симуляции, всеравно не пашет... Потом там есть бага, когда сначала кликнул на полосу прокрутки, а потом на стрелку вверх, ползунок чуть вниз зъезжает. Посмотрим может не лень будет.

Добавлено 04.06.09 в 2 ночи. После 2 часов дебага обнаружил что плагин симуляции пользователя корректно работает только если виджет расположен на первом экране, то есть сама страницы с виждетом не проскроллена. После чего все воспоминания про плагин были выкинуты из кода. Застрелите меня.

Добавлено 05.06.09 в 12 ночи. Наконец-то доделал. Теперь скроллинг полностью имитирует поведение виндового скроллинга. И его можно применять не только к отдельному элементу но и ко всей странице.

    jQuery().ready(function($) {
      $().jscroll(); // document
    });

Размер моего плагина (не сжатым) 6 424 байт, а размер оригинального 23 076. При этом размер всех подключаемых js файлов (сжатых) у jquery 91 725, а у mootools 96 157 байт.

Добавлено 06.06.09 в 20:00. Добавлена поддержка IE 7 & 8. В IE 6 неправильно возвращается свойство scrollHeight, поэтому скроллинг глючит.

Скачать сие чудо с примерами работы можно отсюда DOWNLOAD LINK

Итак начну с начала, мне понадобиться скрипт который инициализирует Google Gears, он написан самим Google и является единственным официальным способом запустить Google Gears, и jQuery UI для создания модального диалога из прошлой статьи. Скрипт создаёт фабрику объектов с которой я буду работать дальше, хотя там и так подробно описано в комментариях. Дальше логика такая - нужно создать новый "склад" и передать все отобранные для кеширования файлы, обновляя после каждого файла ползунок загрузки. Поехали:

<!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">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head>
<title>GoogleGears local store setup</title>
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script src="ui/ui.core.js" type="text/javascript"></script>
<script src="ui/ui.resizable.js" type="text/javascript"></script>
<script src="ui/ui.draggable.js" type="text/javascript"></script>
<script src="ui/ui.dialog.js" type="text/javascript"></script>
<script src="ui/ui.progressbar.js" type="text/javascript"></script>
<script src="http://code.google.com/intl/ru/apis/gears/gears_init.js" type="text/javascript"></script>

<link href="themes/smoothness/ui.core.css" type="text/css" rel="stylesheet" />
<link href="themes/smoothness/ui.theme.css" type="text/css" rel="stylesheet" />
<link href="themes/smoothness/ui.resizable.css" type="text/css" rel="stylesheet" />
<link href="themes/smoothness/ui.dialog.css" type="text/css" rel="stylesheet" />
<link href="themes/smoothness/ui.progressbar.css" type="text/css" rel="stylesheet" />
<style>
.ui-progressbar-indicator{
	line-height:40px;
	position:absolute;
	text-indent:-20px;
	left:50%;
}
</style>
<script type="text/javascript">
if(!window.console)
	console = {info:function(){}};

jQuery().ready(function($){
	// определяю все с чем буду работать
	var 
	localServer, // сервер
	localStore, // хранилище
	counter = 0, // итератор файлов
	percent = 0, // текущий процент
	store = "myStore", // имя хранилища
	filesToCapture = [  ], // список файлов

	// диалог 
	dialog = $("<div/>")
		// с параметрами но на этот раз без кнопки
		.dialog({modal:true,title:"Заголовок",overlay:{backgroundColor:'#000',opacity: 0.5}})
		// и без крестика
		.parent().find(".ui-dialog-titlebar-close").hide().end().end(),

	// с цифровым индикатором
	indicator = $("<div/>").addClass("ui-progressbar-indicator").text("0")
		.appendTo(dialog),

	// и ползунком
	progressbar = $("<div/>")
		// обновляю значение индикатора
		.progressbar({value:0,change:function(event,ui){indicator.text(percent+"%")}})
		.appendTo(dialog);

	try {
		// пробую создать локальный сервер
		localServer = google.gears.factory.create('beta.localserver');
		window.console.info('Ready!');
		// в нем локальное хранилище
		localServer.createStore(store);
		window.console.info('Created the store');
	} catch (e) {
		// при неудаче - выходим
		window.console.info(e.message);
		return;
	}

	// открываем хранилище
	localStore = localServer.openStore(store);
	// передаем в него список файлов
	localStore.capture(filesToCapture, function (url, success, captureId) {
		counter++;
		// считаем текущий процент
		percent = Math.round(counter/filesToCapture.length*100);
		// обновляем ползунок
		progressbar.progressbar("value",percent)
		// если все файлы закешированы чистим ненужное
		if (counter == filesToCapture.length) {
			progressbar.progressbar("destroy"); 
			dialog.dialog("destroy");
			indicator.remove();
		}
		// на всякий случай пишу все в лог
		window.console.info(url + ' captured ' + (success ? 'succeeded' : 'failed'));
	});
});

</script>
</head>
<body>
</body>
</html>

Примера к сожалению не будет потому что даже если у когото из вас и установлен Google Gears, то у меня нечего особо кешировать, можете посмотреть как выглядит анимация в статье Modal Dialog и Progress Bar

Конечно же интереснее было бы использовать ManagedResourceStore с манифестом, это дает возможность иметь сразу например несколько цветовых схем сайта, но тогда бы не получилось анимировать процесс загрузки.

function DeferCall() {
	if (arguments.length == 0) {
		return null;
	}
	var args = arguments;
	var fn = null;
	if (browseris.ie5up || browseris.nav6up) {
		eval("if (typeof(" + args[0] + ")=='function') { fn=" + args[0] + "; }");
	}
	if (fn == null) { return null; }
	if (args.length == 1) {
	 return fn();
	} else if (args.length == 2) {
		return fn(args[1]);
	} else if (args.length == 3) {
		return fn(args[1], args[2]);
	} else if (args.length == 4) {
		return fn(args[1], args[2], args[3]);
	} else if (args.length == 5) {
		return fn(args[1], args[2], args[3], args[4]);
	} else if (args.length == 6) {
		return fn(args[1], args[2], args[3], args[4], args[5]);
	} else if (args.length == 7) {
		return fn(args[1], args[2], args[3], args[4], args[5], args[6]);
	} else if (args.length == 8) {
		return fn(args[1], args[2], args[3], args[4], args[5], args[6], args[7]);
	} else if (args.length == 9) {
		return fn(args[1], args[2], args[3], args[4], args[5], args[6], args[7], args[8]);
	} else if (args.length == 10) {
		return fn(args[1], args[2], args[3], args[4], args[5], args[6], args[7], args[8], args[9]);
	} else {
		var L_TooManyDefers_Text = "Too many arguments passed to DeferCall"
		alert(L_TooManyDefers_Text);
	}
	return null;
}

А все потому что IE5.5 не поддерживает метод Function.apply .

Хотя IE6 достал уже всех, вот например Apple сделал себе такую страничку, на которой предлагает скачать что-нибудь по современние. Выглядит красиво даже в IE6, но если посмотреть код то там все перехачено вдоль и поперек.

Вот эта страничка меня натолкнула на мысль сверстать похожий "надгробничек" дляя своих целей, используя все то, что использовали разработчики Apple, только без хаков. Смотрите сами что из этого получилось

Первым я протестирую контекст, проверять буду вот таким скриптом

var start = new Date();
for(var i=0;i<1000;i++)
	$....
var stop = new Date();
console.log(stop-start)

Я не будем добавлять ничего нового к коду Google, а только попробуем собрать коллекцию li.

Вывод из первого эксперимента - сам по себе контекст это еще один поиск по DOM дереву, поэтому задавать контекст стоит только если второй запрос ограничит первый на столько что сэкономленное время будет больше чем время второго запроса, такого эффекта можно добиться например указав id родителя (не обязательного прямого) в контексте.

Второй пример покажет как лучше всего получить всех прямых потомков.

Не используйте звездочку - это не оправдано в 99.9% случаев (а в этом примере * возвращает еще и затесавшийся случайно элемент link) и не стоит без особой надобности использовать метод children - он тормозит.

В третьем примере я протестирую получение первого прямого потомка.

Не могу найти разумного объяснения почему так тормозит find, но наверное на это есть какие-то причины. А еще интересна разница в использовании eq(0) как селектора и как метода - дольше в полтора раза.

Думаю стоит отвлечся от потомков и протестировать атрибуты. Вытащим input у которых type=radio

Похоже фильтром тоже не стоит злоупотреблять, а псевдо-селекторы придуманы не только для удобства в написании

Ну и конечно надо доколупаться до классов а то было бы не честно

Магия...