[Статья]

Модификации яваскриптов.

Кто хоть раз основательно копался в vb, прекрасно знают, что в vb есть некоторые весчи наглухо зашитые в js-ах. Постараюсь [по возможности] в этом топике постить подсказки по редактированию всяких подобных рюшек, с которыми сам сталкивался.


Мод #1 Модификация кнопки мультицитирования

Избавляемся от графики [делаем кнопку мультицитаты версткой].

Редактируем код в шаблоне postbit/postbit_legacy

PHP Code:

<if condition="$show['multiquote_post']"><a href="$post[replylink]" onclick="return false"><em class="button multiquote_<if condition="$show['multiquote_selected']">on<else />off</if>" id="mq_$post[postid]">$vbphrase[multi_quote_this_message]</em></a></if> 


Редактируем код в multi_quote.js

PHP Code:

найти: img
заменить на: em

найти: A.src=A.src.replace(/\/multiquote_off\.([a-zA-Z0-9]+)$/,"/multiquote_on.$1")
заменить на: A.className=A.className.replace("multiquote_off$","multiquote_on");A.className="button multiquote_on"

найти: A.src=A.src.replace(/\/multiquote_on\.([a-zA-Z0-9]+)$/,"/multiquote_off.$1")
заменить на: A.className=A.className.replace("multiquote_on$","multiquote_off");A.className="button multiquote_off" 


css для цветовой подсветки активной/пассивной кнопки мультицитаты:

PHP Code:

/* ********** JsButtons ********** */
.multiquote_on{background:red;}
.multiquote_off{background:blue;} 


Мод #2 Модификация значков свернут/развернуть

Избавляемся от графики [делаем коллапсоы версткой].

Примечание! Количество коллапсов достаточно большое, рекомендуется пакетный поиск с регулярками [Dreamweaver, etc.]

Ищем по всем шаблонам и по всему коду [хаков в т.ч.] такой или похожий код:

PHP Code:

<a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('forumbit_$forumid')"><img id="collapseimg_forumbit_$forumid" src="$stylevar[imgdir_button]/collapse_tcat{$collapseimg_forumid}.gif" alt="" border="0" /></a> 


заменяем на:

PHP Code:

<a href="#top" id="collapseimg_forumbit_$forumid" class="collapse{$collapseimg_forumid}" onclick="return toggle_collapse('forumbit_$forumid')"><if condition="$collapseimg_forumid">+<else />&minus;</if></a> 


Модифицируем функцию toggle_collapse в файле global.js:

PHP Code:

найти:
            img_re = new RegExp("_collapsed\\.gif$");
            A.src = A.src.replace(img_re, ".gif")
заменить:
            img_re = new RegExp("_collapsed$");
            A.className = A.className.replace(img_re, "");
            A.innerHTML = "−"

найти:
            cel_re = new RegExp("^(thead|tcat)(_collapsed)$");
            C.className = C.className.replace(cel_re, "$1")
заменить:
            cel_re = new RegExp("^(thead|tcat)(_collapsed)$");
            C.className = C.className.replace(cel_re, "$1");
            C.innerHTML = "−"

найти:
            img_re = new RegExp("\\.gif$");
            A.src = A.src.replace(img_re, "_collapsed.gif")
заменить:
            img_re = new RegExp("collapse$");
            A.className = A.className.replace(img_re, "collapse_collapsed");
            A.innerHTML = "+"

найти:
            cel_re = new RegExp("^(thead|tcat)$");
            C.className = C.className.replace(cel_re, "$1_collapsed")
заменить:
            cel_re = new RegExp("^(thead|tcat)$");
            C.className = C.className.replace(cel_re, "$1_collapsed");
            C.innerHTML = "+" 


css для коллапс-кнопочек:

PHP Code:

/* ********** Collapse ********** */
.collapse, .collapse_collapsed{background:blue; color:#fff; padding:0 4px; float:right; height:12px; line-height:12px;} 


Мод #3 Модификация стрелочек всплывающих менюх

Стрелочки всплывающих менюшек [избавляемся от графики, делаем стрелочки версткой].

Редактируем немного функций в menu.js

PHP Code:

найти:
    this.menus[D].imgsrc = IMGDIR_MISC + "/menu_open_usercss.gif"
заменить:
    this.menus[D].imgsrc = "arrowbottom"

найти:
    this.imgsrc = IMGDIR_MISC + "/menu_open.gif"
заменить:
    this.imgsrc = "arrowbottom"

найти:
    var B = document.createElement("img");
заменить:
    var B = document.createElement("em");

найти:
    B.src = this.imgsrc;
заменить:
    B.className = this.imgsrc;

удалить:
    B.border = 0;
    B.title = "";
    B.alt = ""; 


Добавить в css:

PHP Code:

.arrowbottom{border-style:solid; border-color:red transparent transparent transparent; border-width:3px; margin:0 0 0 4px; vertical-align:sub;} 


Мод #4 Модификация Мод #2 для анимирования коллапсов

Примечание! Это т.с. модификация модификации коллапсов из Мод #2.

PHP Code:

найти и заменить функцию: toggle_collapse

на: function toggle_collapse(B, E) {
    if (!is_regexp) {
        return false
    }
    var D = fetch_object("collapseobj_" + B);
    var A = fetch_object("collapseimg_" + B);
    var F = function() {
        D.className = "disnone"
    };
    var G = function() {
        D.className = "disvisible"
    };
    if (!D) {
        if (A) {
            A.className = "disnone"
        }
        return false
    }
    if (D.className == "disnone" || "open" == E) {
        D.className = "oh";
        var H = D.scrollHeight;
        var attributes = {
            height: {
                from: 0,
                to: H
            }
        };
        var anim = new YAHOO.util.Anim(D, attributes, 0.2, YAHOO.util.Easing.easeOut);
        anim.onComplete.subscribe(G);
        anim.animate();
        if (!E) {
            save_collapsed(B, false)
        }
        if (A) {
            img_re = new RegExp("_collapsed$");
            A.className = A.className.replace(img_re, "");
            A.innerHTML = "−"
        }
    } else {
        if (D.className != "disnone" || "closed" == E) {
            D.className = "oh";
            var attributes = {
                height: {
                    to: 0
                }
            };
            var anim = new YAHOO.util.Anim(D, attributes, 0.2, YAHOO.util.Easing.easeIn);
            anim.onComplete.subscribe(F);
            anim.animate();
            if (!E) {
                save_collapsed(B, true)
            }
            if (A) {
                img_re = new RegExp("collapse$");
                A.className = A.className.replace(img_re, "collapse_collapsed");
                A.innerHTML = "+"
            }
        }
    }
    return false
} 


PHP Code:

Добавить в css:
.disvisible{}
.oh{overflow:hidden}
.disnone{display:none}
.collapse, .collapse_collapsed{background:#4d7196; color:#fff; border-radius:2px; padding:0 6px; float:right; height:12px; line-height:12px} 


---

Пост обновлен +Модификация коллапсов. +скрины.

syn добавил 18.07.2011 в 20:18
Дополнение к моду коллапсов: Мод #2
Функцию toggle_collapse можно дополнительно облегчить, убрав из нее collapsecel

После такого облегчения, желательно проверить шаблоны хаков на наличие collapsecel и заменить на стандартный collapseimg. Это все при условии, если вы НЕ планируете использовать какие-нибудь особые стили, для некоторых из кнопочек.

PHP Code:

найти -> удалить:
            var C = fetch_object("collapsecel_" + B);
найти -> удалить:
            cel_re = new RegExp("^(thead|tcat)(_collapsed)$");
            C.className = C.className.replace(cel_re, "$1")
найти -> удалить:
            cel_re = new RegExp("^(thead|tcat)$");
            C.className = C.className.replace(cel_re, "$1_collapsed") 


Дополнительно удалить из:

PHP Code:

global.php -> $vbcollapse["collapsecel_$key"] = '_collapsed';
showthread.php -> $vbcollapse["collapsecel_quickreply"] 


Пост обновлен +Модификация стрелочек всплывающих менюшек. +скрин.

Первый пост обновлен +Анимирование коллапсов [collapse]. Мод #4.

syn добавил 15.01.2012 в 03:25
Небольшая оптимизация для коллапсов: Мод #2 :: Мод #4

PHP Code:

найти удалить:
    img_re = new RegExp("_collapsed$");
    A.className = A.className.replace(img_re, "");

найти удалить:
    img_re = new RegExp("collapse$");
    A.className = A.className.replace(img_re, "collapse_collapsed"); 


PHP Code:

добавить либо модифицировать [если уже есть]:
.collapse{background:#4d7196; color:#fff; border-radius:2px; padding:0 6px; float:right; height:12px; line-height:12px;}