16 ноября 2012
5306
Сортировка и выборка

Сортировка и выборка с кнопкой применить

PHP
Демонстрация » Скачать »

Приветствую Вас во втором уроке курса по Сортировке и выборке: с кнопкой применить. Ну что ж, первый урок, надеюсь Вы изучили и поняли принципы его функциональности, теперь стоит перейти ко второму уроку, где будет рассказано и показано, как сделать сортировку с кнопочкой применить.

 

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

 

Посмотрите сначала демо-версию, как видно никаких изменений визуально не произошло, только появилась кнопочка применить. Теперь давайте рассмотрим код.

Изменим всего лишь два файла, которые и будут играть роль при выборе новостей из сортировки.

Файл 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;
})
});

 

Вот и все! Думаю данный урок был Вам полезен, большое спасибо за внимание!