VPF::Приостановить выполнение скрипта

S.A.P.

Дата 10.3.2006, 14:53 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 2664
Регистрация: 11.6.2004

Репутация: 8
Всего: 71

Вопрос: как можно сделать САБЖ, что - то вроде waitFor(button.onClick); По принципу модальных диалогов.

Знаю что нельзя, а вдруг можно smile

Ciber SLasH

Дата 10.3.2006, 14:55 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 24
Всего: 67

А для чего это нужно?

S.A.P.

Дата 10.3.2006, 15:11 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 2664
Регистрация: 11.6.2004

Репутация: 8
Всего: 71

Это нужно для создания своего собственного модального диалога, чтобы интерефейс вызова выглядел примерно следующим образом:
if (my_confirm('вы уверены?')) // продолжаем

Это сообщение отредактировал(а) S.A.P. - 10.3.2006, 15:11

Ciber SLasH

Дата 10.3.2006, 15:31 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 24
Всего: 67

Может вот такое подойдёт:

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content='text/html; charset=windows-1251'>
<meta http-equiv="MSThemeCompatible" content='Yes'>
<meta name="Generator" content='EditPlus 2.21.330'>
<meta name="Author" content='Ciber SLasH'>
<title>JavaScript :: Пример блокировки элементов</title>
<script type='text/javascript'>
function enableDIV(obj) {
var div = document.getElementById("main");
var elems = ['input', 'select', 'textarea', 'button'];
    div.disabled = false;
    obj.style.display = "none";
    if (div.removeEventListener) {
        div.removeEventListener('selectstart', doFocus, false);
    } else if (div.detachEvent) {
        div.detachEvent('onselectstart', doFocus);
    }
    for (var i = 0; i < elems.length; i++) {
        var elemList = div.getElementsByTagName(elems[i]);
        for (var j = 0; j < elemList.length; j++)
            elemList[j].disabled = false;
    }
}
function disableDIV() {
var float = document.getElementById("float");
var div = document.getElementById("main");
var elems = ['input', 'select', 'textarea', 'button'];
    div.disabled = true;
    float.style.display = "block";
    if (div.addEventListener) {
        div.addEventListener('selectstart', doFocus, false);
    } else if (div.attachEvent) {
        div.attachEvent('onselectstart', doFocus);
    }
    for (var i = 0; i < elems.length; i++) {
        var elemList = div.getElementsByTagName(elems[i]);
        for (var j = 0; j < elemList.length; j++)
            elemList[j].disabled = true;
    }
}
function doFocus() {return false}
</script>
<style type='text/css'>
#float {
    width: 200px;
    height: 20px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -10px -100px;
    cursor: pointer;
    border: 2px solid black;
    text-align: center;
    display: none
}
</style>
</head>

<body>
<div id='float' onClick='enableDIV(this)'>Всплывающий DIV<br>Для продолжения кликни грызуном</div>
<div id='main'>
    <form method="POST" action=''>
    The name: <input type="text" value="11111">
    </form>
    <button onClick='disableDIV()'>Показать DIV</button>
</div>
</body>
</html>

S.A.P.

Дата 10.3.2006, 15:39 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 2664
Регистрация: 11.6.2004

Репутация: 8
Всего: 71

Такое у меня сейчас есть. Но мне надо, чтобы модальный диалог возвращал значения в ту функцию, откуда был вызван. Или как - то так...

Ciber SLasH

Дата 11.3.2006, 00:58 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 24
Всего: 67

Тогда вот ещё чё я намудрил, может это сойдёт:

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content='text/html; charset=windows-1251'>
<meta http-equiv="MSThemeCompatible" content='Yes'>
<meta name="Generator" content='EditPlus 2.21.330'>
<meta name="Author" content='Ciber SLasH'>
<title>JavaScript :: Псевдо-криво-модальное окно</title>
<script type='text/javascript'>
function myConfirm() {
this.timer = null;    // таймер опроса состояние диалога
this.work = "";        // имя функции, которая должна быть продолжена выполняться после закрытия диалога
this.id = 0;        // ID-диалога
this.dlg = document.createElement("DIV");
this.dlg.returnValue = false;    // состояние диалога (false — закрыто; true — открыто)
this.dlg.id = "dlg";
var content =
    "<div id='dlg_header'></div>"+
    "<div id='dlg_body'></div>"+
    "<div id='dlg_footer'>"+
        "<button onClick='edChildes(contObj, false); with (parentNode.parentNode) { returnValue = true; style.display = \"none\" }'>Закрыть</button>"+
    "</div>";
document.body.appendChild(this.dlg);
this.dlg.innerHTML = content;
}

/*** Функция опроса состояние диалога ***/
myConfirm.prototype._watch = function () {
    this.timer = setInterval(_unwatch, 300);
    var thisObj = this;
    /** Остановка опроса окна **/
    function _unwatch() {
        if (thisObj.dlg.returnValue) {
            clearInterval(thisObj.timer);
            eval(thisObj.work)();
        }
    }
}

/*** Установка заголовка диалога ***/
myConfirm.prototype.setHeader = function (caption) {
    this.dlg.childNodes[0].innerHTML = caption;
}

/*** Установка внутренностей диалога ***/
myConfirm.prototype.setBody = function (content) {
    this.dlg.childNodes[1].innerHTML = content;
}

/*** Показ диалога ***/
myConfirm.prototype.show = function () {
    edChildes(contObj, true);            // блокируем все элементы
    this.dlg.style.display = "block";    // показываем диалог
    this._watch();                        // устанавливаем слежку за состоянием диалога
}

/*** Enable/disable childes ***/
function edChildes(elem, flag) {
    for (var i = 0; i < elem.childNodes.length; i++) {
        if (elem.childNodes[i].hasChildNodes())
            edChildes(elem.childNodes[i], flag);
        else
            if (typeof(elem.childNodes[i].disabled) != "undefined")
                elem.childNodes[i].disabled = flag;
    }
    if (typeof(elem.disabled) != "undefined")
        elem.disabled = flag;
}
////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////
var funcData = {};    // данные функции
function doWork() {
    if (modalDlg.id == 0) {
        // Действия перед диалогом
        funcData.perem1 = 0;
        modalDlg.id = 1;    // обозначаем, что следущим должен быть диалог №1
    }
    //==[ Диалог №1 ]===========================================================
    if (modalDlg.id == 1) {
        if (modalDlg.dlg.returnValue) {    // если диалог закрыли
            // Операторы после 1-го диалога
            funcData.perem1++;
            alert("Продолжаем !!\nperem1: "+funcData.perem1);
            modalDlg.dlg.returnValue = false;    // сбрасываем флаг закрытия диалога
            modalDlg.id = 2;    // обозначаем, что следущим должен быть диалог №2
        } else {    // иначе ещё не создали
            modalDlg.setHeader("Диалог №1");
            modalDlg.setBody("Это псевдо-модальный диалог...");
            modalDlg.work = "doWork";    // имя функции
            modalDlg.show();
        }
    }
    //==[ Диалог №2 ]===========================================================
    if (modalDlg.id == 2) {
        if (modalDlg.dlg.returnValue) {    // если диалог закрыли
            // Операторы после 2-го диалога
            funcData.perem1++;
            alert("Продолжаем !!\nperem1: "+funcData.perem1);
            modalDlg.dlg.returnValue = false;    // сбрасываем флаг закрытия окна
            modalDlg.id = 0;    // обозначаем, что диалоги закончились
        } else {    // иначе ещё не создали
            modalDlg.setHeader("Диалог №2");
            modalDlg.setBody("Это псевдо-модальный диалог...");
            modalDlg.work = "doWork";    // имя функции
            modalDlg.show();
        }
    }
}

onload = function () {
modalDlg = new myConfirm();
contObj = document.getElementById("content");
    doWork();
}
</script>
<style type='text/css'>
#dlg {
    width: 200px;
    height: auto;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -10px -100px;
    border: 4px groove black;
    text-align: center;
    display: none;
    z-index: 1000;
    background: white;
}
#dlg_header {
    font: bold 1em Arial, Helvetica, Verdana, sans-serif;
    border-bottom: 2px solid black;
    color: white;
    background: red;
}
</style>
</head>

<body>
<div id='content'>
<form method="POST" action='http://somesite.com/prog/adduser' enctype="multipart/form-data">
Имя: <input type="text" name="firstName"><br>
Фамилие: <input type="text" name="lastName"><br>
e-mail: <input type="text" name="e-mail"><br>
<input type="radio" name="sex" value="Male"> Male<br>
<input type="radio" name="sex" value="Female"> Female<br>
<input type="submit" value="Send"><input type="reset"><br>
<button type="submit" name="submit"><img alt="wow"></button>
<button type="reset" name="reset"><img alt="oops"></button><br>
Отослать файл: <input type="file" name="FileName">
</form>
<hr>

<form method="POST" action='http://somesite.com/prog/component-select'>
    <select multiple size="4" name="selName">
    <option selected value="opt[]">Component - 1</option>
    <option selected value="opt[]">Component - 2</option>
    <option selected value="opt[]">Component - 3</option>
    <option selected value="opt[]">Component - 4</option>
    <option selected value="opt[]">Component - 5</option>
    <option selected value="opt[]">Component - 6</option>
    <option selected value="opt[]">Component - 7</option>
    </select><br>
<input type="submit" value="Send"><input type="reset">
</form>
<hr>

<form method="POST" action='http://somesite.com/prog/someprog'>
    <select name="OS">
    <option selected label="none" value="none">Выбери OS</option>
    <optgroup label="Windows">
        <option value="Win95">Windows 95</option>
        <option value="Win98">Windows 98</option>
        <option value="WinXP">Windows XP</option>
    </optgroup>
    <optgroup label="UNIX">
        <option value="LinuxMDK">Linux Mandrake</option>
        <option value="FreeBSD">FreeBSD</option>
    </optgroup>
    <optgroup label="Others">
        <option value="MacOS">MacOS</option>
        <option value="QNX">QNX</option>
    </optgroup>
    </select>
</form>
<hr>

<form method="POST" action='http://somesite.com/prog/text-read'>
<textarea name="thetext" rows="5" cols="80">
Первая строка начального текста.
Вторая строка начального текста.
</textarea><br>
<input type="submit" value="Send"><input type="reset">
</form>
<hr>

<form action='' method="POST">
<fieldset>
    <legend>Персональная информация</legend>
    Фамилия: <input type="text" name="lname" tabindex="1">
    Имя: <input type="text" name="fname" tabindex="2">
    Адрес: <input type="text" name="address" tabindex="3">
</fieldset>
<fieldset>
    <legend>История болезни</legend>
    <input type="checkbox" name="his[]" value="Smallpox" tabindex="20"> Оспа
    <input type="checkbox" name="his[]" value="Mumps" tabindex="21"> Свинка
    <input type="checkbox" name="his[]" value="Dizziness" tabindex="22"> Головокружение
    <input type="checkbox" name="his[]" value="Sneezing" tabindex="23"> Кашель
</fieldset>
<fieldset>
    <legend>Текущее лечение</legend>
    Лечитесь ли Вы сейчас?<br>
    <input type="radio" name="medi" value="Yes" tabindex="35">Да
    <input type="radio" name="medi" value="No" tabindex="35">Нет<br>
    Если Вы лечитесь, укажите ниже, как:<br>
    <textarea name="cur_medi" rows="5" cols="50" tabindex="40"></textarea>
</fieldset>
</form>
</div>
</body>
</html>

Добавлено @ 01:01
Только с таким подходом прийдётся все переменные функции хранить в объекте funcData. Просто, если нужна новая переменная в функциях где будет юзаться псевдо-диалог, нужно их оформлять в виде полей объекта funcData.

S.A.P.

Дата 17.3.2006, 00:40 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 2664
Регистрация: 11.6.2004

Репутация: 8
Всего: 71

Ciber SLasH, спасибо, пример интересный, но слишком крут для простого диалога. Впрочем пока разбирался с кодом пришла идея реализовать все следующим образом

Код


U_confirm
(
   "вы уверены?",
   function (ok)
   {
       if (ok) // пользователь нажал ОК
       else // пользователь нажал Отмена

       // продолжаем в любом случае
   }
)

т.е. передается в функцию обработчик и вызов функции идет как логический блок.
U_confirm не останавливается и не возращает значения, но этого оказалось достаточно.

Кинул бы весь код для потомков, но к сожалению не могу, а то уволят smile

...

+ за старания в разделе JavaScript/

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »