+7 495 008 8452
popUp-окна средствами Битрикса
Если у вас возникли какие либо вопросы которые вы не смогли решить по нашим публикациям самостоятельно,
то ждем ваше обращение в нашей службе тех поддержки.
Сия библиотека полезна, когда лень подключать сторонние плагины и нужно быстро сваять окошко, не заморачиваясь с кастомизацией дизайна.
Что-то типа такого:
Начинается все с подключения самой библиотеки:
Далее создадим объект:
Пройдемся по параметрам:
my_answer - строка - уникальный id DOM-элемента, в который будет обернуто окно. Ежли на странице будет 2 и больше окон такого плана, то у каждого должен быть свой id.
null - параметр «принадлежности окна» к какому-либо DOM-элементу на странице. Т.е. по дефолту окно всплывает в центре страницы. Хотите чтоб всплывало, на пример, рядом с какой-либо кнопкой, ставьте суда id элемента в виде $(‘#my_name_div’) или через битриксовый эквивалент BX (‘my_name_div’)
content - строка - здесь контент, который будет показан в окне. Можно прямо сюда указывать html или указать #div, в котором лежит нужный текст.
closeIcon: {right: "20px", top: "10px" } - показывает нужна ли вам иконка закрытия окна и ее положение в окне.
titleBar: {content: BX .create("span", {html: ‘Это заголовок окна’, 'props': {'className': 'access-title-bar'}})} - собссно это создание заголовка окна. BX .create - функция создания DOM-элемента. В данном случае создание <span class=’access-title-bar’>Это заголовок окна</span>. Если хотите чтоб ваше окно можно было перетаскивать по странице, то класс лучше не менять.
zIndex: 0,
offsetLeft: 0,
offsetTop: 0,
draggable: {restrict: false} - эти параметры указывают, что окно можно передвигать по странице.
buttons - кнопки для управления содержимым окна. На каждую кнопку создаем новый объект new BX .PopupWindowButton с параметрами:
text - ‘название кнопки’
className - класс на кнопке, из стандартных возможны варианты: popup-window-button-accept - зеленая кнопка как на скрине, popup-window-button-cancel - белая кнопка, popup-window-button-link-cancel - просто ссылка. Само-собой можно приклеить свой стиль.
events: {click: function(){
this.popupWindow .close();
}}
Это параметр, отвечающий за действие, произошедшее при нажатии кнопки. В данном случае this.popupWindow .close(); - говорит о закрытии окна. Но тут возможны различные варианты в зависимости от фантазии и задач. На пример, если в окне форма, можно сделать ajax-отправку контента через
Здесь BX ("myForm"
- id-формы, data - данные, BX ( 'ajax-add-answer').innerHTML = data; - вставка ответа сервера в окно.
Либо можно сделать что-то свое в зависимости от нужд. Эта библиотека отлично работает в сочетании с jQuery, поэтому тут можно свободно использовать ее функции.
Далее приведу пример открытия окна по ссылке, загрузку в него ajax-конетнта и отправку формы.
Немного украшательств
Подключим дефолтные библиотеки
Соответственно, если jquery есть, то подключать не надо.
Сама ссылка:
Контейнер, который будет в окне и в который вставим форму по аяксу:
Файл testform.php
Кому интересно можете:
Назад в раздел
то ждем ваше обращение в нашей службе тех поддержки.
|
Источник: http://dev.1c-bitrix.ru/community/webdev/user/64008/blog/5942/ |
popUp-окна средствами Битрикса
Для тех кто хочет узнать как работают всплывающие окна на основе стандартной битриксовой библиотеки.Сия библиотека полезна, когда лень подключать сторонние плагины и нужно быстро сваять окошко, не заморачиваясь с кастомизацией дизайна.
Что-то типа такого:
Начинается все с подключения самой библиотеки:
<?CUtil::InitJSCore( array('ajax' , 'popup' ));?>
|
Далее создадим объект:
var addAnswer = new BX.PopupWindow(
"my_answer",
null,
{
content: BX( 'ajax-add-answer'),
closeIcon: {right: "20px", top: "10px" },
titleBar: {content: BX.create("span", {html: ‘<b>Это заголовок окна</b>’, 'props': {'className': 'access-title-bar'}})},
zIndex: 0,
offsetLeft: 0,
offsetTop: 0,
draggable: {restrict: false},
buttons: [
new BX.PopupWindowButton({
text: "Сохранить" ,
className: "popup-window-button-accept" ,
events: {click: function(){
this.popupWindow.close();
}}
}),
new BX.PopupWindowButton({
text: "Закрыть" ,
className: "webform-button-link-cancel" ,
events: {click: function(){
this.popupWindow.close();
}}
})
]
});
|
Пройдемся по параметрам:
my_answer - строка - уникальный id DOM-элемента, в который будет обернуто окно. Ежли на странице будет 2 и больше окон такого плана, то у каждого должен быть свой id.
null - параметр «принадлежности окна» к какому-либо DOM-элементу на странице. Т.е. по дефолту окно всплывает в центре страницы. Хотите чтоб всплывало, на пример, рядом с какой-либо кнопкой, ставьте суда id элемента в виде $(‘#my_name_div’) или через битриксовый эквивалент BX (‘my_name_div’)
content - строка - здесь контент, который будет показан в окне. Можно прямо сюда указывать html или указать #div, в котором лежит нужный текст.
closeIcon: {right: "20px", top: "10px" } - показывает нужна ли вам иконка закрытия окна и ее положение в окне.
titleBar: {content: BX .create("span", {html: ‘Это заголовок окна’, 'props': {'className': 'access-title-bar'}})} - собссно это создание заголовка окна. BX .create - функция создания DOM-элемента. В данном случае создание <span class=’access-title-bar’>Это заголовок окна</span>. Если хотите чтоб ваше окно можно было перетаскивать по странице, то класс лучше не менять.
zIndex: 0,
offsetLeft: 0,
offsetTop: 0,
draggable: {restrict: false} - эти параметры указывают, что окно можно передвигать по странице.
buttons - кнопки для управления содержимым окна. На каждую кнопку создаем новый объект new BX .PopupWindowButton с параметрами:
text - ‘название кнопки’
className - класс на кнопке, из стандартных возможны варианты: popup-window-button-accept - зеленая кнопка как на скрине, popup-window-button-cancel - белая кнопка, popup-window-button-link-cancel - просто ссылка. Само-собой можно приклеить свой стиль.
events: {click: function(){
this.popupWindow .close();
}}
Это параметр, отвечающий за действие, произошедшее при нажатии кнопки. В данном случае this.popupWindow .close(); - говорит о закрытии окна. Но тут возможны различные варианты в зависимости от фантазии и задач. На пример, если в окне форма, можно сделать ajax-отправку контента через
BX.ajax.submit(BX("myForm"), function(data){
BX('ajax-add-answer').innerHTML = data;
});
|
Здесь BX ("myForm"
- id-формы, data - данные, BX ( 'ajax-add-answer').innerHTML = data; - вставка ответа сервера в окно.Либо можно сделать что-то свое в зависимости от нужд. Эта библиотека отлично работает в сочетании с jQuery, поэтому тут можно свободно использовать ее функции.
Далее приведу пример открытия окна по ссылке, загрузку в него ajax-конетнта и отправку формы.
Немного украшательств
<style>
<!--
#ajax-add-answer {
display: none;
width: 800px;
min-height : 400px;
}
-->
</style> |
Подключим дефолтные библиотеки
<?CUtil::InitJSCore( array('ajax' , 'jquery' , 'popup' ));?>
|
<script type="text/javascript">
<!--
BX.ready(function(){
var addAnswer = new BX.PopupWindow("my_answer", null, {
content: BX('ajax-add-answer'),
closeIcon: {right: "20px", top: "10px"},
titleBar: {content: BX.create("span", {html: '<b>Обратная связь</b>', 'props': {'className': 'access-title-bar'}})},
zIndex: 0,
offsetLeft: 0,
offsetTop: 0,
draggable: {restrict: false},
buttons: [
new BX.PopupWindowButton({
text: "Отправить",
className: "popup-window-button-accept",
events: {click: function(){
BX.ajax.submit(BX("myForm"), function(data){ // отправка данных из формы с id="myForm" в файл из action="..."
BX( 'ajax-add-answer').innerHTML = data;
});
}}
}),
new BX.PopupWindowButton({
text: "Закрыть",
className: "webform-button-link-cancel",
events: {click: function(){
this.popupWindow.close(); // закрытие окна
}}
})
]
});
$('#click_test').click(function(){
BX.ajax.insertToNode('/include/testform.php', BX('ajax-add-answer')); // функция ajax-загрузки контента из урла в #div
addAnswer.show(); // появление окна
});
});
//-->
</script> |
<a id="click_test" href="javascript:void(0)" >Клик</a> |
Контейнер, который будет в окне и в который вставим форму по аяксу:
<div id="ajax-add-answer"></div> |
Файл testform.php
<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");?>
<?$APPLICATION->IncludeComponent("bitrix:main.feedback", "support",
Array(
"USE_CAPTCHA" => "Y",
"OK_TEXT" => "Спасибо, ваше сообщение принято.",
"EMAIL_TO" => "st.dremin@ya.ru",
"REQUIRED_FIELDS" => array(),
"EVENT_MESSAGE_ID" => array()
),
false);
if($_SERVER["REQUEST_METHOD"] == "POST")
{
echo '<pre>';
print_r($_POST);
echo '</pre>';
}?> |
Кому интересно можете:
- почитать здесь
- здесь
- или порыться в папке /bitrix/js/main/core/
Назад в раздел
Подписаться на новые материалы раздела:
Загрузка...