Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 21.10.2012, 21:03   #1
ivanforpw
Новичок
Джуниор
 
Регистрация: 21.10.2012
Сообщений: 1
Радость Смешивание двух скриптов

Здравствуйте, скачал такой вот скрипт http://www.rudebox.org.ua/filter-items-using-jquery/ для сортировки данных в небольшой доске объявлений.
Там два фильтра, первый сортирует по имени, т.е. что было задано в value радио кнопки, то и он будет сортировать, ориентируясь по классу блоков с данными в теге <ul>. А вот во втором проблема, ведь он сортирует по имени и размеру, при том, вычисляет это он в скрипте сам, без ключевых слов, опираясь на данные из <strong> и <span data-type="size"> в теге <li> каждого блока. Мне же надо, чтобы второй скрипт был как и первый, но они смешивали себя и выдавали общий результат, например, Москва+Недвижемость. Я понял кажется как работает скрипт, но не знаю этого языка, и не получается никак сделать такое... Вот куски с главным содержимым, плюс библиотеки, которые показывают на сайте, для движения блоков.

Категории с радио кнопками

Код HTML:
<form id="filter">
<div class="menu">Все<input type="radio" name="type" value="all" checked="checked"></div>
<div class="menu">Недвижемость<input type="radio" name="type" value="realty"></div>
<div class="menu">Мебель<input type="radio" name="type" value="furniture"></div>
<div class="menu">Бытовая техника<input type="radio" name="type" value="appliances"></div>
<div class="menu">Потери и находки<input type="radio" name="type" value="found"></div>
<div class="menu">Отдам в дар<input type="radio" name="type" value="gift"></div>
<div class="menu">Работа<input type="radio" name="type" value="work"></div>
<div class="menu">Прочее<input type="radio" name="type" value="other"></div>

<div class="menu">Размеру<input type="radio" name="sort" value="size"></div>
<div class="menu">Названию<input type="radio" name="sort" value="name" checked="checked"></div>

</form>
Это блоки с <ul> тегом

Код HTML:
<ul id="applications" class="image-grid">
<li data-id="id-1" data-type="util">
<img src="img/activity-monitor.png" width="128" height="128" alt="" />
<strong>Adobe Photoshop</strong>
<span data-type="size">1500 KB</span>
</li>
<li data-id="id-2" data-type="realty">
<img src="img/address-book.png" width="128" height="128" alt="" />
<strong>Google Chrome</strong> 
<span data-type="size">1904 KB</span>
</li>
<li data-id="id-3" data-type="app">
<img src="img/finder.png" width="128" height="128" alt="" />
<strong>File Browser</strong> 
<span data-type="size">1337 KB</span>
</li>
<li data-id="id-4" data-type="app">
<img src="img/front-row.png" width="128" height="128" alt="" />
<strong>Flash Get</strong> 
<span data-type="size">401 KB</span>
</li>
<li data-id="id-5" data-type="app">
<img src="img/google-pokemon.png" width="128" height="128" alt="" />
<strong>Internet Explorer</strong> 
<span data-type="size">12875 KB</span>
</li>

</ul>
А это скрипт, где работает сортировка

Код HTML:
<script type="text/javascript">
// Плагин сортировки
(function($) {
$.fn.sorted = function(customOptions) {
var options = {
reversed: false,
by: function(a) { return a.text(); }
};
$.extend(options, customOptions);
$data = $(this);
arr = $data.get();
arr.sort(function(a, b) {
var valA = options.by($(a));
var valB = options.by($(b));
if (options.reversed) {
return (valA < valB) ? 1 : (valA > valB) ? -1 : 0;	
} else {	
return (valA < valB) ? -1 : (valA > valB) ? 1 : 0;	
}
});
return $(arr);
};
})(jQuery);

// Выполняется после загруки DOM
$(function() {

// привязыываем радиокнопки в форме
var $filterType = $('#filter input[name="type"]');
var $filterSort = $('#filter input[name="sort"]');

// получаем первый набор
var $applications = $('#applications');

// клонируем первый набор, чтобы получить второй набор
var $data = $applications.clone();

// вызываем Quicksand для каждого изменения в форме
$filterType.add($filterSort).change(function(e) {
if ($($filterType+':checked').val() == 'all') {
var $filteredData = $data.find('li');
} else {
var $filteredData = $data.find('li[data-type=' + $($filterType+":checked").val() + ']');
}

// если нужна сортировка по размеру
if ($('#filter input[name="sort"]:checked').val() == "size") {
var $sortedData = $filteredData.sorted({
by: function(v) {
return parseFloat($(v).find('span[data-type=size]').text());
}
});
} else {
// если нужна сортировка по имени
var $sortedData = $filteredData.sorted({
by: function(v) {
return $(v).find('strong').text().toLowerCase();
}
});
} 

// вызываем плагин 
$applications.quicksand($sortedData, {
duration: 800,
easing: 'easeInOutQuad'
});

});

});
</script>
ivanforpw вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц



Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Смешивание двух RGBA цветов Dj_smart Мультимедиа в Delphi 7 01.03.2012 20:35
Смешивание цвета в области перекрытия двух однотонных 3d фигур Trinock Gamedev - cоздание игр: Unity, OpenGL, DirectX 2 15.02.2012 16:59
Смешивание AngelOfDeathSX Мультимедиа в Delphi 1 16.10.2010 21:32
Смешивание деталей изображения после разделения Юлия_ZZZZ Помощь студентам 2 30.04.2010 18:47