Приветствую Вас во втором уроке курса по Сортировке и выборке: с кнопкой применить. Ну что ж, первый урок, надеюсь Вы изучили и поняли принципы его функциональности, теперь стоит перейти ко второму уроку, где будет рассказано и показано, как сделать сортировку с кнопочкой применить.
При использовании примера первого урока, мы аналогично должны сделать второй урок, который будет в принципе похож на первый.
Посмотрите сначала демо-версию, как видно никаких изменений визуально не произошло, только появилась кнопочка применить. Теперь давайте рассмотрим код.
Изменим всего лишь два файла, которые и будут играть роль при выборе новостей из сортировки.
Файл news.php, в нем добавляем в тег form класс click, по сути присваиваем значение, по которому и будет направлена связь между идентификаторами:
<form id='click' method="post" onsubmit="return false;" autocomplete="off">
Затем добавляем саму кнопочку. Я решил сделать это с помощью атрибута type='image', а Вы можете попробовать с type='submit', вариации очень много, все зависит от Вашего вкуса.
<input type='image' src='button.png' title='Применить'>
В принципе и все, с файлом news.php мы успешно завершили работу, теперь давайте рассмотрим файл sort.js.
При сортировке и выборке без кнопочки применить, мы указывали все атрибуты, которые выбирались через select, то есть:
$(document).ready(function(){
$("select#cat").change(function(){
search();
});
$("select#author").change(function(){
search();
});
$("select#date").change(function(){
search();
});
$("#search_string").keyup(function(){
search();
});
$("#limit").change(function(){
search();
});
});
Теперь же, мы просто задаем условие, которое выбирает все элементы сортировки при нажатии кнопочки применить, указывая в теге form класс click, то есть присваиваем каждому тегу select класс click и указываем его применение с submit:
$(document).ready(function(){
$('#click').submit(function(){
search();
return false;
})
});
Вот и все! Думаю данный урок был Вам полезен, большое спасибо за внимание!