Ajax для uCoz - Форум веб маcтера uCoz | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Суббота, 03.12.2016
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]




Русские шрифты



Страница 1 из 11
Модератор форума: IZOTOP 
Форум веб маcтера uCoz » uCoz » Добавление и установка на сайте uCoz » Ajax для uCoz (Установка и настройка Ajax окон на сайте uCoz)
Ajax для uCoz
IZOTOP Дата: Пятница, 13.12.2013, 15:14 | Сообщение # 1
Группа: Администратор
Сообщений: 55
Статус: Offline

Сделать Ajax окно самому не составит труда если Вы уделите время на прочтение этой статьи. Ajax окна могут содержать любой контент, появляться после загрузки страницы, через установленное время, вызываться с помощью кнопок управления. На одной странице может быть загружено большое количество Ajax окон содержащих различный контент предоставляемый пользователю на обозрение. Установка скриптов для воспроизведения должна производится через "Панель HTML кодов" при добавлении нового материала, если Ajax окно будет показано на всех страницах Вашего сайта, тогда скрипт можно установить в "Нижнюю часть сайта".

Необходимые файлы для работы Ajax окон

На сайте системы uCoz все нижеперечисленные файлы подключены по умолчанию, но для объективности стоит упомянуть и о них.

Файл layer содержащий стили Ajax окон

На момент создания статьи было зарегистрировано 6 разновидностей файлов стилей: layer1.css, layer2.css, layer3.css, layer4.css, layer5.css, layer6.css.



<link type="text/css" rel="StyleSheet" href="http://s36.ucoz.net/src/layer1.css" />


Библиотека jQuery

На момент создания статьи в настройках ПУ можно было выбрать 3 вида библиотек: jquery-1.3.2.js, jquery-1.6.1.js, jquery-1.7.2.js.



<script type="text/javascript" src="http://s36.ucoz.net/src/jquery-1.7.2.js"></script>


Скрипт uWnd для запуска Ajax окна


<script type="text/javascript" src="http://s36.ucoz.net/src/uwnd.js?2"></script>


Основные параметры структуры Ajax окна

Обязательное содержание скрипта для вызова Ajax окна, если не указать хоть один параметр, окно не будет работать.



<script>
$(function(){
new _uWnd('Имя id окна','Заголовок окна',Высота окна,Ширина окна,{
Параметры,
Отображения,
Ajax,
Окна
},{ Внутреннее содержание Ajax окна
});
</script>



Имя идентификатора окна

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


Заголовок окна

Заголовок будет отображаться в верхней части окна.


Высота окна

Под высотой подразумевается значение в цыфрах без указания масштабируемой величины.


Ширина окна

Аналогично высоте, значение в цыфрах без указания масштабируемой величины.


Параметры окна

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


Содержание окна

Содержание отображаемого контента в окне может быть самым разнообразным, всё зависит от воображения веб мастера использующего Ajax технологии.


Основные параметры загрузки Ajax окна
Нажми здесь чтобы увидеть параметры Ajax окна

  • header:1(да) или 2(нет)

    Верхняя часть Ajax окна, если присутствует хоть один из параметров находящихся в верхней части, верхняя часть будет отображена.


    min:1(да) или 2(нет)

    Кнопка управления сворачиванием Ajax окна находящаяся в верхней части окна


    max:1(да) или 2(нет)

    Кнопка управления разворачиванием Ajax окна находящаяся в верхней части окна


    close:1(да) или 2(нет)

    Кнопка управления закрытием Ajax окна находящаяся в верхней части окна


    modal:1(да) или 2(нет)

    Будет ли окно модальным, притеняя область страницы вокруг Ajax окна


    popup:1(да) или 2(нет)

    Закрыть окно при клике вне области Ajax окна


    closeonesc:1(да) или 2(нет)

    Закрыть Ajax окно при нажатии на клавишу Esc на ПК


    nomove:1(да) или 2(нет)

    Разрешить перемещение Ajax окна по странице


    hideonmove:1(да) или 2(нет)

    Отображаемое содержимое Ajax окна будет скрыто при перемещении


    resize:1(да) или 2(нет)

    Разрешить изменять размеры Ajax окна


    hideonresize:1(да) или 2(нет)

    Отображаемое содержимое Ajax окна будет скрыто при изменении размеров


    autosize:1(да) или 2(нет)

    Разрешить браузеру самому изменять размеры Ajax окна


    autosizeonimages:1(да) или 2(нет)

    Изменять размеры Ajax окна после загрузки контента в виде изображений


    shadow:1(да) или 2(нет)

    Применить тени для Ajax окна


    alert:1(да) или 2(нет)

    Ajax окно будет выше загруженных окон с модальными параметрами


    fixed:1(да) или 2(нет)

    Ajax окно будет фиксированным, при скроллинге переместится оставаясь в точке загрузки


    icon:'favicon.ico'

    Отображать иконку (Favicon) в верхней левой части Ajax окна


    center:1(да) или 2(нет)

    Ajax окно будет находиться в центральной части страницы


    align:'left' (левее), 'center' (по центру), 'right' (правее)

    Содержание контента Ajax окна будет смещено в указаную сторону


    url:'адрес'

    В виде контента Ajax окна будет использован внешний элемент


    minh:число

    Устанавливаем Ajax окну минимальную высоту


    minw:число

    Устанавливаем Ajax окну минимальную ширину


    maxh:число

    Устанавливаем Ajax окну максимальную ширину


    maxw:число

    Устанавливаем Ajax окну максимальную ширину


Выше предоставлены параметры чаще всего используемые для управления загрузкой Ajax окна, но разумеется это ещё не все. И имейте в виду, даже если Вы не установили какой то параметр, он всё равно может быть задействован. Не нужные параметры нужно отменять, обратите на это внимание.


Примеры применения Ajax окон

Загружаем текст в Ajax окне

Для того чтобы текст отображался в Ajax окне замените текст в примере на свой:



<script>
$(function(){
new _uWnd('dsText','Окно с текстом',30,300,{
shadow:1,
icon:'/favicon.ico',
min:1,
close:1,
modal:1,
minh:30,
minw:300,
closeonesc:1
},'Тут находится Ваш текст');});
</script>



Загружаем фрейм в Ajax окне

Для загрузки фрейма в Ajax окне замените ссылку на iframe страницу:



<script>
$(function(){
new _uWnd('dsIframe','Окно с фреймом',550,550,{
shadow:1,
icon:'/favicon.ico',
min:1,
close:1,
modal:1,
minh:550,
minw:550,
closeonesc:1
},'<iframe src="http://delaisait.ucoz.ru/html/html-redactor.html" width="100%" frameborder="0" height="550"></iframe>');});
</script>



Сделать файл xml для загрузки в Ajax окне

Для загрузки xml контента в Ajax окне Вам потребуется создать файл с расширением .xml и сохранить его в кодировке utf-8, ну и соответственно загрузить его на сервер своего сайта:



<?xml version="1.0" encoding="UTF-8"?>
<ajax>
<cmd t="layerContentdsxml" p="innerHTML">
<![CDATA[
Здесь будет находиться ваш XML контент
]]>
</cmd>
</ajax>



Загрузить файл xml в Ajax окне

Для загрузки xml контента в Ajax окне Вам нужно изменить путь к файлу в скрипте, сам файл xml должен находиться на сервере сайта с которого будет происходить загрузка:



<script>
$(function(){
new _uWnd('dsxml','Загрузка xml в Ajax окне',300,50,{
shadow:1,
icon:'/favicon.ico',
min:1,
close:1,
resize:1,
closeonesc:1
},{url:'/xml/dsxml.xml',xml:true});
});
</script>



Открыть Ajax окно ссылкой


<script>
function dsopenlink(){
new _uWnd('dsLink','Открываем окно ссылкой',30,300,{
shadow:1,
icon:'/favicon.ico',
close:1,
modal:1,
minh:30,
minw:300,
closeonesc:1
},'Окно открылось после нажатия на ссылку');
};
</script>
<a href="javascript://" onclick="dsopenlink();">Открой Ajax окно</a>




Открыть Ajax окно кнопкой


<script>
function dsopenbooton(){
new _uWnd('dsBooton','Открываем окно кнопкой',30,300,{
shadow:1,
icon:'/favicon.ico',
close:1,
modal:1,
minh:30,
minw:300,
closeonesc:1
},'Окно Ajax открылось после нажатия на кнопку');
};
</script>
<input type="button" value="Открой Ajax окно" onclick="dsopenbooton();">



Ajax окно с таймером


<script>
function dstime(){
_uWnd.alert(
'Ajax окно откроется через 5000 миллисекунд, будет показано 40000 миллисекунд, а затем исчезнет',
'Ajax окно - таймер',
{w: 300, h: 95, tm: 40000});};
setTimeout(dstime, 5000);
</script>



Ajax окно с обратным таймером


<script>
$(document).ready(function(){
_uWnd.alert( 'Ajax окно будет загружено вместе со страницей, пройдёт 10000 миллисекунд и оно пропадёт',
'Окно Ajax с обратным таймером',{w: 300, h: 100, tm: 10000});
});
</script>



Проверка примеров в HTML редакторе

Все примеры описанные выше Вы сможете проверить и попробывать поэкспериментировать с изменениями воспользовавшись редактором находящимся ниже.
Для этого Вам потребуется оснастить редактор комплектом кодов для отображения Ajax окон. Скопируйте в редактор 3 кода и ниже них вставляйте коды из примеров.



<link type="text/css" rel="StyleSheet" href="http://s36.ucoz.net/src/layer1.css" />
<script type="text/javascript" src="http://s36.ucoz.net/src/jquery-1.7.2.js"></script>
<script type="text/javascript" src="http://s36.ucoz.net/src/uwnd.js?2"></script>


Вот так производится проверка примера:



<link type="text/css" rel="StyleSheet" href="http://s36.ucoz.net/src/layer1.css" />
<script type="text/javascript" src="http://s36.ucoz.net/src/jquery-1.7.2.js"></script>
<script type="text/javascript" src="http://s36.ucoz.net/src/uwnd.js?2"></script>
<script>
$(document).ready(function(){
_uWnd.alert( 'Редактор не оснащён скриптами и стилями Ajax окон, поэтому наличие кодов прописанных выше обязательно для отображения',
'Комплект Ajax окна для проверки в редакторе',{w: 300, h: 100, tm: 10000});
});
</script>


Редактор HTML для проверки и экспериментов с Ajax окнами



 
MasterBel Дата: Пятница, 03.01.2014, 13:28 | Сообщение # 2
Группа: Вебмастер
Сообщений: 5
Статус: Offline
А как к окну привязать музыкальное оповещение???
Например к этому
Код
<?if($USER_LOGGED_IN$)?>
<script type="text/javascript">function tMess(n){var a=[' новое сообщение',' новых сообщения',' новых сообщений'];return a[n%10==1&&n%100!=11?0:n%10>=2&&n%10<=4&&(n%100<10||n%100>=20)?1:2]}; function getPM(){$.get("/index/14",function(a){var s=$("b.unread",a).size();if (s) {var n=tMess(s),all=[],leg=(s==1)?'Сообщение':'Сообщения';$("b.unread",a).each(function(){var title = $(this).html(), href = $(this).parent().attr("href"); all.push('» <a href="'+href+'">'+title+'</a>');}); new _uWnd('ls','Новые ЛС',250,120,{icon:'http://rucoz.com/img/other/message.png',align:'left'},'<center>Уважаемый <b>$USERNAME$</b><br>Вам пришло '+s+n+'!</center><br><fieldset><legend>'+leg+'</legend>'+all.join("<br>")+'</fieldset>');}});setTimeout(getPM,10000)};getPM();</script>
<?endif?>


Сообщение отредактировал MasterBel - Пятница, 03.01.2014, 13:30
 
IZOTOP Дата: Воскресенье, 05.01.2014, 23:12 | Сообщение # 3
Группа: Администратор
Сообщений: 55
Статус: Offline
Цитата MasterBel ()
А как к окну привязать музыкальное оповещение???


Полученное сообщение будет сопровождаться звуком

Код


<?if($USER_LOGGED_IN$)?>
<script type="text/javascript">function tMess(n){var a=[' новое сообщение',' новых сообщения',' новых сообщений'];return a[n%10==1&&n%100!=11?0:n%10>=2&&n%10<=4&&(n%100<10||n%100>=20)?1:2]}; function getPM(){$.get("/index/14",function(a){var s=$("b.unread",a).size();if (s) {var n=tMess(s),all=[],leg=(s==1)?'Сообщение':'Сообщения';$("b.unread",a).each(function(){var title = $(this).html(), href = $(this).parent().attr("href"); all.push('» <a href="'+href+'">'+title+'</a>');}); new _uWnd('ls','Новые ЛС',250,120,{icon:'//delaisait.ucoz.ru/img/ajax/konvert.png',align:'left'},'<center>Уважаемый <b>$USERNAME$</b><br>Вам пришло '+s+n+'!</center><br><fieldset><legend>'+leg+'</legend>'+all.join("<br>")+'</fieldset>');}});setTimeout(getPM,10000)};getPM();</script>
<audio autoplay>  
<source src="//delaisait.ucoz.ru/audioplay/sounds/pm_sound.ogg">  
<source src="//delaisait.ucoz.ru/audioplay/sounds/pm_sound.mp3">
<source src="//delaisait.ucoz.ru/audioplay/sounds/pm_sound.wav">  
</audio>
<?endif?>

 
MasterBel Дата: Понедельник, 06.01.2014, 19:13 | Сообщение # 4
Группа: Вебмастер
Сообщений: 5
Статус: Offline
IZOTOP, Офигеееееть!!!!! Класс... Спасибо ОГРОМНОЕ!!!!!!!!!!!!!!!!!!!

Добавлено (06.01.2014, 19:13)
---------------------------------------------
Что-то наверное не так.
Поставил и озвучивается при каждом обновлении страницы, даже если сообщение и не поступило

 
gefest35 Дата: Пятница, 23.05.2014, 21:37 | Сообщение # 5
Группа: Вебмастер
Сообщений: 1
Статус: Offline
А куда поставить ? в подвал или на страници сайта между тегами ?

Добавлено (23.05.2014, 21:37)
---------------------------------------------
Пасиб )) так и сделаю !

 
GyLorVi Дата: Четверг, 21.04.2016, 12:07 | Сообщение # 6
Группа: Вебмастер
Сообщений: 1
Статус: Offline
Ajax окно с формой обратной связи. Всё вроде получилось только нет окна Ajax. подскажите что делать сайт http://petrovkaschool.ucoz.ru
 
bootstraptema_ Дата: Вторник, 26.04.2016, 12:37 | Сообщение # 7
Группа: Администратор
Сообщений: 2
Статус: Offline
Цитата GyLorVi ()
Всё вроде получилось только нет окна Ajax.


1.Вам нужно удалить из "Нижней части" сайта вот это (целиком как есть, это почти в самом низу нижней части):

Код

<script>
function mySensForm(el){
new _uWnd('myForm','Форма связи с администратором',440,340,{
align:'left',fadeclosetype:1,min:1,max:1,shadow:1,header:1,resize:0,
oncontent:function(){
$.get(el.href,{},function(data){
$('#myForm').html($('#msgForm',data).html())});
}},'<div id="myForm" style="width:450px;height:350px;">
</div>');
};
</script>
<script type="text/javascript" src="http://s36.ucoz.net/src/uwnd.js?2"></script>


2. В "Нижней части", сразу после тега <footer> замените скрипт (целиком):

Код

<script>
function mySensForm(el){
new _uWnd('myForm','Форма связи с администратором',440,340,{
align:'left',fadeclosetype:1,min:1,max:1,shadow:1,header:1,resize:0,
oncontent:function(){
$.get(el.href,{},function(data){
$('#myForm').html($('#msgForm',data).html())});
}},'<div id="myForm" style="width:450px;height:350px;">
</div>');
};
</script>


На вот этот:

Код

<script>function mySensForm(el){new _uWnd('myForm','Форма связи с администратором',440,340,{align:'left',fadeclosetype:1,min:1,max:1,shadow:1,header:1,resize:0, oncontent:function(){$.get(el.href,{},function(data){$('#myForm').html($('#msgForm',data).html())});}},'<div id="myForm" style="width:450px;height:350px;"></div>');};</script>


Всё будет работать как нужно...
 
Форум веб маcтера uCoz » uCoz » Добавление и установка на сайте uCoz » Ajax для uCoz (Установка и настройка Ajax окон на сайте uCoz)
Страница 1 из 11
Поиск:



Русские шрифты