Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][AJAX]Home.pl co to ?
Forum PHP.pl > Forum > Przedszkole
BatGraf
Cześć smile.gif

Bardzo Was proszę o krótka odpowiedź:
Jakiej biblioteki uzył Home.pl do stworzenia boxu z zakładkami na stronie głównej.
Chodzi mi o ten duży, gdzie zakładki są po lewej stronie, po najechaniu zmienia się zawartość, ale pozostaje po "zjechaniu"

Podobne można za pomocą jQuery czy innych, ale jakim sposobem taki box?
Bardzo proszę o krótką informację - co to jest. Reszty juz sobie poszukam smile.gif Dzięki smile.gif
dr_bonzo
Zajrzyj do ich JS-a - wyglada na customa.
mecenas
Cytat(BatGraf @ 6.02.2009, 01:59:35 ) *
Podobne można za pomocą jQuery czy innych, ale jakim sposobem taki box?

A w czymże problem żeby to zrobić w jQuery? smile.gif Co prawda raczej jestem server-side'owcem, ale zdarzyło mi się kiedyś coś podobnego popełnić. Może nawet gdzieś mam kody smile.gif
BatGraf
Dzieki Panowie za pospowiedzi smile.gif

Z kodu, jak dla mnie nie wiele wynika:

Kod
<script type="text/javascript" src="/gfx-new/js/default.js"></script>


gfx - nie znalazłem czegoś podobnego w sieci.

Cytat
Może nawet gdzieś mam kody
- jakbyś miał ochotę poszukac - byłbym Ci wdzięczny.

Cytat
Zajrzyj do ich JS-a - wyglada na customa.
- idę do gogla poszukać. Tak czy inaczej, jesli komuś wpadnie do głowy co to jest lub za pomocą czego zrobić można coś podobnego - stawiam piwo smile.gif
A ja i tak szperam na własną rękę, więc może ja dam odpowiedź jak znajdę smile.gif
dr_bonzo
Cytat
Z kodu, jak dla mnie nie wiele wynika:

Kod
<script type="text/javascript" src="/gfx-new/js/default.js"></script>

Chlopieeeee, za zajrzales tutaj? http://home.pl/gfx-new/js/default.js

A pozatym takie taby sa w jQ, prototype itd
np.
http://stilbuero.de/jquery/tabs/
BatGraf
Chłopie smile.gif wiem, zagladałem, ale napisałem, ze nie mówi mi to wiele, dlatego zapytałem, ale dzięki za ten link.

Nie wiem czy to tym samym sposobem, ale rozwiązałem:

Ze strony: DynamicDrive

Sciągnąłem:

contentslider.css
contentslider.js
loading.gif


Potem w head wstawiłem:

Kod
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<link rel="stylesheet" type="text/css" href="contentslider.css" />

<script type="text/javascript" src="contentslider.js">

/***********************************************
* Featured Content Slider- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>


i w body:

Kod
<h2>Example 1</h2>

<!--Inner content DIVs should always carry "contentdiv" CSS class-->
<!--Pagination DIV should always carry "paginate-SLIDERID" CSS class-->

<div id="slider1" class="sliderwrapper">

<div class="contentdiv">
Content 1 Here. <br />
<p></p><a href="javascript:featuredcontentslider.jumpTo('slider1', 3)">Go to 3rd slide</a></p>
</div>

<div class="contentdiv">
Content 2 Here.
</div>

<div class="contentdiv">
Content 3 Here.
</div>

</div>

<div id="paginate-slider1" class="pagination">

</div>

<script type="text/javascript">

featuredcontentslider.init({
    id: "slider1",  //id of main slider DIV
    contentsource: ["inline", ""],  //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
    toc: "#increment",  //Valid values: "#increment", "markup", ["label1", "label2", etc]
    nextprev: ["Previous", "Next"],  //labels for "prev" and "next" links. Set to "" to hide.
    revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
    enablefade: [true, 0.2],  //[true/false, fadedegree]
    autorotate: [true, 3000],  //[true/false, pausetime]
    onChange: function(previndex, curindex){  //event handler fired whenever script changes slide
        //previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
        //curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
    }
})

</script>




<br />
<h2>Example 2, Pagination links from markup</h2>

<!--Inner content DIVs should always carry "contentdiv" CSS class-->
<!--Pagination DIV should always carry "paginate-SLIDERID" CSS class-->

<div id="slider2" class="sliderwrapper">

<div class="contentdiv">
Content 1 Here.
</div>

<div class="contentdiv">
Content 2 Here. <br />
<p></p><a href="javascript:featuredcontentslider.jumpTo('slider2', 1)">Go back to 1st slide</a></p>
</div>

<div class="contentdiv">
Content 3 Here.
</div>

</div>

<div id="paginate-slider2" class="pagination">

<a href="#" class="toc">First Page</a> <a href="#" class="toc anotherclass">Second Page</a> <a href="#" class="toc">Third Page</a> <a href="#" class="prev" style="margin-left: 10px"><</a> <a href="#" class="next">></a>

</div>

<script type="text/javascript">

featuredcontentslider.init({
    id: "slider2",  //id of main slider DIV
    contentsource: ["inline", ""],  //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
    toc: "markup",  //Valid values: "#increment", "markup", ["label1", "label2", etc]
    nextprev: ["Previous", "Next"],  //labels for "prev" and "next" links. Set to "" to hide.
    revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
    enablefade: [true, 0.2],  //[true/false, fadedegree]
    autorotate: [false, 3000],  //[true/false, pausetime]
    onChange: function(previndex, curindex){  //event handler fired whenever script changes slide
        //previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
        //curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
    }
})

</script>




Co prawda nie było w example tego efektu po najeździe myszką, ale dalej jest to opisane, a po za tym z kodu strony wziąłem sobie przykład tego z najazdem.\

Efekt:

Przykład

Nie wiem czy to tym samym sposobem, nie znam sie na JS, ale działa. A opisałem - bo moze komus się przyda? smile.gif


Tak czy inaczej dzięki smile.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.