Дизайн сцен 2

Использование системы в различных ситуациях, вопросы программирования сценариев.

Модератор: immortal

Аватара пользователя
nick7zmail
Сообщения: 7568
Зарегистрирован: Пн окт 28, 2013 8:14 am
Откуда: Екатеринбург
Благодарил (а): 121 раз
Поблагодарили: 2002 раза

Re: Дизайн сцен 2

Сообщение nick7zmail » Пт фев 26, 2016 7:29 pm

redmax144 писал(а): Остался один вопрос, как данные пункты из меню вставить в сцену в тот заветный html-таб ?...
Данные я вставил (да и Vovix так же вроде...другого варианта не нашли) - Через <iframe>.
Что-то подобное (взято из работающей системы, но оформление у меня вертикальное. Так больше нравится. Горизонтально вверху настраивается средствами CSS)
КодПоказать

Код: Выделить всё

<style>
/* TabControl Start */

p{padding:0px 0;}
.sectiontable{  width:100%; margin:0 0 30px}
ul.tabs{ text-align: center; margin:0; padding:0; list-style:none; width:100px; float:left;}
.tabs li{width:80px; float:left; display:inline; margin:0 1px -1px 0; padding:0 9px; color:#fff; cursor:pointer; background:#333; position:relative; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px}
.tabs li:hover, 
.vertical .tabs li:hover{color:#FFF; padding:0 9px; background:#000033;transition:all 0.50s ease-out;-moz-transition:all 0.50s ease-out;-webkit-transition:all 0.50s ease-out;-o-transition:all 0.50s ease-out}
.tabs li.current{color:#FFF; background:#3f82d4; padding:0 9px 0px; border:0px solid #D4D4D4; }
.box{display:none; padding:0 0px;}
.box.visible{display:block;}

/* TabControl End */


</style>



<body style="width: 300; padding:10px;">
<div class="sectiontable"> 
 <ul class="tabs">
 <li class="current"><br><img src="/cms/icons/web.png"><br>Медиа-<br>браузер<br><br></li>
 <li><br><img src="/cms/icons/cal.png"><br>Календарь<br><br></li>
 <li><br><img src="/cms/icons/lnk.png"><br>Ссылки<br><br></li>
 <li><br><img src="/cms/icons/produ.png"><br>Продукты<br><br></li>
   <li><br><img src="/cms/icons/gps.png"><br>GPS<br><br></li>
 </ul>
 <div class="box visible">
<iframe src="/popup/app_mediabrowser.html" width="80%" height="95%" border="0" frameborder="0">
</iframe> 
 </div>
 <div class="box">
<iframe src="/popup/app_calendar.html" width="80%" height="95%" border="0" frameborder="0">
</iframe> 
 </div>
 <div class="box">
<iframe src="/popup/app_readit.html" width="80%" height="95%" border="0" frameborder="0">
</iframe> 
 </div>
   <div class="box">
<iframe src="/popup/app_products.html" width="80%" height="95%" border="0" frameborder="0">
</iframe> 
 </div>
   <div class="box">
<iframe src="/popup/app_gpstrack.html" width="80%" height="95%" border="0" frameborder="0">
</iframe> 
 </div>
</div>
</div>
</div>
</body>
<script>
 (function($) {
 $(function() {

   $('ul.tabs').delegate('li:not(.current)', 'click', function() {
     $(this).addClass('current').siblings().removeClass('current')
       .parents('div.sectiontable').find('div.box').eq($(this).index()).fadeIn(150).siblings('div.box').hide();
   })

})
})(jQuery)




$(document).ready(function(){
 // Enable or leave the keys
 $('.slider').each(function(){
 if($('li:last',this).width()+$('li:last',this).offset().left-$('li:first',this).offset().left>$('div',this).width()){
 // enable the buttons
 $('button',this).css('display','inline');
 $('button.prev',this).css('visibility','hidden');
 }
 });
 
 
 $(".slider .next").click(function(){
 //Remove the exist selector
 //Set the width to the widest of either
 var $div =$('div',this.parentNode)
 ,maxoffset = $('li:last',$div).width()+$('li:last',$div).offset().left - $('li:first',$div).offset().left - $div.width()
 ,offset = Math.abs(parseInt( $('ul',$div).css('marginLeft') ))
 ,diff = $div.width();

 if( offset >= maxoffset )
 return;
 else if ( offset + diff >= maxoffset ){
 diff = maxoffset - offset + 1;
 // Hide this
 $(this).css('visibility','hidden');
 }
 // enable the other
 $('.prev', this.parentNode).css('visibility','visible'); 
 
 $("ul", $(this).parent() ).animate({
 marginLeft: "-=" + diff
 },1400, 'swing');
 });
 
 $(".slider .prev").click(function(){

 var offset = Math.abs(parseInt( $('ul',this.parentNode).css('marginLeft') ));
 var diff = $('div',this.parentNode).width();
 if( offset <= 0 )
 return;
 else if ( offset - diff <= 0 ){
 $(this).css('visibility','hidden'); 
 diff = offset;
 }
 $('.next', this.parentNode).css('visibility','visible');

 $("ul",$(this).parent()).animate({
 marginLeft: '+='+diff
 },1400, 'swing');
 });
});
 </script>
Подгоняете ширину/высоту (лучше не в процентах, а в пикселях - в случае с меню) и вставляете html-ки из меню. Ссылку на пункт меню можно получить нажав на решетку рядом с ID.
Вложения
1.jpg
1.jpg (41.85 КБ) 10246 просмотров
За это сообщение автора nick7zmail поблагодарил:
redmax144 (Пт фев 26, 2016 11:26 pm)
Рейтинг: 1.18%
Raspberry Pi3+Broadlink+esp8266 (blynk)+AMS
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
:arrow: Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
redmax144
Сообщения: 43
Зарегистрирован: Чт янв 28, 2016 8:18 pm
Благодарил (а): 13 раз
Поблагодарили: 5 раз

Re: Дизайн сцен 2

Сообщение redmax144 » Сб фев 27, 2016 12:17 pm

Вот какого результата удалось добиться благодаря вашим советам, спасибо!
СпойлерПоказать
img.jpg
img.jpg (150.12 КБ) 10202 просмотра
В процессе появился ещё один вопрос, можно ли сделать iframe прозрачным немного?
Чтобы немного больше было видно фон и границы iframe были не так видны, может атрибут есть какой? Поискал в интернете, но не смог найти...
Аватара пользователя
nick7zmail
Сообщения: 7568
Зарегистрирован: Пн окт 28, 2013 8:14 am
Откуда: Екатеринбург
Благодарил (а): 121 раз
Поблагодарили: 2002 раза

Re: Дизайн сцен 2

Сообщение nick7zmail » Сб фев 27, 2016 12:45 pm

redmax144 писал(а): В процессе появился ещё один вопрос, можно ли сделать iframe прозрачным немного?
Чтобы немного больше было видно фон и границы iframe были не так видны, может атрибут есть какой? Поискал в интернете, но не смог найти...
У Vovix как раз прозрачный на скрине...как то так делается

Код: Выделить всё

<style>

iframe {
  width:300px;
  height: 750px;
  opacity:0.7;
    filter:alpha(opacity=70);
    -moz-opacity:0.8;
}
 
</style>
 <iframe src="/адрес" allowTransparency = true></iframe>
 
Не знаю для всех ли браузеров...
За это сообщение автора nick7zmail поблагодарили (всего 2):
redmax144 (Сб фев 27, 2016 12:59 pm) • fiberline (Пн июл 30, 2018 11:53 pm)
Рейтинг: 2.35%
Raspberry Pi3+Broadlink+esp8266 (blynk)+AMS
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
:arrow: Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
redmax144
Сообщения: 43
Зарегистрирован: Чт янв 28, 2016 8:18 pm
Благодарил (а): 13 раз
Поблагодарили: 5 раз

Re: Дизайн сцен 2

Сообщение redmax144 » Сб фев 27, 2016 1:07 pm

Судя по этому коду - имеем один большой iframe...
Прозрачность, кстати, работает даже без указания в самом тэге "allowTransparency = true" :D
А есть ли код, который вставит в один iframe данные из трёх разных источников?
Вот у меня есть
СпойлерПоказать
<iframe src="/menu.html?parent=138" width="31%" height="90%" border="0" frameborder="0">
</iframe>
<iframe src="/menu.html?parent=142" width="31%" height="90%" border="0" frameborder="0">
</iframe>
<iframe src="/menu.html?parent=142" width="31%" height="90%" border="0" frameborder="0">
</iframe>
Можно ли это сделать одним iframe?
Аватара пользователя
nick7zmail
Сообщения: 7568
Зарегистрирован: Пн окт 28, 2013 8:14 am
Откуда: Екатеринбург
Благодарил (а): 121 раз
Поблагодарили: 2002 раза

Re: Дизайн сцен 2

Сообщение nick7zmail » Сб фев 27, 2016 1:29 pm

redmax144 писал(а):Судя по этому коду - имеем один большой iframe...
Можно ли это сделать одним iframe?
Код я привел для примера.
Нет...Iframe как раз "страничка в страничке". Хотите видеть 3 источника - нужно 3 Ifram'а.
Raspberry Pi3+Broadlink+esp8266 (blynk)+AMS
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
:arrow: Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
redmax144
Сообщения: 43
Зарегистрирован: Чт янв 28, 2016 8:18 pm
Благодарил (а): 13 раз
Поблагодарили: 5 раз

Re: Дизайн сцен 2

Сообщение redmax144 » Сб фев 27, 2016 1:48 pm

Просто у Vovix на скрине совсем не видно границ между iframe, подогнаны друг к другу получается?

Upd: Да, действительно подогнаны и вот результат:
СпойлерПоказать
img1.jpg
img1.jpg (88.81 КБ) 10170 просмотров
Код:
СпойлерПоказать
<style>
iframe {
opacity:0.7;
filter:alpha(opacity=70);
-moz-opacity:0.8;
}
</style>

<iframe src="/menu.html?parent=138" style="height:450px; width:300px;" scrolling="no" border="0" frameborder="0"></iframe>
<iframe style="position:absolute; left:300px; height:450px; width:300px;" src="/menu.html?parent=142" border="0" frameborder="0"></iframe>
<iframe style="position:absolute; left:600px; height:450px; width:300px;" src="/menu.html?parent=142" border="0" frameborder="0"></iframe>
Может кому тоже будет полезно :)
Аватара пользователя
nick7zmail
Сообщения: 7568
Зарегистрирован: Пн окт 28, 2013 8:14 am
Откуда: Екатеринбург
Благодарил (а): 121 раз
Поблагодарили: 2002 раза

Re: Дизайн сцен 2

Сообщение nick7zmail » Сб фев 27, 2016 2:28 pm

Я сразу сказал что размер лучше в пикселях а не в процентах))
Raspberry Pi3+Broadlink+esp8266 (blynk)+AMS
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
:arrow: Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
utia38
Сообщения: 82
Зарегистрирован: Ср авг 26, 2015 9:22 pm
Откуда: г.Обнинск, Калужская обл.
Благодарил (а): 1 раз
Поблагодарили: 9 раз
Контактная информация:

Re: Дизайн сцен 2

Сообщение utia38 » Сб фев 27, 2016 4:12 pm

redmax144 писал(а):Просто у Vovix на скрине совсем не видно границ между iframe, подогнаны друг к другу получается?

Upd: Да, действительно подогнаны и вот результат:
СпойлерПоказать
img1.jpg
Код:
СпойлерПоказать
<style>
iframe {
opacity:0.7;
filter:alpha(opacity=70);
-moz-opacity:0.8;
}
</style>

<iframe src="/menu.html?parent=138" style="height:450px; width:300px;" scrolling="no" border="0" frameborder="0"></iframe>
<iframe style="position:absolute; left:300px; height:450px; width:300px;" src="/menu.html?parent=142" border="0" frameborder="0"></iframe>
<iframe style="position:absolute; left:600px; height:450px; width:300px;" src="/menu.html?parent=142" border="0" frameborder="0"></iframe>
Может кому тоже будет полезно :)
подкажите пожалуйста где взять элементы для сцены с НАСТРОЙКАМИ (может кто выложит :oops:)
Аватара пользователя
nick7zmail
Сообщения: 7568
Зарегистрирован: Пн окт 28, 2013 8:14 am
Откуда: Екатеринбург
Благодарил (а): 121 раз
Поблагодарили: 2002 раза

Re: Дизайн сцен 2

Сообщение nick7zmail » Сб фев 27, 2016 4:16 pm

utia38 писал(а): подкажите пожалуйста где взять элементы для сцены с НАСТРОЙКАМИ (может кто выложит :oops:)
Какие? Если которые только что обсуждали - это просто куски левого меню. Как получить ссылку на раздел - я несколько постов выше описал, даже с картинкой. Ссылка примерно такого вида

Код: Выделить всё

/menu.html?parent=<тут id раздела> 
Raspberry Pi3+Broadlink+esp8266 (blynk)+AMS
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
:arrow: Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
utia38
Сообщения: 82
Зарегистрирован: Ср авг 26, 2015 9:22 pm
Откуда: г.Обнинск, Калужская обл.
Благодарил (а): 1 раз
Поблагодарили: 9 раз
Контактная информация:

Re: Дизайн сцен 2

Сообщение utia38 » Сб фев 27, 2016 11:10 pm

Vovix писал(а):
DiArt писал(а):
Vovix писал(а): Добрый!
Я конечно могу выложить, но в этих сценах всё завязано под мою систему видео!
вот например элементы сцены Video (устанавливать через экспорт элементов)!
Благодарю, Vovix! Именно это и нужно. Я понимаю что завязано всё под Вашу систему, смогу сам перепривязать под себя, а фото хочу посмотреть что именно у Вас в настройках выставлено. JPG картинкти настроек если можно выложи хотя бы, если нет возможности выложить сцену полностью с настройками.
Вы эти имеете в виду?
Скриншот 2016-01-27 12.43.30.png
Скриншот 2016-01-27 12.43.35.png
я про элементы сцен имел ввиду (ссылок нигде не нашел, только обсуждение...)
такоко вида ....настройки.elements
Ответить