Использование системы в различных ситуациях, вопросы программирования сценариев.
Модератор: immortal
-
nick7zmail
- Сообщения: 7573
- Зарегистрирован: Пн окт 28, 2013 8:14 am
- Откуда: Екатеринбург
-
Благодарил (а):
121 раз
-
Поблагодарили:
2010 раз
Сообщение
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 (41.85 КБ) 11400 просмотров
-
redmax144
- Сообщения: 44
- Зарегистрирован: Чт янв 28, 2016 8:18 pm
-
Благодарил (а):
13 раз
-
Поблагодарили:
5 раз
Сообщение
redmax144 » Сб фев 27, 2016 12:17 pm
Вот какого результата удалось добиться благодаря вашим советам, спасибо!
- img.jpg (150.12 КБ) 11356 просмотров
В процессе появился ещё один вопрос, можно ли сделать iframe прозрачным немного?
Чтобы немного больше было видно фон и границы iframe были не так видны, может атрибут есть какой? Поискал в интернете, но не смог найти...
-
nick7zmail
- Сообщения: 7573
- Зарегистрирован: Пн окт 28, 2013 8:14 am
- Откуда: Екатеринбург
-
Благодарил (а):
121 раз
-
Поблагодарили:
2010 раз
Сообщение
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>
Не знаю для всех ли браузеров...
-
redmax144
- Сообщения: 44
- Зарегистрирован: Чт янв 28, 2016 8:18 pm
-
Благодарил (а):
13 раз
-
Поблагодарили:
5 раз
Сообщение
redmax144 » Сб фев 27, 2016 1:07 pm
Судя по этому коду - имеем один большой iframe...
Прозрачность, кстати, работает даже без указания в самом тэге "allowTransparency = true"
А есть ли код, который вставит в один 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
- Сообщения: 7573
- Зарегистрирован: Пн окт 28, 2013 8:14 am
- Откуда: Екатеринбург
-
Благодарил (а):
121 раз
-
Поблагодарили:
2010 раз
Сообщение
nick7zmail » Сб фев 27, 2016 1:29 pm
redmax144 писал(а):Судя по этому коду - имеем один большой iframe...
Можно ли это сделать одним iframe?
Код я привел для примера.
Нет...Iframe как раз "страничка в страничке". Хотите видеть 3 источника - нужно 3 Ifram'а.
-
redmax144
- Сообщения: 44
- Зарегистрирован: Чт янв 28, 2016 8:18 pm
-
Благодарил (а):
13 раз
-
Поблагодарили:
5 раз
Сообщение
redmax144 » Сб фев 27, 2016 1:48 pm
Просто у Vovix на скрине совсем не видно границ между iframe, подогнаны друг к другу получается?
Upd: Да, действительно подогнаны и вот результат:
- img1.jpg (88.81 КБ) 11324 просмотра
Код:
<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
- Сообщения: 7573
- Зарегистрирован: Пн окт 28, 2013 8:14 am
- Откуда: Екатеринбург
-
Благодарил (а):
121 раз
-
Поблагодарили:
2010 раз
Сообщение
nick7zmail » Сб фев 27, 2016 2:28 pm
Я сразу сказал что размер лучше в пикселях а не в процентах))
-
utia38
- Сообщения: 82
- Зарегистрирован: Ср авг 26, 2015 9:22 pm
- Откуда: г.Обнинск, Калужская обл.
-
Благодарил (а):
1 раз
-
Поблагодарили:
9 раз
-
Контактная информация:
Сообщение
utia38 » Сб фев 27, 2016 4:12 pm
redmax144 писал(а):Просто у Vovix на скрине совсем не видно границ между iframe, подогнаны друг к другу получается?
Upd: Да, действительно подогнаны и вот результат:
Код:
<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
- Сообщения: 7573
- Зарегистрирован: Пн окт 28, 2013 8:14 am
- Откуда: Екатеринбург
-
Благодарил (а):
121 раз
-
Поблагодарили:
2010 раз
Сообщение
nick7zmail » Сб фев 27, 2016 4:16 pm
utia38 писал(а):
подкажите пожалуйста где взять элементы для сцены с НАСТРОЙКАМИ (может кто выложит
)
Какие? Если которые только что обсуждали - это просто куски левого меню. Как получить ссылку на раздел - я несколько постов выше описал, даже с картинкой. Ссылка примерно такого вида
-
utia38
- Сообщения: 82
- Зарегистрирован: Ср авг 26, 2015 9:22 pm
- Откуда: г.Обнинск, Калужская обл.
-
Благодарил (а):
1 раз
-
Поблагодарили:
9 раз
-
Контактная информация:
Сообщение
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