// _____________________________________________________________________________ // Project: SD Core (JS+Obj) // Module: SD Forms // Date create: August 2008 year // Date last change: January 2009 year // Author: Beglec // _____________________________________________________________________________ // новый стиль окна/формы // основная задача: // - максимально смягчить переход от старой версии к новой // - появление с эффектами // Ответы на вопросы: // Почему стили внутри? А что бы особо сообразительные неиспортили и не говорили вот какой хреновый компонент // нигде не употребляются 'px' ибо не рулят пикселя уже function sd_obj_form() { var self=this; // значения свойств по умолчанию default_={ // рабочие свойства div: '', // контейнер уцла выводим иначе в body name_: 'form1',// название формы top:'0px',// отрисовка по Y left: '0px',// отрвка по X width:300,// ширина окна по умолчанию height:300,// высота окна по умолчанию html: '',// информации в контексте path_images: '/sd_core/images/form/',// путь изображениям center: false,// true - автоматическое выравнивание формы по центру браузерного окна overload: false,// true - затемнение под формой overload_opacity: 0.5,// уровень прозрачности overflow: 'auto',// содержание на форме можно будет проматываться автоматически если оно выходит за пределы формы z_index: 1,// уровень слоя // планируемые свойства modal: false,// true - окно является модальным navigator_: false,// включить навигационную строку link_icon: '',// ссылка на картинку с иконкой 16x16 link_help: '',// ссылка вызвающая помощь link_submit: '',// ссылка при положительном результате form_data: 'index.php',// ссылка для получение json данных, для построения формы form_data_params: {}, // заголовок caption: { visible: true, title: 'Заголовок формы',// текст в заголовке rem: '',// комментарий к заголовку формы height:'20',// высота заголовка icon: '',// ссылка на файл иконки buttons: { close_: true, config: false, help: false} }, // основной контекст content: { background_color:'#FFFFFF' }, // параметры панели для кнопок panel_buttons: { visible: true, height:'40', background_color:'rgb(192,192,192)', buttons: [ { title: 'Отмена', link_: 'close' }, { title: 'OK', link_: 'sender' } ] } } sd_property_set(default_,this);// set default // события // обработкик потверждения ввода данных пользователем / submit this.on_submit=function() { } // обработчик отметы действий пользователя this.on_cancel=function() { } // обработчик закрытия формы this.on_close=function() { } // обработчик положительного результата this.on_success=function() { } // обработчик отрицательного результата this.on_fail=function() { } // _____________________________________________________________________________ this.form_data_load=function(_params)// отображение нужных нам элементов согласно полученных данных { return; } // _____________________________________________________________________________ this.close_=function()// Закрываем форму { var self=this; // j_form.fadeOut(1500); sd='sd_form_'+this.name_; $('#'+sd).remove();// убираем указанный объект return; } // _____________________________________________________________________________ this.sender=function()// Отправка данных у формы { alert('sender'); this.close_(); return; } // _____________________________________________________________________________ this.show=function(_params)// непосредственный вызов формы { sd_property_set(_params,this);// set default // ! если указан контейнер куда писать, то пишем в него // создаем холст на котором все и будем рисовать var self=this; sd='sd_form_'+self.name_; d=(this.div!='')?this.div:'body'; $(d).append('
');// заголовок формы j_main.append('
');// основной контент, куда будет выводится j_main.append('
');// основной контент, куда будет выводится // формируем тени j_main.append('
'); j_main.append('
'); j_main.append('
'); j_main.append('
'); j_main.append('
'); j_main.append('
'); j_main.append('
'); j_main.append('
'); // j_caption=$('#'+sd+'_caption'); // обработка заголовка if (self.caption.visible)// если заголовок видимый { j_caption.css({'height': self.caption.height+'px'}); // иконка формы j_caption.append('
'); j_icon=$('#'+sd+'_icon'); f=(self.caption.icon!='')?self.caption.icon:self.path_images+'icon_none.png';// файла иконки j_icon.append(sd_image({image: f, title: 'Иконка', short_: 1})); // заголовок j_caption.append('
');// рисуем кнопку закрытия $('#'+sd+'_caption_text').html(self.caption.title);// текст заголовка // формируем кнопки в заголовке if (self.caption.buttons.close_)// если требуется кнопка закрыть { j_caption.append('
');// рисуем кнопку закрытия j_btn_close=$('#'+sd+'_button_close');// сокращение j_btn_close.append('Закрыть'); // добавить в sdmage - обработку ID тэга j_btn_close.css({ 'position': 'absolute', 'z-index':'1', 'top': '0px', 'left': (self.width-20)+'px' }); j_btn_close.click(function(){ self.close_(); }); } // резервируем кнопку для процессинга j_caption.append('
');// рисуем кнопку закрытия j_processing=$('#'+sd+'_processing');// сокращение // добавить в sdmage - обработку ID тэга j_processing.css({ 'position': 'absolute', 'z-index':'1', 'top': '0px', 'left': (self.width-40)+'px' }); } // панель кнопок panel_buttons_height=0;// высота панели с кнопками if(self.panel_buttons.visible)// если панель для кнопок требуется показывать { j_panel_buttons=$('#'+sd+'_panel_buttons'); j_panel_buttons.css({ 'background-color': self.panel_buttons.background_color, 'height': self.panel_buttons.height, 'top': (j_main.height()-self.panel_buttons.height) }); // отображаем кнопки _obj_a=self.panel_buttons.buttons; s='
'; s+=''; for (var key in _obj_a)// пройтись по всем кнопкам, если таковые имеются { if (typeof(_obj_a[key])=='object')// если свойство не является объектом, то { // непосредственное рисование кнопки s+=''; } } s+='
'; s+=''; s+=''; s+=''; s+=''; s+=''; // зеркало s+=''; s+=''; s+=''; s+=''; s+=''; s+='
'; s+='
'+_obj_a[key].title+'
'; s+='
'; s+='
'; s+='
'; j_panel_buttons.append(s); for (var key in _obj_a)// пройтись по всем кнопкам, если таковые имеются { if (typeof(_obj_a[key])=='object')// если свойство не является объектом, то { // вешаем обработчики if (_obj_a[key].link_=='cancel') { $('#'+sd+'_button_'+key).click(function(){ self.close_(); }); } if (_obj_a[key].link_=='ok') { $('#'+sd+'_button_'+key).click(function(){ self.sender(); }); } if ((_obj_a[key].link_!='ok')&&(_obj_a[key].link_!='cancel'))// если не отмена и не ok нажата, то { // ссылка по указанному адресу } } } panel_buttons_height=j_panel_buttons.height(); } // основной контейнер для данных j_content=$('#'+sd+'_content'); h=sd_pti(j_main.height())-sd_pti(panel_buttons_height)-sd_pti(j_caption.css('height')); j_content.css({ 'height': h+'px', 'top': j_caption.css('height'), 'background-color': self.content.background_color }); sd_form_content(self.name_,self.html); // j_content.html(self.html);// Вносим данные в контект блок // j_main.fadeIn(500); // var info=sd_ajax(self.form_data,self.form_data_params); // this.form_data_load(info);// отображение загруженных данных return; } // _____________________________________________________________________________ }// конец новой формы // _____________________________________________________________________________ function sd_form(_params)// основная функция вызова { var obj=new sd_obj_form(); obj.show(_params); } // _____________________________________________________________________________ function sd_form_content(_name,_content)// изменение содержания формы { name_='sd_form_'+_name+'_content';// узнаем куда будем писать информацию $('#'+name_).html('
'+_content+'
');// пишем данные в форму return;// возвращаемся назад } // _____________________________________________________________________________ function sd_form_processing(_name,_mode)// true - показывает, что форма работает { name_='sd_form_'+_name+'_processing';// узнаем куда будем писать информацию if (_mode) { $('#'+name_).html('');// пишем данные в форму } else { $('#'+name_).html('');// пишем данные в форму } return; }