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

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

Вы не зашли.

#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
Сообщений: 3,538
Рейтинг :   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>

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

Не в сети

#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
Сообщений: 832
Сайт

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

zenn, красавчки ! ;)
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
Сообщений: 3,538
Рейтинг :   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
Сообщений: 3,538
Рейтинг :   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
Сообщений: 3,538
Рейтинг :   160 
Сайт

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

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

Не в сети

#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
Сообщений: 3,538
Рейтинг :   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
Сообщений: 2,674
Рейтинг :   176 
Сайт

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
Сообщений: 115
Рейтинг :   
Сайт

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
Сообщений: 2,727
Рейтинг :   114 
Сайт

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
Сообщений: 2,727
Рейтинг :   114 
Сайт

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
Сообщений: 115
Рейтинг :   
Сайт

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

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


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

Не в сети

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

irbees2008
Продвинутый чайник
Откуда Шахтинск
Зарегистрирован: 2012-03-14
Сообщений: 2,727
Рейтинг :   114 
Сайт

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
Сообщений: 115
Рейтинг :   
Сайт

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

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


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

Не в сети

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

irbees2008
Продвинутый чайник
Откуда Шахтинск
Зарегистрирован: 2012-03-14
Сообщений: 2,727
Рейтинг :   114 
Сайт

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
Сообщений: 2,727
Рейтинг :   114 
Сайт

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

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

Не в сети

Подвал раздела

Работает на FluxBB