Хак комментарии вконтакте, facebook в вкладках.

Тема в разделе "DLE", создана пользователем Revenant425, 31 июл 2012.

Информация :
Актуальная версия DataLife Engine 11.2
( Final Release v.11.2 | Скачать DataLife Engine | Скачать 11.2 demo )
Нужно ли обновляться | Как обновиться | Изменения в шаблонах
> Нет русских символов <
[Приватная тема DLE (Все подробности в ЛС к модератору раздела)]

Версии 10.0 и ниже - уязвимы!

Локализации | F.A.Q. | Внешний вид
Правила раздела | Правила форума
Обсуждение хайда карается баном!
В каждом сообщении указывайте версию DLE, которого они касаются!
Модераторы: killoff
  1. Revenant425

    Revenant425

    Регистр.:
    16 авг 2008
    Сообщения:
    200
    Симпатии:
    31
    Требуется что-то подобное, картинка для наглядности. Вроде как без яваскрипта не обойдется.
    [​IMG]
     
  2. Doctor_zlo

    Doctor_zlo

    Moderator
    Регистр.:
    25 апр 2008
    Сообщения:
    461
    Симпатии:
    980
    В dle по умолчанию есть Jquery UI
    1) Обновление Jquery UI
    содержимое файла /engine/classes/js/jqueryui.js заменить на это -
    http://code.jquery.com/ui/1.8.22/jquery-ui.min.js
    2) добавить в ваш файл css-
    HTML:
    
    .ui-tabs { position: relative; padding: .2em; zoom: 1; } /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
    .ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0; }
    .ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 1px; margin: 0 .2em 1px 0; border-bottom: 0 !important; padding: 0; white-space: nowrap; }
    .ui-tabs .ui-tabs-nav li a { float: left; padding: .5em 1em; text-decoration: none; }
    .ui-tabs .ui-tabs-nav li.ui-tabs-selected { margin-bottom: 0; padding-bottom: 1px; }
    .ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; }
    .ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
    .ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background: none; }
    .ui-tabs .ui-tabs-hide { display: none !important; }
    
    3) содержимое шаблон/addcomments.tpl заменить примерно на такое -
    HTML:
            <div id="tabs">
                <ul>
                    <li><a href="#tabs-1">Комментарии</a></li>
                    <li><a href="#tabs-2">Комментарии вконтакте</a></li>
                </ul>
                <div id="tabs-1">
    <div id="addcform" class="baseform" style="display:block;">
            <table class="tableform">
                [not-logged]
                <tr>
                    <td class="label">
                        Имя:<span class="impot">*</span>
                    </td>
                    <td><input type="text" name="name" id="name" class="f_input" /></td>
                </tr>
                <tr>
                    <td class="label">
                        E-Mail:
                    </td>
                    <td><input type="text" name="mail" id="mail" class="f_input" /></td>
                </tr>
                [/not-logged]
                <tr>
                    <td class="label">
                        Комментарий:
                    </td>
                    <td class="editorcomm">{editor}</td>
                </tr>
                [question]
                <tr>
                    <td class="label">
                        Вопрос:
                    </td>
                    <td>
                        <div>{question}</div>
                    </td>
                </tr>
                <tr>
                    <td class="label">
                        Ответ:<span class="impot">*</span>
                    </td>
                    <td>
                        <div><input type="text" name="question_answer" id="question_answer" class="f_input" /></div>
                    </td>
                </tr>
                [/question]
                [sec_code]
                <tr>
                    <td class="label">
                        Введите код: <span class="impot">*</span>
                    </td>
                    <td>
                        <div>{sec_code}</div>
                        <div><input type="text" name="sec_code" id="sec_code" style="width:115px" class="f_input" /></div>
                    </td>
                </tr>
                [/sec_code]
                [recaptcha]
                <tr>
                    <td class="label">
                        Введите два слова, показанных на изображении: <span class="impot">*</span>
                    </td>
                    <td>
                        <div>{recaptcha}</div>
                    </td>
                </tr>
                [/recaptcha]
            </table>
            <div class="fieldsubmit">
                <button type="submit" name="submit" class="fbutton"><span>[not-aviable=comments]Добавить[/not-aviable][aviable=comments]Изменить[/aviable]</span></button>
            </div>
    </div>
    </div>
    <div id="tabs-2">
    Код от комментов вконтакте
    </div>
           
            </div>
    
    Более подробно + куча стилей оформления вкладок на
    http://jqueryui.com/demos/tabs/
     
    Revenant425 нравится это.
  3. Revenant425

    Revenant425

    Регистр.:
    16 авг 2008
    Сообщения:
    200
    Симпатии:
    31
    что-то не взлетело, вывелись как простые ul, видимо в css проблема?
    [​IMG]
    поидее если див как id представлен то в стилях #ui-tabs или как?просто плохо разбираюсь в верстке.проверил файл стилей, то что Вы написали вставить там присутсвует. И сразу хотел спросить, а как бы вырезать из jqueryui все не нужное?уж больно он толстый - 200кб, стандартный 65кб при том что он не сжатый.почитал инфу по ссылке, видимо сам яваскрипт надо ещё как-то по хитрому включить, тыкнул как по ссылке
    Код:
    <script>
     
        $(function() {
     
            $( "#tabs" ).tabs();
     
        });
     
        </script>
     
    
    табы появились но горизонтальные =).и они не прячут контент и не переключают.


    вобщем покопал и немного по другому сделал
    1)вскрыл engine\modules\functions.php
    Код:
        найти
    $default_array = array (
                'engine/classes/js/jquery.js',
                'engine/classes/js/jqueryui.js',
                'engine/classes/js/dle_js.js',
         
            );
    заменить на
            $default_array = array (
                'engine/classes/js/jquery.js',
                'engine/classes/js/jqueryui.js',
                'engine/classes/js/dle_js.js',
                'engine/classes/js/tabs.js',
            );
    2) в стили добавить
    Код:
    .box {
      display: none; /* по умолчанию прячем все блоки */
    }
    .box.visible {
      display: block; /* по умолчанию показываем нужный блок */
    }
    .section {
        width: 600px;
        background: #EFEFEF;
        margin: 0 0 30px;
    }
    ul.tabs {
        height: 28px;
        line-height: 25px;
        list-style: none;
        border-bottom: 1px solid #DDD;
        background: #FFF;
    }
    .tabs li {
        float: left;
        display: inline;
        margin: 0 1px -1px 0;
        padding: 0 13px 1px;
        color: #777;
        cursor: pointer;
        background: #F9F9F9;
        border: 1px solid #E4E4E4;
        border-bottom: 1px solid #F9F9F9;
        position: relative;
    }
    .tabs li:hover,
    .vertical .tabs li:hover {
        color: #F70;
        padding: 0 13px;
        background: #FFFFDF;
        border: 1px solid #FFCA95;
    }
    .tabs li.current {
        color: #444;
        background: #EFEFEF;
        padding: 0 13px 2px;
        border: 1px solid #D4D4D4;
        border-bottom: 1px solid #EFEFEF;
    }
    .box {
        display: none;
        border: 1px solid #D4D4D4;
      border-width: 0 1px 1px;
        background: #EFEFEF;
        padding: 0 12px;
    }
    .box.visible {
        display: block;
    }
    3)создать файл tabs.js и залить в engine\clases\js
    Код:
    (function($) {
    $(function() {
     
        $('ul.tabs').delegate('li:not(.current)', 'click', function() {
            $(this).addClass('current').siblings().removeClass('current')
                .parents('div.section').find('div.box').hide().eq($(this).index()).fadeIn(150);
        })
     
    })
    })(jQuery)
    4) В addcoments.tpl повставлять код который был в файле ранее и во второй блок то что нам надо.
    Код:
    <div class="section">
      <ul class="tabs">
        <li class="current">Комментарии</li>
        <li>Комментарии Вконтакте</li>
      </ul>
      <div class="box visible">
        Содержимое первого блока
      </div>
      <div class="box">
        Содержимое второго блока
      </div>
    </div><!-- .section -->
    вроде все. и да работает со старым маленьким jqueryui :) который ещё и сжать можно :)
     
  4. Doctor_zlo

    Doctor_zlo

    Moderator
    Регистр.:
    25 апр 2008
    Сообщения:
    461
    Симпатии:
    980
    Все это писалось без проверки на живом сайте, просто примерное направление в котором двигаться. По поводу jqueryui то на сайте закачки можно скачать как сжатую так и урезанную версию. Интерфейс позволяет повыкидывать все ненужное автоматом, и тогда файл вообще маленький получиться