+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: Strona złożona z tabs'ów (/thread-strona-zlozona-z-tabs-ow)
Strona złożona z tabs'ów - Heyek - 11-11-2012
Witam,
Potrzebuję zrobić stronkę zbudowaną z "kilku stron". Cała strona będzie 1 stroną przewijaną w dół, a na dole będzie znajdował się pasek ze strzałką do następnej strony. Po kliknięciu pierwsza strona przesunie się dynamicznie w lewo i pojawi się nowa (z innym tłem, inną treścią, innymi modułami).
Ma ktoś może pomysł jak coś takiego zrobić i w jakiej technologii ?
RE: Strona złożona z tabs'ów - hieroshima - 11-11-2012
no chyba jedyna rozsądna technologia to javascript i najrozsądniej chyba z biblioteką jQuery chociaż co kto lubi
bibliotek JS'owych jest sporo więcej równie ciekawych( można się pokusić o pure javascript 
). Kwestia przyzwyczajenia, ale do jQuery będzie masa przykładów, gotowców, tutków.
RE: Strona złożona z tabs'ów - Heyek - 11-11-2012
Dzięki za odpowiedź. Znalazłem tabsy w JS które nadają się do zbudowania czegoś takiego. Mam jednak mały problem. Tak jak pisałem tabsy będą dłuższe i będzie konieczność przewijania strony w dół. Chciałbym żeby buttony next/prev były umieszczone na pasku u dołu strony który będzie przesuwał się razem ze stroną ( position:fixed; ). Aktualnie buttony pojawiają się dopiero na samym dole strony. Umieściłem ten pasek ale nie wiem jak wyciągnąć tą funkcję na ten pasek, żeby buttony suwały się na pasku razem z nim.
Skrypt wygląda tak:
Kod:
<script type="text/javascript">
$(function() {
var $tabs = $('#tabs').tabs();
$(".ui-tabs-panel").each(function(i){
var totalSize = $(".ui-tabs-panel").size() - 1;
if (i != totalSize) {
next = i + 2;
$(this).append("<a href='#' class='next-tab mover' rel='" + next + "'>Next Page »</a>");
}
if (i != 0) {
prev = i;
$(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>« Prev Page</a>");
}
});
$('.next-tab, .prev-tab').click(function() {
$tabs.tabs('select', $(this).attr("rel"));
return false;
});
});
</script>RE: Strona złożona z tabs'ów - Kartofelek - 11-11-2012
CSS:
Kod:
body, html {
width:100%;
background:#fafafa;
height:100%;
padding:0;
margin:0;
}
.page-container {
width:100%;
height:100%;
min-width: 840px;
overflow: hidden;
overflow-y:auto;
position: relative;
}
.slide {
width:100%;
height:100%;
position: absolute;
top:0;
left:100%;
padding:0 0;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
.slide:first-of-type {
left:0;
}
.pasek {
position:fixed;
bottom:0;
left:0;
width:100%;
background:#000; ..........
}JS
Kod:
$(function() {
function gotoNextSlide() {
$('#slideCurrent').animate({left : '-100%'}, 600);
$('#slideNext').animate({left : 0}, 600);
}
});Pasek z guzikami też wcale nie musi być 1. Każdy tab może mieć swój własny pasek. Position fixed też możesz przecież animować tak samo jak przesuwanie tabów.
RE: Strona złożona z tabs'ów - Heyek - 12-11-2012
Dzięki, zrobiłem troszkę inaczej ale też dobrze działa
Mam teraz następny problem. Mianowicie chciałbym dodać do tego skryptu, skrypt powiększający obrazki i wyświetlający tekst w boxie. http://bitbonsai.com/facybox/ Jak umieszczam to w pliku z tabsami to ten skrypt zaczyna działać, a tamten cały się wysypuje. Można coś z tym zrobić ?
RE: Strona złożona z tabs'ów - hieroshima - 12-11-2012
http://api.jquery.com/jQuery.noConflict/
RE: Strona złożona z tabs'ów - Kartofelek - 12-11-2012
Użyj sobie colorbox. I ładniejszy a lepszy