MozillaPL.org - polskie centrum Mozilli

Przeszukaj stronę MozillaPL.org

Główne menu:

Tworzenie własnego sidebaru

Jak stworzyć własny sidebar?

Sidebary są bardzo przydatne w pracy z przeglądarką Mozilla Navigator (obecnie SeaMonkey). Również Firefox je obsługuje, choć nieco gorzej niż Mozilla. Niektóre z nich wydają się być bardzo skomplikowane jednak w rzeczywistości stworzenie sidebaru jest bardzo proste. Sidebar to nic innego jak strona internetowa. Aby zrobić sidebar wystarczy znać XHTML/HTML i trochę CSS i JavaScript. Wszystko, co jest widoczne po lewej stronie przeglądarki w ramce, to właśnie ta strona www. W tej kwestii pozostawiona jest duża dowolność. Należy jednak pamiętać, że sidebar rzadko (prawie nigdy) nie zajmuje więcej niż 25% okna przeglądarki. W związku z tym strony powinny mieć małą szerokość (długość może być dowolna).

Przeglądarka Mozilla Navigator ma specjalne, dedykowane okno, gdzie można otworzyć dowolny z zainstalowanych sidebarów.
Użytkownicy przeglądarki Mozilla Firefox mogą otworzyć w sidebarze dowolną stronę dodaną do zakładek. W tym celu w oknie właściwości zakładki należy zaznaczyć opcję 'Otwórz zakładkę jako panel sidebar'.

Przykład prostego sidebara z tytułem i listą np. wiadomości:

<html>
<head>
<style>
	body {
		background-color : #DFDFDF;
	}
	h1 {
		margin : 5px;
		font-family: sans-serif;
		font-size: 15px;
		font-weight : bold; 
	}
	#tresc {
		margin : 5px;
		padding : 3px;
		border : 3px double #993333;
		background-color: #FFFFFF;
		font-size: 12px;
	}
	ul {
		margin-left: -20px;
	}
</style>
</head>
<body>
	<h1>Testowy sidebar</h1>
	<div id="tresc">
		Nowości w naszym serwisie:
		<ul>
			<li>Lorem ipsum dolor sit amet</li>
			<li>consectetuer adipiscing elit</li> 
			<li>Quisque interdum ligula sed augue</li>
			<li>Morbi at enim. Nulla venenatis molestie arcu</li> 
			<li>Mauris diam massa, rhoncus vitae, feugiat eget</li>
		</ul>
	</div>
<body>
</html>

Do stworzenia strony można użyć na przykład Kompozytora Stron z pakietu Mozilla. Oczywiście sidebar może być także tworzony dynamicznie za pomocą technologii server side typu PHP.

Domyślnie odnośniki zawarte w sidebarze otwierane są także w oknie sidebaru. Aby otworzyć odnośnik w głównym oknie przeglądarki, należy do znacznika a dodać parametr target="_content":

<a target="_content\" ...

Można także w sekcji <head> strony dodać znacznik:

<base href="." target="_content">

co spowoduje, że wszystkie odnośniki z sidebaru będą otwierane w głównym oknie przeglądarki. Aby otworzyć odnośnik w oknie do znacznika a należy dodać parametr target="_self".

Grafika:Dialog-warning-small.png Przeglądarka Firefox domyślnie otwiera wszystkie odnośniki z sidebarów w głównym oknie.

Udostępnianie swojego sidebaru

Kolejnym krokiem jest promocja sidebara. Należy go (stronę) umieścić na serwerze http, aby był szeroko dostępny. Teraz pozostaje tylko kwestia umożliwienia użytkownikowi dodania (zainstalowania) sidebara do Mozilli. Należy to zrobić za pomocą JavaScript. Należy pamiętać, że nie każda przeglądarka obsługuje sidebary. Warto więc sprawdzić za pomocą skryptu, jaka to przeglądarka i ewentualnie zainstalować sidebar.

Oto przykład jednego z nich:

<script type="text/javascript">
<!--
----------------------------------------------------------------------
// Copyright (C) 2002 by the MozillaPL Team.
// http://www.mozillapl.org/
----------------------------------------------------------------------

// skrypt sprawdza czy jest to Mozilla/Netscape6+ lub Opera 6+ i pozwala dodać sedebar
// w przeciwnym razie wyświetla komunikat alert z informacją

function addSidebar(SidebarTag, Title, URL) {
if ((typeof window.sidebar == "object") && (typeof window.sidebar.addPanel == "function")) {
window.sidebar.addPanel(Title, URL, "");
return true;
}
else if ((navigator.userAgent.indexOf("Opera") != -1) && (navigator.userAgent.indexOf("Opera 5") == -1)) {
SidebarTag.setAttribute("title", Title);
SidebarTag.setAttribute("href", URL);
SidebarTag.setAttribute("rel", "sidebar");
return true;
}
else {
alert("Panel jest dostępny wyłącznie w Mozilli/Netscape 6 lub Operze 6..."); 
//warto pamiętać, że np. IE nie obsługuje sidebarów
return false;
}
}
//-->
</script>

Należy teraz tylko stworzyć link odwołujący się do powyższego skryptu.

A oto przykład:

<a target="_top" href="#" onclick="addSidebar(this, 'MozillaPL.org', 'http://www.mozillapl.org/sidebar.php');">Dodaj sidebar</a>

Po kliknięciu na tak przygotowany odnośnik Mozilla wyświetli okno z prośbą o potwierdzenie instalacji sidebaru. Użytkownicy Mozilli Firefox zobaczą okno pozwalające dodać odnośnik do sidebaru jako zakładkę otwierającą się w sidebarze.

Należy pamiętać, że w miejscu adresu należy podać pełny adres do serwera (np. http://www.mozillapl.org/sidebar.php). Jest to pewne utrudnienie bo utrudnia testowanie. Aby poradzić sobie z tym problemem, można zainstalować sobie np. Apacha (i wtedy odwołać się do swojego serwera) lub za każdym razem wysyłać zaktualizowane pliki na serwer (np. darmowy). Nie polecam drugiego rozwiązania, ponieważ wymaga więcej czasu (i pieniędzy w przypadku modemowców). W przypadku mniej zaawansowanego sidebara można pominąć testowanie poprzez ciągłe dodawanie strony do sidebara (w tym przypadku wystarczy tylko uruchamianie z dysku). Warto też Wasze ciekawe i nowe sidebary dodawać do katalogu sidebarów na http://mozillapl.org/.

Na podstawie: "Jak stworzyć sidebar" autorstwa Domela



Przeniesiono na MediaWiki: Adam Kowalczyk 16:27, 9 sty 2006 (EST)
Tę stronę ostatnio zmodyfikowano 12:20, 10 paź 2007.

Akcje:

:

Pomagają nam:

Przejdź do powiązanej strony

Nawigacja:

Stopka: