Форумы » MPCHAT - CMS хостинг чатов для профессионалов »

скрипт Модальные окна для чата



1 2 3 4 ... 7

455
WorldsRadio
мжно ли как то усовершенствовать скрипт, не меняя его свойства?

[quote]<script language="JavaScript1.2">
// Зона за которую можно таскать
var x = 0;
var y = 0;
var w = 100;
var h = 100;

document.onmousemove = MouseEvent;
document.onmousedown = MousePress;
document.onmouseup = MouseUnPress;

var browser = navigator.appName;
var ver = parseInt(navigator.appVersion);

if (browser != "Microsoft Internet Explorer")
{
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP);
document.captureEvents(Event.MOUSEMOVE);
obj = document.getElementById('WIND');
}
else
{
document.onselectstart = checkEl;
document.ondragstart = checkEl;
obj = document.all.item('WIND');
}

function checkEl()
{
return false;
}

var pressflag = false;
var oldcursx, oldcursy;
var firstflag = true;
var flag = false;

function MouseEvent(ev)
{
windx = parseInt(obj.style.left);
windy = parseInt(obj.style.top);
cursx = (browser == "Microsoft Internet Explorer") ? event.clientX : ev.clientX;
cursy = (browser == "Microsoft Internet Explorer") ? event.clientY : ev.clientY;

if(firstflag)
{
oldcursx = cursx;
oldcursy = cursy;
firstflag = false;
}

if (flag) {
obj.style.left = windx + cursx - oldcursx;
obj.style.top = windy + cursy - oldcursy;
}
oldcursx = cursx;
oldcursy = cursy;
}

function MousePress()
{
if ( (cursx > windx+x) &&
(cursy > windy+y) &&
(cursx < windx+x+w) &&
(cursy < windy+y+h) )
{
obj.style.cursor = "move";
flag = true;
}
}

function MouseUnPress()
{
if (flag)
{
pressflag = flag = false;
obj.style.cursor = "auto";
}
}
</script>[/quote]
2970
Foggy
1. Что он сейчас делает? Мог бы хоть в кратце описать, что нам по коду это понимать? Можно, конечно, но долго же.
2. Усовершенствовать? Что это значит? Сократить в объёме, добавить какую-то возможность, что?
3. "Не меняя свойств" это значит не переписывая? не меняя входных переменных у функций? или что?
1007
BETEPAH
[quote=Foggy]1. Что он сейчас делает? Мог бы хоть в кратце описать, что нам по коду это понимать? Можно, конечно, но долго же.
2. Усовершенствовать? Что это значит? Сократить в объёме, добавить какую-то возможность, что?
3. "Не меняя свойств" это значит не переписывая? не меняя входных переменных у функций? или что?[/quote]
1. Позволяет таскать мышкой объекты, если я правильно понял
2. и 3. присоединяюсь к вопросам.
2609
Pegass
то ли у меня руки из опы, то ли скрипт не рабочий, но он точно должен таскать объекты, хотя так его писать Это жестоко особенно если в чате 4-я версия а не 5-я)))
6600
admiral
Если этот вариант чем то не у страивает, есть другой - http://www.mintdesign.ru/blog/js-drag-and-drop
1007
BETEPAH
[b]admiral[/b], Спасибо за хороший скрипт. Немного модифицировал его, чтоб объект невозможно было вытащить наверх или влево ЗА окно браузера, откуда его не вернуть мышкой 😉
[code] var newX = posLeft + mousePosX - obj.mousePosX;
var newY = posTop + mousePosY - obj.mousePosY;
newX = newX < 0 ? 0 : newX;
newY = newY < 0 ? 0 : newY;
obj.style.left = newX + 'px';
obj.style.top = newY + 'px';[/code]
[url=http://jsfiddle.net/BETEPAH/bhNYU/]попробовать[/url].

Отредактировано BETEPAH - 04.10.2012
2609
Pegass
[b]BETEPAH[/b], Залипает мышь, если во время перетаскивания курсор выходит за пределы документа)))
1007
BETEPAH
[quote=Pegass][b]BETEPAH[/b], Залипает мышь, если во время перетаскивания курсор выходит за пределы документа)))[/quote]
только если отпустить кнопку за пределами. Увы, если мышка за документом, он (документ) никак не может поймать onmouseup. Можно конечно попробовать останавливать курсор при достижении границ, но тогда скрипт будет разрастаться, мне кажется. Хотя... можно попробовать
2970
Foggy
а можете ещё сделать, чтоб за правый и нижний края тоже не убрать было? очень полезный скрипт)
1007
BETEPAH
[quote=Foggy]а можете ещё сделать, чтоб за правый и нижний края тоже не убрать было? очень полезный скрипт)[/quote]
Сделал. Залипания тоже убрал, теперь при выходе курсора за окно срабатывает obj.clicked = false:
[code]function drag_object( evt, obj ) {
evt = evt || window.event;
obj.clicked = true;
obj.mousePosX = evt.clientX; obj.mousePosY = evt.clientY;
if( evt.preventDefault ) evt.preventDefault(); else evt.returnValue = false;
document.onmouseup = function(){ obj.clicked = false }
document.onmousemove = function( evt ) {
evt = evt || window.event;
if( obj.clicked ) {
posLeft = !obj.style.left ? obj.offsetLeft : parseInt( obj.style.left );
posTop = !obj.style.top ? obj.offsetTop : parseInt( obj.style.top );
mousePosX = evt.clientX;
mousePosY = evt.clientY;
var newX = posLeft + mousePosX - obj.mousePosX;
var newY = posTop + mousePosY - obj.mousePosY;
var newXright = newX + obj.offsetWidth;
var newYbottom = newY + obj.offsetHeight;
var scrollHeight = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight);
var scrollWidth = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth);
newX = newX < 0 ? 0 : newX;
newY = newY < 0 ? 0 : newY;
newX = newXright > scrollWidth ? scrollWidth - obj.offsetWidth : newX;
newY = newYbottom > scrollHeight ? scrollHeight - obj.offsetHeight : newY;
obj.style.left = newX + 'px';
obj.style.top = newY + 'px';
obj.mousePosX = mousePosX;
obj.mousePosY = mousePosY;
if(mousePosX < 0 || mousePosY < 0 || mousePosX > scrollWidth || mousePosY > scrollHeight) obj.clicked = false;
}
}
}[/code]
Песочница с живым примером [url=http://jsfiddle.net/BETEPAH/bhNYU/3/]здесь[/url].
455
WorldsRadio
ага видно подогнал я Вам темку, но по первому моему сообщению я попросил о уменьшить скрипт, облегчит, под словами про модернизировать так заключалось, и скрипт работает если что.
2970
Foggy
если бы в этом скрипте ещё был ресайз, цены бы ему не было 🐱‍👤 ну, это, конечно, на твоё усмотрение, но лично я был бы безмерно благодарен ❗
Ветеран, ты крут!)
1007
BETEPAH
[quote=Foggy]если бы в этом скрипте ещё был ресайз[/quote]
Чувствую, разработчики jquery UI на меня в суд скоро подадут за плагиат, это сейчас модно. Но я подумаю. Самому интересно разобраться с этим, думаю, сделаю рейсайз, это должно быть несложно.

Отредактировано BETEPAH - 06.10.2012
2609
Pegass
[quote=BETEPAH][quote=Foggy]если бы в этом скрипте ещё был ресайз[/quote]
Чувствую, разработчики jquery UI на меня в суд скоро подадут за плагиат, это сейчас модно. Но я подумаю. Самому интересно разобраться с этим, думаю, сделаю рейсайз, это должно быть несложно.[/quote]
Да так же, только вместо left и top менять надо width и height


🐱‍👤

[url=http://jsfiddle.net/Pegass/Km2vQ/]тсссс[/url]

Отредактировано Pegass - 07.10.2012
1007
BETEPAH
[quote=Pegass]Да так же, только вместо left и top менять надо width и height[/quote]
Не совсем, надо же еще о схлопывании было подумать. И кроме того, я так понимаю, что после этого захочется еще кнопку закрытия окна, а затем и апи по созданию окон из js.
Вот, что получилось в итоге - http://jsfiddle.net/BETEPAH/bhNYU/16/
скрипт в дополнение предыдущего
[code]function resizeObject( evt, obj ) {
evt = evt || window.event;
obj.resize = true;
obj.mousePosX = evt.clientX; obj.mousePosY = evt.clientY;
if( evt.preventDefault ) evt.preventDefault(); else evt.returnValue = false;
document.onmouseup = function(){ obj.resize = false }
document.onmousemove = function( evt ) {
evt = evt || window.event;
if( obj.resize ) {
objWidth = !obj.style.width ? obj.offsetWidth : parseInt( obj.style.width );
objHeight = !obj.style.height ? obj.offsetHeight : parseInt( obj.style.height );
mousePosX = evt.clientX;
mousePosY = evt.clientY;
obj.style.width = objWidth + mousePosX - obj.mousePosX + 'px';
obj.style.height = objHeight + mousePosY - obj.mousePosY + 'px';
obj.mousePosX = mousePosX;
obj.mousePosY = mousePosY;
}
}
}
function createModal() {
var elDiv = document.createElement('div');
elDiv.className = 'drag-window';
document.body.appendChild(elDiv);

elSpn = document.createElement('span');
elDiv.appendChild(elSpn);
elSpn.className = 'title';
elSpn.innerHTML = 'Активная область <span title="закрыть" class="close-button" onmousedown="deleteModal(this.parentNode.parentNode)">&times;</span>';
elSpn.onmousedown = function(event){dragObject(event || window.event, this.parentNode);};

elContent = document.createElement('div');
elDiv.appendChild(elContent);
elContent.className = 'content';
elContent.innerHTML = 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna <a href="#">aliquam erat</a> volutpat.';

elResize = document.createElement('div');
elDiv.appendChild(elResize);
elResize.className = 'resizeButton';
elResize.innerHTML = '<img src="http://imgs.su/tmp/2012-10-07/1349554018-492.jpg" alt="" onmousedown="resizeObject(event, this.parentNode.parentNode)" />';
}
function deleteModal(elem) {
elem.parentNode.removeChild(elem);
}[/code]
P.S. А если подключать jQuery, то уж тогда и UI их подключить можно и тогда вообще все вышеперечисленные требования сведутся к добавлению классов драггабле и ресайзабле. Интерес был реализовать это именно на чистом js, поразмять мозги 😉

Отредактировано BETEPAH - 07.10.2012
2970
Foggy
[b]BETEPAH[/b],
1. блок, за который надо тянуть - не в самом углу, не хватает 4px
2. можно растянуть за границы окна с появлением прокрутки
3. при подтаскивании блока к нижнему правому углу, блок резко отскакивает по диагонали назад. кстати, эта же проблема есть в скрипте Pegass(при уменьшении допустимых отступов от краёв).
4. ещё, когда создано много окон и они наезжают друг на друга, хорошо бы, чтоб по клику они получали фокус. ну, менять z-index, наверно.
или, как вариант, не давать одним блокам наезжать на другие.
6600
admiral
:D тогда уж совсем для полноты еще не хватает пары кнопок свернуть и развернуть
2970
Foggy
[b]admiral[/b], да, и тогда это уже будет покушение не на jQuery UI, а на Windows 😁
2609
Pegass
[b]BETEPAH[/b], Давай уже допиливай)))) 1 - при ресайзе можно вытащить чуть вправо и вниз 2) залипание мыши при ресайзе если отпустить за пределами документа ))) 3) скрипт по созданию окон не плохо переделать на заполнение контентом creatModal(content,title,res_on_off ); content - контент вместе с хтмл, title - заголовок нового окна , res_on_off - можно ли изменять размер

PS jquery ui - слишком жирное удовольствие))) Может от меня отстанут с этими окошками 😊 😊

[b]admiral[/b], кнопки свернуть и развернуть - это слишком просто и скучно, даже писать лень))

Отредактировано Pegass - 07.10.2012
2970
Foggy
[b]Pegass[/b], писать может просто и скучно, зато в чате очень пригодилось бы. Особенно если нужно на время спрятать приватное вещание. Заново могут не разрешить 😁 а так можно было бы просто свернуть
1 2 3 4 ... 7


Неавторизованные и новички не могут отправлять сообщения.

© 2008-2020
Контакты | Группа | Privacy и Cookie | Правила