Jump to content
Sign in to follow this  
vivee

[vivee] Zakładki do sidebara

Recommended Posts

zajawka.jpg

 

 

 

Jako szczęśliwi posiadacze blogów, po pewnym czasie natrafiamy na problem rozrostu sidebara do ogromnych rozmiarów. Jednym ze sposobów jest skorzystać z dobrodziejstw javascript i porobić

zakładki.

 

 

 

Cały tutorial dostępny na:

Hidden Content

    Give reaction or reply to this topic to see the hidden content.

Share this post


Link to post
Share on other sites

Kaczlawo bardzo dobrze mówi.. Po co ładować całą… ciężką… bibliotekę skoro można to też załatwić prostym, krótkim i lekkim skryptem.

 

Nie są…dzicie, że należy przenieść do innego działu.? To jest bardziej tutorial o JS niż o html & css ;)

Share this post


Link to post
Share on other sites

innym mówisz że nic nie wnoszą… do tematu a sam to robisz :) płacą… Ci za posty ? a żeby nie było offtopowo to podaj taki skrypt który nie będzie wykorzystywał tej biblioteki


imgqp7cy6uj9.gif

 

Doba ma 24 godziny. Skrzynka 24 piwa. Przypadek ?

Share this post


Link to post
Share on other sites

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? :)


Pomocy na GG udzielam, tylko wtedy, kiedy sam jÄ… zaproponuje.

-----------------------------------------------------------------------------------

Maru Code - Websites & web applications

http://marucode.com | http://marucode.pl

 

Tworzenie, kodowanie stron i aplikacji internetowych.

CMS, CRM, e-Commerce, aplikacje Facebook i wiele innych.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...