• DONATE to NULLED!
    Форуму и его команде можно помочь, мотивировать модераторов разделов.     Помогите модератору этого раздела killoff лично.

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

R

Revenant425

Мастер
Регистрация
16 Авг 2008
Сообщения
200
Реакции
31
Требуется что-то подобное, картинка для наглядности. Вроде как без яваскрипта не обойдется.
h_1343691120_6120770_514f44b6f7.jpeg
 
В dle по умолчанию есть Jquery UI
1) Обновление Jquery UI
содержимое файла /engine/classes/js/jqueryui.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>
Более подробно + куча стилей оформления вкладок на
Для просмотра ссылки Войди или Зарегистрируйся
 
Doctor_zlo написал(а):
В dle по умолчанию есть Jquery UI
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; }
Нажмите для раскрытия...
что-то не взлетело, вывелись как простые ul, видимо в css проблема?
h_1343768620_9821782_122f3327ea.jpeg

поидее если див как 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 :) который ещё и сжать можно :)
 
Все это писалось без проверки на живом сайте, просто примерное направление в котором двигаться. По поводу jqueryui то на сайте закачки можно скачать как сжатую так и урезанную версию. Интерфейс позволяет повыкидывать все ненужное автоматом, и тогда файл вообще маленький получиться
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху