PHP. Баннерная система. Часть - 2

PHP. Баннерная система. Часть - 2

Ну что же ранее мы сделали файл banners.php который будет возвращать нам баннеры и делать таблицы в нашей базе данных.

Теперь надо сделать то о чем писал ранее, сделать плагин к JQuery который будет вызывать баннер и размещать её в нужном нам блоке

banners.js

Начинаем. Назовем наш плагин к jQuery как banner.
Используем стандартный шаблон для создания плагина

(function($){
    $.fn.banner=function(options){
        options=$.extend({ },options || {});
        var obj=$(this);
        var make =function(){  };       
        return this.each(make);
    };
})(jQuery);

options=$.extend({ },options || {});
тут предполагаем что у нас будут опции к плагину, к примеру значения по умолчанию к ширине, высоте и т.д.

var obj=$(this);
Кроме всего прочего вынесем объект плагина в переменную для более удобного доступа.

var make =function(){  };      
Функция которая будет реализовать функционал плагина

return this.each(make);
необходима для возможности наследования дальнейшего действия плагина jQuery

теперь когда скелет готов, начнем его реализовать:

(function($){

    $.fn.banner=function(options){
        //Настройки по умолчанию, их можно переопределить при вызове плагина
        options=$.extend({
                width:'270px',         //ширина блока
                height:'125px',        //высота блока
                count:'2',                //количество банеров
                skin:'none',             //скины
                border:'1px solid #A2A2A2'
                },options || {});

        var obj=$(this);

        var make =function(){
            //выполнение плагина
            //Установим параметры плагина согласно дефольных либо переопределенных
           // свойств
            obj.css("width",options.width).css("height",options.height).css("border",options.border);
           //Выполним ajax запрос к нашему ранее написанному скрипту
            $.ajax({type:'POST',url:'banner/ajax/banners.php',data {
                       "action":"get_banner",
                       "count":options.count},
                       async:true,

                success:function(data){  
                  //вернувшиеся данные расположим в контейнере к которому
                  //был применен плагин
                    if(data!='')obj.html(data);
                  //пометим что бы ссылки открывались в новой вкладке браузера
                    $(".banner a").attr('target','_blank');  
                },error:function(xhr,str){}});
        };
      
        //Окончание и возврат объекта
        return this.each(make);
    };
})(jQuery);

Собственно сам плагин готов, усовершенствовать можно много чего, была бы фантазия.

В следующей статье рассмотрим создание  Панели управления нашей банерной системой.

Комментариев нет:

Отправить комментарий