Re[3]: Компоненты, расширяющие функциональность HTML кода :)
От: Alexey Shirshov Россия http://wise-orm.com
Дата: 23.12.03 08:11
Оценка:
Здравствуйте, ЖуК, Вы писали:

хъ

ЖуК>З.Ы. Для меня — это выход, потому что это увеличит мою производительность, как программиста, в N раз


Тогда производительность ASP.NET девелоперов тебе даже не сниться, так как там все скрипты уже написаны, а описанный тобой подход используется на 200%.

Например,
<span id="RequiredFieldValidator1" controltovalidate="TextBox1" errormessage="RequiredFieldValidator" evaluationfunction="RequiredFieldValidatorEvaluateIsValid" initialvalue="" style="color:Red;visibility:hidden;">RequiredFieldValidator</span>

<span id="RegularExpressionValidator1" controltovalidate="TextBox1" errormessage="RegularExpressionValidator" evaluationfunction="RegularExpressionValidatorEvaluateIsValid" validationexpression="\d\d\d\.\d" style="color:Red;visibility:hidden;">RegularExpressionValidator</span>


Все скрипты содержатся в стандартном файле webuivalidation.js.

[]

ЖуК>Если ты меня решил удивлять интерфейсами, основанными на "полёте программерской мысли", то думаю, что тебе сюда.


Тормозит что-то безбожно.
... << RSDN@Home 1.1.0 stable >>
Re[6]: Компоненты, расширяющие функциональность HTML кода :)
От: Zerger Россия  
Дата: 23.12.03 11:31
Оценка: 78 (3)
Здравствуйте, Sinclair, Вы писали:

S>Здравствуйте, anonymous, Вы писали:

A>>behaviours ведь только в IE...
S>Ничего, не расстраивайся — попытки сделать DHTML кроссбраузер-совместимым вполне доведут тебя до седых волос, половина браузеров все равно будет игнорировать самые вкусные вещи, и при этом ты обнаружишь, что дополнительная, по сравнению с IE, совместимость увеличила твою аудиторию ажно процента на полтора...

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

Файл main.js (Организует вызов функций по window.onload):

String.prototype.trim = function() { return this.replace(/(^\s+|\s+$)/g, ""); }

var arrOnLoadFunk = [];

window.onload = function() {
    for ( var i = 0; i < arrOnLoadFunk.length; i++ ) arrOnLoadFunk[i]();
}

function addOnLoadFunk( fnk ){
    arrOnLoadFunk[ arrOnLoadFunk.length ] = fnk;
}


Сам файл проверки форм check.js:


// добавляем hendlerFormInit в список функций вызываемых по onload
addOnLoadFunk( hendlerFormInit );

// вешаем обработчики события onsubmit для форм 
function hendlerFormInit() {
    for ( var i = 0; i < document.forms.length; i++ ) {
        document.forms[i].onsubmit = hendlerForm;
    }
}

// обработчик события onsubmit для формы
function hendlerForm( ev ){
    var frm = this; // вызывающая форма
    for( var i = 0; i < frm.elements.length; i++ ) {
        var element = this.elements[i];
        var hendler = window[ 'feHendler_' + element.getAttribute('logicalType') ];
        if( hendler + '' != 'undefined' ){
            if( hendler( element ) ) return false;
        }
    }
    return true;
}

// функция вывода сообщения об ошибке
function showError( e, message ){
    alert( message );
    e.focus();
    return true;
}

// Обработчик для logicalType = mail
function feHendler_mail( e ) {
    var val = e.value.trim();
    if( val.length > 0 || e.getAttribute('required') == 'yes' ){
        var reg_exp = /^[a-z][\w\.]*@[\w\.]+\.[a-z]{2,4}/i;
        if( !reg_exp.test( e.value)) {
            return showError( e, 'Введен некорректный e-mail адрес!' )
        }
    }
    e.value = val;
    return false;
}

// Обработчик для logicalType = textfield
function feHendler_textfield( e ) {
    var val = e.value.trim();
    var len = val.length;
    var viewName = '"' + e.getAttribute('viewName') + '"';

    if( e.getAttribute('required') == 'yes' && len == 0 ) 
      return showError( e, 'Не заполнено поле ' + viewName + '!' );
    
    if( len != 0 ) {

        var minlength = parseInt( e.getAttribute('minlen'), 10);
        if( isNaN( minlength ) ) minlength = 0;
        if( len < minlength ) 
          return showError( e, 'Слишком короткое значение поля ' + viewName + '!\nМинимальное количество символов - ' + minlength + '.');
        
        var maxlength = parseInt( e.getAttribute('maxlen'), 10);
        if( isNaN( maxlength ) ) minlength = 9999999;
        if( len > maxlength ) 
          return showError( e, 'Слишком большое значение поля ' + viewName + '!\nМаксимальное количество символов - ' + maxlength + '.');
        
    }

    e.value = val;
    return false;
}


Ну и тестовая форма forms.html:

<head>
    <meta http-equiv='Content-Type' content='text/html; charset=windows-1251'>
</head>

<script src=main.js></script>
<script src=check.js></script>

<body>

<form name=frm1>
    Е-mail:<br>
    <input name=EMail type=text logicalType=mail required=no><br>
    Е-mail 2:<sup>*</sup><br>
    <input name=EMail2 type=text logicalType=mail required=yes><br>
    Ваш адрес:<sup>*</sup><br>
    <textarea name=TextAr logicalType=textfield minlen=3 maxlen=10 required=yes viewName="Ваш адрес" wrap=soft></textarea><br>
    <input type=submit value=send>
</form>

<hr>

<form name=frm2>
    Е-mail:<sup>*</sup><br>
    <input name=EMail type=text logicalType=mail required=yes><br>
    Ваш адрес:<br>
    <textarea name=TextAr logicalType=textfield minlen=3 maxlen=10 required=no viewName="Ваш адрес" wrap=soft></textarea><br>
    <input type=submit value=send>
</form>

</body>


Для реализации нового типа logicalType, например MyType, необходимо просто написать функцию feHendler_MyType( e ) возращающую в случае ошибки true, иначе — false

Данный код отработал без проблем в следующих браузерах:

IE 5.0, 6.0.
Netscape 6, 7
Мозила
Opera 6,7





(c) String.prototype.trim — ЖуК
Автор: ЖуК
Дата: 16.08.03


По поводу проверки на наличии метода у объекта вроде этого:
var hendler = window[ 'feHendler_' + element.getAttribute('logicalType') ];
if( hendler + '' != 'undefined' ){ ... }


смотри здесь
Автор: Zerger
Дата: 23.10.03
Re[4]: Компоненты, расширяющие функциональность HTML кода :)
От: ЖуК Украина http://smart-ip.net/
Дата: 23.12.03 11:49
Оценка:
Здравствуйте, Sinclair, Вы писали:

S>Здравствуйте, ЖуК, Вы писали:


S>А насчет behaviours ты не смотрел? В принципе, ничего особо нового там нет. Просто привязка событий и обработчиков там выполнена декларативно (а не императивно, как у тебя). А в остальном — все ровно то же самое. Custom attributes — и вперед с пестней.

S>Вообще все так делают. У нас вот например ездит textarea с атрибутом maxlength.

behaviours слишком уж специфичны тем, что работают только в ИЕ. А мне очень часто приходится писать именно под Мозилу. Чаще всего задачи — это локальные приложения, основанные на веб. И, как правило, заказчик говорит — мне надо так: "Винду нах, линукс грузим по сети на места операторов, из программ у них — Мозила в автозагрузке на весь экран. И все — бабла за ОС не плачу. Люди заняты только работой. Обращаться с компом просто — кнопочкой павер он/офф. Все!". И он прав — это дешевле.
Но и для ИЕ писать приходится. Так что получается мне каждый раз нужно использовать разные подходы — для ИЕ — behaviours, для Mozilla — XBL... А так я, основываясь на одном подходе, могу обеспечить кроссбраузерность чуть ли не одной проверкой (очень часто в простейших задачах сам код одинаковый, а почему как минимум одной — читай ниже).

С другой стороны, если уж очень большие различия в коде для какой- то задачи — их можно просто разделить по браузерам, грузить ОДНУ, но УМНУЮ либу, которая сама подключит необходимую, например, через

document.write( '<' + 'Script...


для нужного браузера...

И третье — речь идет, в первую очередь, об избавлении от рутины для простейших, но часто встречающихся задач задач...

S>З.Ы. Ты обратил внимание, что твой код непригоден при наличии в форме более одного класса объекта, требующего pre-submit обработки? Так что надо их chain-ить (как, впрочем, и onload для окна).


Конечно обратил.. я ведь говорил, что это пример, причем решающий ОДНУ ЗАДАЧУ Да, валидней было бы использовать для ИЕ — attachEvent, для Мозилы — addEventListener... и ве будет ОК. Вообщем, я ни в чем никого не пытаюсь убедить... как делать — дело лично каждого
_____________________________________________________________
"Голова — кость, поэтому болеть не может..." © Неизвестный автор
Re[6]: Компоненты, расширяющие функциональность HTML кода :)
От: anonymous Россия http://denis.ibaev.name/
Дата: 23.12.03 13:58
Оценка:
Здравствуйте, Andir, Вы писали:

A>Ну в мозилле тоже есть подобная функциональность ... XBL зовётся.


слышал про такое... но не пробовал еще... интересно, что в конечном итоге перерастет в стандарт HTC из MSIE или XBL из Gecko?...
Re[7]: Компоненты, расширяющие функциональность HTML кода :)
От: uzzy Россия  
Дата: 23.12.03 13:59
Оценка:
Здравствуйте, Zerger, Вы писали:

[...]

Справедливости ради хочу отметить этот пост
Автор: Andir
Дата: 13.03.03
Андрея Русяева.
RSDN@Home 7.7.0 stable
Re[6]: Компоненты, расширяющие функциональность HTML кода :)
От: anonymous Россия http://denis.ibaev.name/
Дата: 23.12.03 14:04
Оценка:
Здравствуйте, Sinclair, Вы писали:

S>Здравствуйте, anonymous, Вы писали:

A>>behaviours ведь только в IE...
S>Ничего, не расстраивайся — попытки сделать DHTML кроссбраузер-совместимым вполне доведут тебя до седых волос, половина браузеров все равно будет игнорировать самые вкусные вещи, и при этом ты обнаружишь, что дополнительная, по сравнению с IE, совместимость увеличила твою аудиторию ажно процента на полтора...

я это несколько иначе использую... )
например, в MSIE криво реализована обработка CSS... в частности не работает должным образом псевдо-класс :hover... так вот для нормальных (в отношении CSS) браузеров стили описываются как положено в :hover, а для MSIE пишется .htc-файл обрабатывающий onMouseOver/onMouseOut и путь к нему указывается в атрибуте behavior...
Re[8]: Компоненты, расширяющие функциональность HTML кода :)
От: Andir Россия
Дата: 23.12.03 23:50
Оценка:
Здравствуйте, uzzy, Вы писали:

U>Справедливости ради хочу отметить этот пост
Автор: Andir
Дата: 13.03.03
Андрея Русяева.


Это старая идея ... и мало того она имеет реализацию
Автор: Andir
Дата: 27.09.03
, было дело я её даже использовал в проектах ...

С Уважением, Andir!
<-- using(RSDN@Home 1.1.2 beta 2) {/* Работаем */} -->
Подождите ...
Wait...
Пока на собственное сообщение не было ответов, его можно удалить.