• DONATE to NULLED!
    Форуму и его команде можно помочь, мотивировать модераторов разделов.     Помогите модератору этого раздела killoff лично.

Помощь jQuery на DLE

Статус
В этой теме нельзя размещать новые ответы.
P

pronax

Постоялец
Регистрация
20 Сен 2008
Сообщения
147
Реакции
10
Привет всем, с толкнулся с такой проблемой, немогу сделать открывающееся окно(типо popup) на DLE, мне надо чтобы я нажимал на кнопку а открывалась окошечко а в нём подгружалась html...
делал как тут:
Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.
нечего не получилось, просто показывает "Текст" а нажать нельзя...
пробывал сделать с HighSlide, тоже нечего не получается, просто открывает страницу "demo.html"(например), а надо чтобы в отдельно окошечке... ммм... ну думаю вы поняли о чём я, на 4dlе так авторизация сделана, вот примерно тоже самое, только чтобы там отображался нужная мне html страница... ну или php страница...

мне впринципе без разницы с HighSlide или jQuery...
Заранее СПС!
PS версия 8.0
 
ну вроде нет ничего сложного
Скачиваешь скрипты от сюда
Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

и кидаешь их в папку /engine/classes/
Потом в main.tpl между тегами <head> и </head> прописываешь это
<script type="text/javascript" src="/engine/classes/jquery-1.3.1.js"></script>
<script type="text/javascript" src="/engine/classes/jquery.dimensions.js"></script>
<script type="text/javascript" src="/engine/classes/ui.dialog.js"></script>
<script type="text/javascript" src="/engine/classes/ui.resizable.js"></script>
<script type="text/javascript" src="/engine/classes/ui.mouse.js"></script>
<script type="text/javascript" src="/engine/classes/ui.draggable.js"></script>
Нажмите для раскрытия...
Далее в нужном месте main.tpl прописываешь
<div id="drag" class="myDialog">Текст</div>

<script type="text/javascript">
$(document).ready(function(){
$("#drag").dialog({
title: 'Название диалогового окна',
width: 350, // устанавливаем ширину окна
height: 200, //устанавливаем высоту окна
resizable: true, //говорим, что его пользователь может изменять
draggable: true, //перетаскиваемое окно или нет
position: 'center', //позиционирование
buttons: { //добавляем кнопки на форму
'Отправить': function() { alert('Вы нажали кнопку \'Отправить\''); },
'Закрыть': function() { $(this).dialog('close'); alert('Вы нажали кнопку \'Закрыть\''); }
}
});
// ------- Диалог -------
});
</script>
Нажмите для раскрытия...
В таблицу стилей style.css закидываешь
* {
margin:0;
padding:0;
}
html, body {
background-color:#E2F2E2;
font-family: "Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
}
.ui-resizable {
position: relative;
}
.ui-resizable-handle {
position: absolute;
display: none;
font-size: 0.1px;
}
.ui-resizable .ui-resizable-handle {
display: block;
}
body .ui-resizable-disabled .ui-resizable-handle { display: none; } /* use 'body' to make it more specific (css order) */
body .ui-resizable-autohide .ui-resizable-handle { display: none; } /* use 'body' to make it more specific (css order) */


/* Стили диалогового окна */

.myDialog .ui-dialog,
.myDialog.ui-dialog {
background-color: #e6f7d4;
}

.myDialog .ui-dialog .ui-dialog-titlebar,
.myDialog.ui-dialog .ui-dialog-titlebar {
border-bottom: 1px solid #d8d2aa;
background: #ff9900 url('dialog-title.gif') repeat-x;
padding: 0px;
height: 28px;
}

.myDialog .ui-dialog.ui-draggable .ui-dialog-titlebar,
.myDialog.ui-dialog.ui-draggable .ui-dialog-titlebar {
cursor: move;
}

.myDialog .ui-dialog .ui-dialog-titlebar-close,
.myDialog.ui-dialog .ui-dialog-titlebar-close {
width: 16px;
height: 16px;
background: url('dialog-titlebar-close.png') no-repeat;
position:absolute;
top: 6px;
right: 7px;
cursor: default;
outline: none;
}

.myDialog .ui-dialog .ui-dialog-titlebar-close span,
.myDialog.ui-dialog .ui-dialog-titlebar-close span {
display: none;
}

.myDialog .ui-dialog .ui-dialog-titlebar-close-hover,
.myDialog.ui-dialog .ui-dialog-titlebar-close-hover {
background: url('dialog-titlebar-close-hover.png') no-repeat;
}

.myDialog .ui-dialog .ui-dialog-title,
.myDialog.ui-dialog .ui-dialog-title {
margin-left: 5px;
color: white;
font-weight: bold;
position: relative;
top: 7px;
left: 4px;
}

.myDialog .ui-dialog .ui-dialog-content,
.myDialog.ui-dialog .ui-dialog-content {
margin: 1.2em;
}

.myDialog .ui-dialog .ui-dialog-buttonpane,
.myDialog.ui-dialog .ui-dialog-buttonpane {
position: absolute;
bottom: 8px;
right: 12px;
width: 100%;
text-align: right;
}

.myDialog .ui-dialog .ui-dialog-buttonpane button,
.myDialog.ui-dialog .ui-dialog-buttonpane button {
margin: 6px;
}

.myDialog .ui-dialog .ui-resizable-n,
.myDialog.ui-dialog .ui-resizable-n { cursor: n-resize; height: 6px; width: 100%; top: 0px; left: 0px; background: transparent url('dialog-n.gif') repeat scroll center top; }

.myDialog .ui-dialog .ui-resizable-s,
.myDialog.ui-dialog .ui-resizable-s { cursor: s-resize; height: 8px; width: 100%; bottom: 0px; left: 0px; background: transparent url('dialog-s.gif') repeat scroll center top; }

.myDialog .ui-dialog .ui-resizable-e,
.myDialog.ui-dialog .ui-resizable-e { cursor: e-resize; width: 7px; right: 0px; top: 0px; height: 100%; background: transparent url('dialog-e.gif') repeat scroll right center; }

.myDialog .ui-dialog .ui-resizable-w,
.myDialog.ui-dialog .ui-resizable-w { cursor: w-resize; width: 7px; left: 0px; top: 0px; height: 100%; background: transparent url('dialog-w.gif') repeat scroll right center; }

.myDialog .ui-dialog .ui-resizable-se,
.myDialog.ui-dialog .ui-resizable-se { cursor: se-resize; width: 9px; height: 9px; right: 0px; bottom: 0px; background: transparent url('dialog-se.gif'); }

.myDialog .ui-dialog .ui-resizable-sw,
.myDialog.ui-dialog .ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: 0px; bottom: 0px; background: transparent url('dialog-sw.gif'); }

.myDialog .ui-dialog .ui-resizable-nw,
.myDialog.ui-dialog .ui-resizable-nw { cursor: nw-resize; width: 9px; height: 29px; left: 0px; top: 0px; background: transparent url('dialog-nw.gif'); }

.myDialog .ui-dialog .ui-resizable-ne,
.myDialog.ui-dialog .ui-resizable-ne { cursor: ne-resize; width: 9px; height: 29px; right: 0px; top: 0px; background: transparent url('dialog-ne.gif'); }

.myDialog button {
font-family: "Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
}
Нажмите для раскрытия...

И всё должно работать.
 
ммм.... неработает... всё делаю как надо, только библиотека у меня jquery-1.3.2.js... но думаю не в этом проблема.... может в самих UI какая проблема... кто-нить выложить может?! только не посылайте на офф. сайт ...
 
да какая разница как называется файл библиотеки, главное чтобы ссылка на него указывала
<script type="text/javascript" src="/engine/classes/jquery-1.3.1.js"></script>
либо если у тебя файл jquery-1.3.2.js тогда в main.tpl
<script type="text/javascript" src="/engine/classes/jquery-1.3.2.js"></script>
Нажмите для раскрытия...
 
Эта статья была перемещена в другой раздел, воспользуйтесь поиском

Я хотел попробовать, но вот такое сообщение.

Если можно выложите zip-архив со скриптами, если есть у кого
 
Hander я имел ввиду отличия между версиями... html знаю, php немного... js совсем мало... что писать я знаю, но вот почему неработает...:nezn:
sasyk я твоё сообщение, вообще не понял....

PS ниукого библиотек нету?!
 
Есть библиотека Caobox. Просто создаёш в main.tpl DIV с display:none и даёш ему ID.

Подружаеш jQuerry и ту билеотеку (В атаче, только в .js переименуй) и вызвваеш окно так: <a onclick="caobox.show_popup('ТВОЙ ID');">test</a>

Чтобы егоже закрыть - так: <a onclick="caobox.close_popup()">test</a>
 

Вложения

  • caobox.txt
    3,8 KB · Просмотры: 5
Хотел с сайта, что ты показал скачать скрипты, но пишет ошибку.
Если у тебя эти скрипты есть, ты их уже скачал - выбрось сюда пожалуйста
 
pronax написал(а):
Привет всем, с толкнулся с такой проблемой, немогу сделать открывающееся окно(типо popup) на DLE
Нажмите для раскрытия...

А можно узнать где находиться сам js файл? А то.. .htaccess не всегда разрешает загружать .жс файл который находиться рядом. Перемести .js в папку ajax.
 
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху