Next Generation CMS :: Форум поддержки

Заинтересовала наша система? Тогда этот форум для Вас!

rss

Вы не зашли.

Объявление

#1 2012-01-31 05:23:54

zenn
Пользователь
Зарегистрирован: 2009-04-25
Сообщений: 48
Рейтинг :   
Профиль

TABS - комментарии сайта/vkontakte/etc

Собственно нужен был хук самому, делать впринципе как 2 пальца, возможно кому-либо понадобится.
Суть - добиться в форме комментариев переключение по jqueryui таб-ам с разными си-ми комментариев(к примеру, виджет вконтакта, фейсбука и прочих).
Так как в цмс уже имеется jquery то нам остается лишь добавить стиль jqueryui-custom (взять можно вот тут).
Добавляем в main.tpl ссылку на стиль (его перед этим грузим в шаблон ваш, куда удобно):

Код:

<script type="text/javascript" src="{tpl_url}/js/jquery-ui-1.8.16.custom.min.js"></script>
<link media="screen" href="{tpl_url}/style/jquery-ui-1.8.16.custom.css" type="text/css" rel="stylesheet" />

Так же в хедер добавляем:

Код:

        <script type="text/javascript">
            $(function(){

                // Accordion
                $("#accordion").accordion({ header: "h3" });
    
                // Tabs
                $('#tabs').tabs();
    

                // Dialog            
                $('#dialog').dialog({
                    autoOpen: false,
                    width: 600,
                    buttons: {
                        "Ok": function() { 
                            $(this).dialog("close"); 
                        }, 
                        "Cancel": function() { 
                            $(this).dialog("close"); 
                        } 
                    }
                });
                
                // Dialog Link
                $('#dialog_link').click(function(){
                    $('#dialog').dialog('open');
                    return false;
                });

                // Datepicker
                $('#datepicker').datepicker({
                    inline: true
                });
                
                // Slider
                $('#slider').slider({
                    range: true,
                    values: [17, 67]
                });
                
                // Progressbar
                $("#progressbar").progressbar({
                    value: 20 
                });
                
                //hover states on the static widgets
                $('#dialog_link, ul#icons li').hover(
                    function() { $(this).addClass('ui-state-hover'); }, 
                    function() { $(this).removeClass('ui-state-hover'); }
                );
                
            });
        </script>

Теперь идем в news.full.tpl и заворачиваем [isplugin comments]{plugin_comments}[/isplugin] вот таким образом:

Код:

        <div id="tabs">
            <ul>
                <li><a href="#tabs-1">Комментарии</a></li>
                <li><a href="#tabs-2">Вконтакте</a></li>
                <li><a href="#tabs-3">Facebook</a></li>
            </ul>
            <div id="tabs-1">[isplugin comments]{plugin_comments}[/isplugin]</div>
            <div id="tabs-2"><div id="vk_comments"></div>
<script type="text/javascript">
eval(unescape("VK.Widgets.Comments%28%22vk_comments%22%2C%20%7Blimit%3A%2025%2C%20width%3A%20%22400%22%2C%20attach%3A%20%22*%22%7D%29%3B"));
</script></div>
            <div id="tabs-3">
               <div id="cm_fb">
<div class="cmm_heading">
    <a name="c" />Facebook комментарии (<fb:comments-count href=http://ваш_домен/></fb:comments-count>)</a>
</div>
<div id="fb-root"></div><script src="http://connect.facebook.net/ru_RU/all.js#xfbml=1"></script><fb:comments href="http://ваш_домен" num_posts="10" width="400"></fb:comments>
</div>
            </div>
        </div>

Ах да, в хедер мейна не забываем api подключить:

Код:

<script type="text/javascript" src="http://userapi.com/js/api/openapi.js?34"></script>
<script type="text/javascript">
  VK.init({apiId: ваш_id, onlyWidgets: true});
</script>
<meta property="fb:admins" content="{00000000000000}"/>
<meta property="fb:app_id" content="00000000000000"/>

Profit.
Получаем что-то вроде этого(см. атачи)

Неактивен

 

#2 2012-01-31 08:14:17

Wolverine
Модератор
Откуда: Домодедово
Зарегистрирован: 2008-10-13
Сообщений: 3538
Рейтинг :   160 
Профиль  Вебсайт

Re: TABS - комментарии сайта/vkontakte/etc

По моему ты в header много мусора вставил, достаточно одного $( "#tabs" ).tabs(); , нет?

Неактивен

 

#3 2012-01-31 11:33:27

zenn
Пользователь
Зарегистрирован: 2009-04-25
Сообщений: 48
Рейтинг :   
Профиль

Re: TABS - комментарии сайта/vkontakte/etc

Wolverine написал:

По моему ты в header много мусора вставил, достаточно одного $( "#tabs" ).tabs(); , нет?

Тогда уж:

Код:

 <script type="text/javascript">
            $(function(){
               $('#tabs').tabs();
            }
 </script>

я использую не только таб-ы smile

Неактивен

 

#4 2012-02-17 16:19:04

madfragger
Новичок
Откуда: Волгоград/Волжский
Зарегистрирован: 2012-01-02
Сообщений: 14
Рейтинг :   
Профиль

Re: TABS - комментарии сайта/vkontakte/etc

zenn,Чет странно у меня неполучилось..такое ощущение что джквери неработает..скачал последнюю которая был на офф.сайте..
Сайт - http://gam3action.ru

Неактивен

 

#5 2012-02-17 17:11:15

Ahatomik
Пользователь
Откуда: Киев
Зарегистрирован: 2012-07-02
Сообщений: 755
Профиль  Вебсайт

Re: TABS - комментарии сайта/vkontakte/etc

zenn, красавчки ! wink
madfragger,  где ссылка на NG ?

Неактивен

 

#6 2012-02-17 17:18:01

madfragger
Новичок
Откуда: Волгоград/Волжский
Зарегистрирован: 2012-01-02
Сообщений: 14
Рейтинг :   
Профиль

Re: TABS - комментарии сайта/vkontakte/etc

Ahatomik,её в шаблоне изначально небыло..мне несложно же поставить..

Отредактированно madfragger (2012-02-17 17:25:06)

Неактивен

 

#7 2012-02-17 22:55:12

Wolverine
Модератор
Откуда: Домодедово
Зарегистрирован: 2008-10-13
Сообщений: 3538
Рейтинг :   160 
Профиль  Вебсайт

Re: TABS - комментарии сайта/vkontakte/etc

А jQuery UI ты подключил? Табы оттуда.

Неактивен

 

#8 2012-02-18 00:00:58

madfragger
Новичок
Откуда: Волгоград/Волжский
Зарегистрирован: 2012-01-02
Сообщений: 14
Рейтинг :   
Профиль

Re: TABS - комментарии сайта/vkontakte/etc

Wolverine написал:

А jQuery UI ты подключил? Табы оттуда.

Естественно,от версий jQuery может как-то зависит?

Код:

<script type="text/javascript" src="{tpl_url}/js/jquery-ui-1.8.17.custom.min.js"></script>
<link media="screen" href="{tpl_url}/style/jquery-ui-1.8.17.custom.css" type="text/css" rel="stylesheet" />

Неактивен

 

#9 2012-02-18 12:26:50

Wolverine
Модератор
Откуда: Домодедово
Зарегистрирован: 2008-10-13
Сообщений: 3538
Рейтинг :   160 
Профиль  Вебсайт

Re: TABS - комментарии сайта/vkontakte/etc

madfragger, а ты собрал ее с поддержкой табов? Есть какие-то JS ошибки на странице?

Неактивен

 

#10 2012-02-18 16:27:09

madfragger
Новичок
Откуда: Волгоград/Волжский
Зарегистрирован: 2012-01-02
Сообщений: 14
Рейтинг :   
Профиль

Re: TABS - комментарии сайта/vkontakte/etc

Wolverine написал:

а ты собрал ее с поддержкой табов? Есть какие-то JS ошибки на странице?

Естественно,ошибок невидно,когда нажимаеш на ссыль vkontakte,браузер сам опускается на окно с комментами.

Неактивен

 

#11 2012-02-18 16:40:06

Wolverine
Модератор
Откуда: Домодедово
Зарегистрирован: 2008-10-13
Сообщений: 3538
Рейтинг :   160 
Профиль  Вебсайт

Re: TABS - комментарии сайта/vkontakte/etc

У тебя jquery не подключен вообще, только jquery UI smile

Неактивен

 

#12 2012-02-18 16:58:46

madfragger
Новичок
Откуда: Волгоград/Волжский
Зарегистрирован: 2012-01-02
Сообщений: 14
Рейтинг :   
Профиль

Re: TABS - комментарии сайта/vkontakte/etc

WTF?!,это как:

Код:

<script type="text/javascript" src="{tpl_url}/js/jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript" src="{tpl_url}/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="{tpl_url}/js/jquery.js"></script>

Неактивен

 

#13 2012-02-18 17:08:05

Wolverine
Модератор
Откуда: Домодедово
Зарегистрирован: 2008-10-13
Сообщений: 3538
Рейтинг :   160 
Профиль  Вебсайт

Re: TABS - комментарии сайта/vkontakte/etc

Точно, не заметил, но у тебя на странице 7 ошибок JavaScript. Первая это подключение jquery после подключения jquery ui, скрипты загружаются последовательно.

Неактивен

 

#14 2012-02-18 17:12:42

madfragger
Новичок
Откуда: Волгоград/Волжский
Зарегистрирован: 2012-01-02
Сообщений: 14
Рейтинг :   
Профиль

Re: TABS - комментарии сайта/vkontakte/etc

Окей,будем смотреть,может залилось криво чего.

Неактивен

 

#15 2012-10-22 21:08:48

Westergraf
Пользователь
Зарегистрирован: 2011-01-12
Сообщений: 108
Рейтинг :   
Профиль

Re: TABS - комментарии сайта/vkontakte/etc

А пример как выглядит данная форма комментариев "вживую" можно увидеть !?


Бесконечно Благодарен: Wolverine, Local, Trashcka, easmik, StronG, mittus, Knopik, coreldraw, infinity237, vvovvo, irbees2008, pixar2301!

Держу сайт на данном Хостинге 119 рублей для России и 35 грн для Украины!

Неактивен

 

#16 2012-10-22 21:12:27

infinity237
Модератор
Откуда: Russia, Moscow
Зарегистрирован: 2008-11-09
Сообщений: 2674
Рейтинг :   174 
Профиль  Вебсайт

Re: TABS - комментарии сайта/vkontakte/etc

Во вложении есть.

Неактивен

 

#17 2012-10-22 21:26:36

Westergraf
Пользователь
Зарегистрирован: 2011-01-12
Сообщений: 108
Рейтинг :   
Профиль

Re: TABS - комментарии сайта/vkontakte/etc

infinity237 написал:

Во вложении есть.

Не заметил вложение

но все же хотел увидеть "вживую" т.е. сайт - ну так то же неплохо суть ясна!

Отредактированно Westergraf (2012-10-22 21:29:13)


Бесконечно Благодарен: Wolverine, Local, Trashcka, easmik, StronG, mittus, Knopik, coreldraw, infinity237, vvovvo, irbees2008, pixar2301!

Держу сайт на данном Хостинге 119 рублей для России и 35 грн для Украины!

Неактивен

 

#18 2013-09-09 19:27:15

#Q#
Пользователь
Откуда: где то в пространстве...
Зарегистрирован: 2009-04-08
Сообщений: 112
Рейтинг :   
Профиль  Вебсайт

Re: TABS - комментарии сайта/vkontakte/etc

http://cytata.ru

Что-то у меня тоже не работает( подключил всё что только мог...
Такое ощущение будто CSS не видит

Отредактированно #Q# (2013-09-09 19:27:58)


Поединок Добра и Зла происходит каждую секунду в сердце каждого человека, ибо сердце и есть поле битвы, где сражаются ангелы и демоны. (Пауло Коэльо)

Неактивен

 

#19 2013-09-09 19:56:53

irbees2008
Пользователь
Откуда: Шахтинск
Зарегистрирован: 2012-03-14
Сообщений: 2272
Рейтинг :   98 
Профиль  Вебсайт

Re: TABS - комментарии сайта/vkontakte/etc

первое -лишнее подключение jquery

Код:

<script type="text/javascript" src="http://cytata.ru/templates/red/js/jquery-1.9.1.js"></script>

второе стили не подключены
проверь пути к стилю

Код:

<link media="screen" href="http://cytata.ru/templates/red/style/jquery-ui-1.10.3.custom.css" type="text/css" rel="stylesheet" />

и удали

Код:

<link media="screen" href="http://cytata.ru/templates/red/style/jquery-ui-1.10.3.custom.min.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://cytata.ru/templates/red/js/jquery-ui-1.10.3.custom.min.js"></script>

Отредактированно irbees2008 (2013-09-09 20:00:59)

Неактивен

 

#20 2013-09-09 20:08:24

irbees2008
Пользователь
Откуда: Шахтинск
Зарегистрирован: 2012-03-14
Сообщений: 2272
Рейтинг :   98 
Профиль  Вебсайт

Re: TABS - комментарии сайта/vkontakte/etc

Код:

<link media="screen" href="{tpl_url}/style/jquery-ui-1.10.3.custom.min.css" type="text/css" rel="stylesheet" />

удали
и проверь папку на наличие файла jquery-ui-1.10.3.custom.css

Неактивен

 

#21 2013-09-09 20:12:19

#Q#
Пользователь
Откуда: где то в пространстве...
Зарегистрирован: 2009-04-08
Сообщений: 112
Рейтинг :   
Профиль  Вебсайт

Re: TABS - комментарии сайта/vkontakte/etc

irbees2008, всё поправил как ты сказал) не хочет работать. И большое спасибо за отзывчивость и помощь!


Поединок Добра и Зла происходит каждую секунду в сердце каждого человека, ибо сердце и есть поле битвы, где сражаются ангелы и демоны. (Пауло Коэльо)

Неактивен

 

#22 2013-09-09 20:18:22

irbees2008
Пользователь
Откуда: Шахтинск
Зарегистрирован: 2012-03-14
Сообщений: 2272
Рейтинг :   98 
Профиль  Вебсайт

Re: TABS - комментарии сайта/vkontakte/etc

Код:

<script type="text/javascript" src="http://cytata.ru/templates/red/js/jquery-ui-1.10.3.custom.min.js"></script>

тоже удали
или возьми табы отсюда http://ngcmshak.ru/js/vkladki-taby-na-jquery-i-css.html

Отредактированно irbees2008 (2013-09-09 20:21:28)

Неактивен

 

#23 2013-09-09 20:20:04

#Q#
Пользователь
Откуда: где то в пространстве...
Зарегистрирован: 2009-04-08
Сообщений: 112
Рейтинг :   
Профиль  Вебсайт

Re: TABS - комментарии сайта/vkontakte/etc

irbees2008, всё одно) не хочет работать, стили не видит.


Поединок Добра и Зла происходит каждую секунду в сердце каждого человека, ибо сердце и есть поле битвы, где сражаются ангелы и демоны. (Пауло Коэльо)

Неактивен

 

#24 2013-09-09 20:28:16

irbees2008
Пользователь
Откуда: Шахтинск
Зарегистрирован: 2012-03-14
Сообщений: 2272
Рейтинг :   98 
Профиль  Вебсайт

Re: TABS - комментарии сайта/vkontakte/etc

Код:

<script type="text/javascript">
            $(function(){

                // Accordion
                $("#accordion").accordion({ header: "h3" });
    
                // Tabs
                $('#tabs').tabs();
    

                // Dialog            
                $('#dialog').dialog({
                    autoOpen: false,
                    width: 600,
                    buttons: {
                        "Ok": function() { 
                            $(this).dialog("close"); 
                        }, 
                        "Cancel": function() { 
                            $(this).dialog("close"); 
                        } 
                    }
                });
                
                // Dialog Link
                $('#dialog_link').click(function(){
                    $('#dialog').dialog('open');
                    return false;
                });

                // Datepicker
                $('#datepicker').datepicker({
                    inline: true
                });
                
                // Slider
                $('#slider').slider({
                    range: true,
                    values: [17, 67]
                });
                
                // Progressbar
                $("#progressbar").progressbar({
                    value: 20 
                });
                
                //hover states on the static widgets
                $('#dialog_link, ul#icons li').hover(
                    function() { $(this).addClass('ui-state-hover'); }, 
                    function() { $(this).removeClass('ui-state-hover'); }
                );
                
            });
        </script>

замени на

Код:

<script type="text/javascript">
            $(function(){

               // Tabs
                $('#tabs').tabs();  
                                
            });
        </script>

Неактивен

 

#25 2013-09-09 20:33:25

irbees2008
Пользователь
Откуда: Шахтинск
Зарегистрирован: 2012-03-14
Сообщений: 2272
Рейтинг :   98 
Профиль  Вебсайт

Re: TABS - комментарии сайта/vkontakte/etc

#Q#,  в аську выйти можешь

Неактивен

 

Board footer

Powered by FluxBB

[ Generated in 0.028 seconds, 32 queries executed ]