Ajax Side Panel script - strona z pnelem
Side Ajax - to skrypt strony z panelem, który pobiera stronę w witrynie przy użyciu Ajax-a i wyświetla ją jako część bieżącej strony, przy użyciu slajdów z panelu jako podstronę. Skrypt jest idealny do wyświetlania krótkich stron i podstron, takich jak np. "Kontakt" lub "Warunki korzystania z usługi" lub tym podobne. Strona z użyciem ajaxa sprawia iż użytkownik nie czeka na otwarcie nowego okna i nie powoduje niepotrzebnych opóźnień i dezorientacji dla użytkownika. W Panelu Ajax Side, użytkownik pozostaje na tej samej stronie, podczas gdy następne strony lub podstrony są ładowane jednocześnie i asynchronicznie. Skrypt obsługuje ładowania strony albo za pośrednictwem Ajax lub "iframe". Później może być używany do ładowania bardziej skomplikowanych stron internetowych na swojej stronie lub z zewnętrznych domen (Ajax jest jednak ograniczony w tym zakresie przez samą politykę pochodzenia domeny).
Jak to działa już widać a TUTAJ przytkład ze strony autorów.
Oto zawartość HEAD:
|
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script> /*********************************************** </script> |
Oto pliki do umieszczenia w folderze strony:
ddajaxsidepanel.css
ddajaxsidepanel.js
i obraz ładowania 
oczywiście pliki .css i .js musimy poprawić pod własne potrzeby.
Wywłonie skryptu w kodzie strony sekcji BODY:
| <ul> <li><a href="http://www.dynamicdrive.com" rel="ajaxpanel">Dynamic Drive</a> (external link, auto loads in IFRAME)</li> <li><a href="http://www.cssdrive.com" rel="ajaxpanel">CSS Drive</a> (external link, auto loads in IFRAME)</li> <li><a href="/index.html" rel="ajaxpanel">My Home Page</a> (internal link, auto loads using Ajax)</li> <li><a href="http://www.mysite.com/index.html" rel="ajaxpanel">My Home Page</a> (still internal link, assuming mysite.com is your site's domain, auto loads using Ajax)</li> <li><a href="http://www.mysite.com/index.html" rel="ajaxpanel" data-loadtype="iframe">My Home Page</a> (internal link, but explicitly load in iframe due to data attribute)</li> </ul> |