[vivee] Zakładki do sidebara

Identyczny efekt można otrzymać przy uzyciu lżejszego Prototype. Poniżej zamieszczam kod moich zakładek (co prawda z ładowaniem treści za pomocą Ajax'a, ale kod jest podobnej długości, jak ten co pokazałeś.

Hash.prototype.toObject = Hash.prototype.toObject || function() { return Object.clone(this); }

var DynamicTabs = function(tabpanel, page_urls, args) {
	var args = $H({asynchronous: true, method: 'get', evalScripts: true}).merge(args).toObject();	
	this.load_page = function(page_id) {
		new Ajax.Updater(tabpanel, page_urls[page_id], args);
	}
	
	for (page_id in page_urls) {
		Event.observe(page_id, 'click', function(e) {
			if ('function' == typeof(args.onclick))
				args.onclick(e);

			for (page_id in page_urls) $(page_id).removeClassName('active');
			this.load_page(Event.element(e).addClassName('active').id);
			Event.stop(e);
		}.bindAsEventListener(this));

		if ($(page_id).hasClassName('active')) { this.load_page(page_id); }
	}
}

To wrzucasz do <head>, potem tworzysz przykładową kontrolkę:

<ul>
  <li><a id="nav1" href="">Tab 1</a></li>
  <li><a id="nav2" class="active" href="">Tab 2</a></li>
  <li><a id="nav3" href="">Tab 3</a></li>
</ul>
<div id="loader" style="display: none;">Loading...</div>
<div id="content"></div>

No i na sam koniec uruchamiasz kontrolkę:

<script type="text/javascript">
  new DynamicTabs('content',
		   {
			  'nav1': 'page1.html',
			  'nav2': 'page2.html',
			  'nav3': 'page3.html'
			},
			{
			  onclick: function(e) {
							$('loader').show();
						   },
			  onSuccess: function(e) {
							$('loader').hide();
						   }
			});
</script>

Jak widzisz wszytkie parametry podajesz w lekkim JSON'ie. Te funkcje onclick i OnSuccess to opcjonalne paramtery dla samej kontrolki Ajaxowej. To tak dla przykładu jeśli chcesz wrzucić jakiś komunikat albo pasek postepu podczas wczytywanai stron.

Mozna też ustawić, żeby skrypt przesyłał dane metodą 'post', wystarczy zamienić 'get' na 'post' i w JSON'ie tak samo jak onclick dodać liste parametrów do przekazania. Proste?

www.WebTips.pl: [vivee] Zakładki do sidebara - www.WebTips.pl

[vivee] Zakładki do sidebara html / css / js

#1 vivee

Odpowiedzi do tego tematu

#2 exceptional

#3 ziele

#4 Stolski

#5 griwes

#6 LapKom

#7 Elvis

Użytkownicy przeglądający ten temat: 1
0 użytkowników, 1 gości, 0 anonimowych

Skórka i język

Statystyki realizacji