Перейти к содержимому


Фотография
- - - - -

Yootheme шаблон и табы JBZoo (недвижимость)

yootheme tabs

Лучший Ответ JBUser , 23 December 2013 - 14:30

Вопрос с правильным отображением карты на ТАБЕ Full-а решился с помощью изменений кода, которые порекомендовал Денис (SmetDenis).
Вот окончательный вид этого кода:

<script type="text/javascript">
jQuery(function ($) {
    $('.uk-tab li:first-child, #tab-content > li:first-child').addClass('uk-active');
	$('.uk-tab > li').on('click', function(event, area){
            setTimeout(function(){
    		var map = $('.googlemaps > div:first');
		if (map.length) {
	            map.data('Googlemaps').refresh();
	        }
	    }, 100); // задержка, можно попробовать настроить самый оптимальный вариант
	});
    });	
</script>
Перейти к сообщению


  • Закрытая тема Тема закрыта
Сообщений в теме: 16

#1 JBUser

JBUser

Отправлено 21 December 2013 - 14:02

Опять к вопросу об оформлении в родном для Yootheme шаблоне.

 

Делаю FULL шаблон для недвижимости. Все шаблоны и сам каталог "с нуля" т.к. "демовский" не подходит идеологично.

Дошел до табов и захотел просто "показать" табы в зашитом (в шаблоне Yootheme) стиле UIKIT (на картинке tab_uikittab_uikit.jpg .jpg)

Меняю (наивно) в шаблоне FULL строку вывода табов в виде

<ul class="uk-tab" data-uk-tab>

и думаю, что данные теперь просто будут выводиться с другим оформлением.

Но вижу tab_jbzoo.jpg

 

Что ж так все сложно? Думал, это ж все стандартные вещи, хоть в Bootstrap хоть в UIKIT...

 

Уважаемые знатоки как непрограммисту правильно и с наименьшими затратами времени переопределить стили в стандартный вариант для шаблона от Yootheme?

 

P.S. Различные темы по табам читал. Информации очень много. Некоторая - до обновлений 2.1.1. Мне же сложно понять, какой вариант нужно взять за основу для данной кастомизации. Опять же таки ничего военного не прошу, просто хочу использовать стили шаблона, т.к. перед покупкой мне говорили, что все оформления подхватяться шаблоном. Использую все от Yootheme...


Сообщение отредактировал JBUser: 21 December 2013 - 14:08

  • 0

#2 Cheren-dow

Cheren-dow

Отправлено 21 December 2013 - 14:16

Здравствуйте. Не трудозатратно - это Скачать шаблон UIKIT открыть шаблон full и посмотреть как там устроены вкладки.


  • 0
Изображение
 

#3 SmetDenis

SmetDenis

Отправлено 21 December 2013 - 14:17

Что ж так все сложно? Думал, это ж все стандартные вещи, хоть в Bootstrap хоть в UIKIT...

У bootstap, uikit, jbzoo, widgetkit и многих других библиотек, везде собственная реализация вкладок.
изменив один обрамляющий класс весь внешний вид не изменится, так как будут это меняются темы оформления.

 

Потому что везде используются свои классы, скрипты, перемены и прочее.

С чего вы решили что изменение одного тега раскрасит вкладки, не понятно.

 

 

 

Уважаемые знатоки как непрограммисту правильно и с наименьшими затратами времени переопределить стили в стандартный вариант для шаблона от Yootheme?

Самый быстрый вариант - это использовать нативные виджеты вашего шаблона, т.е полностью расставить теги в full от нужного виджета.


  • 0
JBZoo v4.0 и новый чудный мир Open Source GPL
Отключайте проверку лицензий как можно скорее!



— Есть два типа людей: Кто еще не делает бекапы и кто уже делает бекапы.


#4 JBUser

JBUser

Отправлено 21 December 2013 - 14:24

Скачать шаблон UIKIT открыть шаблон full и посмотреть как там устроены вкладки.

Спасибо, хорошая мысль.

Я то и делал новый каталог на базе папки от экспериментального демо-сайта на UIKIT, но там не было "недвижимости" и я вытащил FULL из недвижимости без uikit.

Не хватило соображалки пообезьянничать с Full-а от продуктов. :)

Щас буду пробовать.


  • 0

#5 JBUser

JBUser

Отправлено 21 December 2013 - 16:39

Пытаюсь слепить "по образу и подобию".

Но конструкция UIKIT дем-версии содержит, к примеру:

<li>
<a href="#tab-text"><?php echo JText::_('JBZOO_ITEM_TAB_DESCRIPTION'); ?></a>
</li>

 а вариант не UIKIT для недвижимости (в моем варианте, к примеру):

<li>
<a href="<?php echo JUri::getInstance()->toString();?>#tab-overview">Описание</a>
</li

Т.е. мне, как простому юзеру не понятно почему конструкции разные.

В результате такого "обезьянства" я собрал Full который выдает ошибку, мол, "unexpected end". Ну это и понятно: я ж не понимаю, что пишу.

Если можно что-то здесь подправить (делаю Full на UIKIT для Недвижимости) - пожалуйста, подскажите.

<?php

App::getInstance('zoo')->jbassets->uikit();
$align = $this->app->jbitem->getMediaAlign($item, $layout);
$tabsId = uniqid('jbzoo-tabs-');

echo $this->renderPosition('title', array('style' => 'jbtitle' , 'class' => 'uk-article-title'));
echo $this->renderPosition('subtitle', array('style' => 'jbsubtitle' , 'class' => 'uk-article-lead'));
echo $this->renderPosition('likes', array('style' => 'jbblock', 'class' => 'align-left'));
echo $this->renderPosition('rating', array('style' => 'jbblock', 'class' => 'align-left'));
?>

<?php if ($this->checkPosition('address')) : ?>
	<h4 class="full-address"><?php echo $this->renderPosition('address'); ?></h4>
<?php endif; ?>

<div class="clearfix top-info">
    <?php if ($this->checkPosition('gallery')) : ?>
        <div class="full-gallery">
            <?php echo $this->renderPosition('gallery'); ?>
        </div>
    <?php endif; ?>
    <div class="features">
        <?php if ($this->checkPosition('properties')) : ?>
            <ul class="uk-list uk-list-line">
               <?php echo $this->renderPosition('properties', array('style'=>'list')); ?>
            </ul>
            <div class="favourite">
                <?php echo $this->renderPosition('favourite'); ?>
            </div>
        <?php endif; ?>
    </div>
</div>

<div class="clear clr"></div>


<?php if ($this->checkPosition('tab-overview')
    || $this->checkPosition('tab-agent')
	|| $this->checkPosition('tab-map')
    || $this->checkPosition('tab-comments')

) :

    $positionParams = array(
        'style'    => 'jbblock',
        'tag'      => 'div',
        'labelTag' => 'h3',
        'clear'    => true
    );

    ?>

    <div id="<?php echo $tabsId; ?>">
        <ul class="uk-tab" data-uk-tab="{connect:'#tab-content'}">
            <?php if ($this->checkPosition('tab-overview')) : ?>
		
			<li><a href="<?php echo JUri::getInstance()->toString();?>#tab-overview">Описание</a></li>
			<li><a href="<?php echo JUri::getInstance()->toString();?>#tab-agent">Брокер</a></li>
        
			<?php if ($map) : ?><li><a href="<?php echo JUri::getInstance()->toString();?>#tab-location">Карта</a></li><?php endif; ?>

			<li><a href="<?php echo JUri::getInstance()->toString();?>#tab-comments">Комментарии</a></li>
		</ul>

		
	    <ul id="tab-content" class="uk-switcher uk-margin">
		
		    <?php if ($this->checkPosition('tab-overview')) : ?>
			    <li>
				    <div id="tab-overview"><?php echo $this->renderPosition('tab-overview', $positionParams); ?></div>
			    </li>
		    <?php endif; ?>
		
		    <?php if ($this->checkPosition('tab-agent')) : ?>
			    <li>
				    <div id="tab-agent"><?php echo $this->renderPosition('tab-agent', $positionParams); ?></div>
			    </li>
		    <?php endif; ?>
			
		    <?php if ($this->checkPosition('tab-map')) : ?>
			    <li>
				    <div id="tab-map"><?php echo $this->renderPosition('tab-map', $positionParams); ?></div>
			    </li>
		    <?php endif; ?>
	    </ul>
	</div>
			

    <script type="text/javascript">
        jQuery(function ($) {
	        $('.uk-tab li:first-child, #tab-content > li:first-child').addClass('uk-active');
	        $('[data-uk-switcher]').on('uk.switcher.show', function(event, area){
		        console.log("Switcher switched to ", area);
	        });
        });
    </script>

<?php endif; ?>

Ну, и как карту туда "влепить" - тоже не пойму, т.к. в ПРОДУКТАХ UIKIT нет карты на вкладках (не с чего обезьянничать).


Сообщение отредактировал JBUser: 21 December 2013 - 16:41

  • 0

#6 Cheren-dow

Cheren-dow

Отправлено 21 December 2013 - 19:14

Удалите

<?php if ($this->checkPosition('tab-overview')) : ?>

Ошибка должна исчезнуть.

 

Посмотрите официальную документацию по вкладкам что бы понять как добавлять новые


  • 0
Изображение
 

#7 JBUser

JBUser

Отправлено 21 December 2013 - 19:25

Ошибка должна исчезнуть.

Да, ошибки нет, но и табов тоже нет.

Никаких следов того, что я "наваял". Отразились только вот эти строчки кода Full шаблона:

<?php if ($this->checkPosition('address')) : ?>
<h4 class="full-address"><?php echo $this->renderPosition('address'); ?></h4>
<?php endif; ?>
 
<div class="clearfix top-info">
<?php if ($this->checkPosition('gallery')) : ?>
<div class="full-gallery">
<?php echo $this->renderPosition('gallery'); ?>
</div>
<?php endif; ?>
<div class="features">
<?php if ($this->checkPosition('properties')) : ?>
<ul class="uk-list uk-list-line">
<?php echo $this->renderPosition('properties', array('style'=>'list')); ?>
</ul>
<div class="favourite">
<?php echo $this->renderPosition('favourite'); ?>
</div>
<?php endif; ?>
</div>
</div>

Видимо, придется мне отказаться от этой затеи и лепить без ТАБОВ.


  • 0

#8 SmetDenis

SmetDenis

Отправлено 21 December 2013 - 19:47

Дайте ссылку.
  • 0
JBZoo v4.0 и новый чудный мир Open Source GPL
Отключайте проверку лицензий как можно скорее!



— Есть два типа людей: Кто еще не делает бекапы и кто уже делает бекапы.


#9 JBUser

JBUser

Отправлено 21 December 2013 - 20:04

Дайте ссылку.

У меня на локальном компьютере.

Мне, главное, понять я правильно шаблон Full для UIKIT нарисовал?

Если бы был образец, на UIKIT для Flat я бы сообразил что к чему.


Сообщение отредактировал JBUser: 21 December 2013 - 20:04

  • 0

#10 Cheren-dow

Cheren-dow

Отправлено 21 December 2013 - 20:41

Почему бы не начать от простого к сложному.
Посмотрели на документацию о вкладках и добавили в full

<ul class="uk-tab" data-uk-tab="{connect:'#tab-content'}">
	<li>
		<a href="#tab1">Мой первый таб</a>
	</li>
	<li>
		<a href="#tab2">Мой первый таб</a>
	</li>
</ul>
<ul id="tab-content" class="uk-switcher uk-margin">
	<li>
		<div id="tab1">Мой текст в табе 1</div>
	</li>

	<li>
		<div id="tab2">Мой текст в табе 2</div>
	</li>
</ul>

Открыли страницу посмотрели... Ага все работает, значит буду пробовать выводить позиции ZOO? опять открываем файл и правим дальше

<ul class="uk-tab" data-uk-tab="{connect:'#tab-content'}">
	<li>
		<a href="#tab1">Мой первый таб</a>
	</li>
	<li>
		<a href="#tab2">Мой первый таб</a>
	</li>
</ul>
<ul id="tab-content" class="uk-switcher uk-margin">
	<li>
		<div id="tab1"><?php echo $this->renderPosition('gallery'); /** установить свою позицию */ ?></div>
	</li>

	<li>
		<div id="tab2"><?php echo $this->renderPosition('description'); /** установить свою позицию */ ?></div>
	</li>
</ul>

Сохранили, опять пошли на страницу, проверили, АГА инфа выводится и вкладки работают. Теперь хочу обозвать вкладки, опять открываем файл

<ul class="uk-tab" data-uk-tab="{connect:'#tab-content'}">
	<li>
		<a href="#tab1">Галерея изображений</a>
	</li>
	<li>
		<a href="#tab2">Описание</a>
	</li>
</ul>
<ul id="tab-content" class="uk-switcher uk-margin">
	<li>
		<div id="tab1"><?php echo $this->renderPosition('gallery'); /** установить свою позицию */ ?></div>
	</li>

	<li>
		<div id="tab2"><?php echo $this->renderPosition('description'); /** установить свою позицию */ ?></div>
	</li>
</ul>

Опять проверили - Все работает. Пошли дальше. Хотим предусмотреть что бы не выводились вкладки если инфа о какой то владки не будет заполнена. Опять открываем файл и для одной вкладки пробуем

<ul class="uk-tab" data-uk-tab="{connect:'#tab-content'}">
	<?php if ($this->checkPosition('gallery')) : ?>
		<li>
			<a href="#tab1">Галерея изображений</a>
		</li>
	<?php endif; ?>
	<li>
		<a href="#tab2">Описание</a>
	</li>
</ul>
<ul id="tab-content" class="uk-switcher uk-margin">
	<?php if ($this->checkPosition('gallery')) : ?>
		<li>
			<div id="tab1"><?php echo $this->renderPosition('gallery'); /** установить свою позицию */ ?></div>
		</li>
	<?php endif; ?>
	<li>
		<div id="tab2"><?php echo $this->renderPosition('description'); /** установить свою позицию */ ?></div>
	</li>
</ul>

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

Вот.. И так для каждой проделываете. А вы не понимая кода сразу кучей все вставляете.

 

Надеюсь это вам поможет (fingers)


  • 0
Изображение
 





Темы с аналогичным тегами yootheme, tabs

Click to return to top of page in style!