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