Forum PHP.pl > [HTML][JavaScript]Graficzne menu typu radio button

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [HTML][JavaScript]Graficzne menu typu radio button

necro

9.08.2008, 14:59:54

Witam wszystkich.

Od dłuższego czasu męczę się z menu wyboru typu szukania.
Do rzeczy.

Wcześniej miałem wyszukiwanie plików w ten sposób:

Kod

<form action="" method="post" id="search">

             <input type="radio" name="type" value="mp3" id="mp3" checked><label for="mp3"><font size="2">{$lang.mp3}</font></label>
             <input type="radio" name="type" value="video" id="video"><label for="video"><font size="2">{$lang.video}</font></label>
             <input type="radio" name="type" value="torrent" id="torrent"><label for="torrent"><font size="2">{$lang.torrents}</font></label>
             <input type="radio" name="type" value="lyrics" id="lyrics"><label for="lyrics"><font size="2">{$lang.lyrics}</font></label>
             <input type="radio" name="type" value="price" id="price"><label for="price"><font size="2">{$lang.prices}</font></label>
             <input type="radio" name="type" value="auctions" id="auctions"><label for="auctions"><font size="2">{$lang.auctions}</font></label>
             <input type="radio" name="type" value="wikipedia" id="wikipedia"><label for="wikipedia"><font size="2">{$lang.wikipedia}</font></label>
             <input type="radio" name="type" value="images" id="images"><label for="images"><font size="2">{$lang.images}</font></label>
<input name="name" type="text" class="border" />

<input name="submit" type="submit" class="formborder" value="{$lang.search}" />
</form>

Postanowiłem zamienić je na graficzne buttony:

Kod

<form action="" method="post" id="search">
             <ul>
                 <li><a href="#">{$lang.mp3}</a></li>
                 <li><a class="current" href="#">{$lang.video}</a></li>
                 <li><a href="#">{$lang.torrents}</a></li>
                 <li><a href="#">{$lang.lyrics}</a></li>
                 <li><a href="#">{$lang.wikipedia}</a></li>
                 <li><a href="#">{$lang.images}</a></li>

             </ul>
             <div id="search1">

                     <p><input type="text" name="name" class="search1" /> <input type="submit" name="submit" value="{$lang.search}" class="button" /></p>
                 </form>

Tutaj można zobaczyć online: http://193.59.120.51/ nie wiem jak to wszystko przenieść na grafikę oraz żeby po wybraniu przycisk się podświetlił tak jak "Filmiki".
Jeżeli ktoś wie jak mi pomóc, to bardzo był bym wdzięczny.

Dziękuje i pozdrawiam

macza

9.08.2008, 15:23:41

[HTML] pobierz, plaintext 
<form action="" method="post" id="search">
             <ul>    
                 <li><a href="#" id="lang1" onClick="zaznacz(1)">{$lang.mp3}</a></li>
                 <li><a class="current" href="#" id="lang2" onClick="zaznacz(2)">{$lang.video}</a></li>
                 <li><a href="#" id="lang3" onClick="zaznacz(3)">{$lang.torrents}</a></li>
                 ... itd
             </ul>
             <div id="search1">
 
                     <p><input type="text" name="name" class="search1" /> <input type="submit" name="submit" value="{$lang.search}" class="button" /></p>
                 </form>
[HTML] pobierz, plaintext

[HTML] pobierz, plaintext 
Java
 
function zaznacz(id){
 //odznaczamy wszytskie - mozna uzyc for, while
 document.getElementById('lang1').className='';
 document.getElementById('lang2').className='';
 document.getElementById('lang3').className='';
 //zaznaczamy
 document.getElementById('lang'+id).className='current';
}
[HTML] pobierz, plaintext

widzę na stronie, że sobie poradziłeś

necro

9.08.2008, 15:39:24

Witam.

Ok mniej więcej mi pomogłeś (bardzo dużo), tylko jak zrobić żeby teraz wyszukiwało mp3, filmiki? tzn podawać wartość tak jak to było w przypadku input radio?

Pozdrawiam

macza

9.08.2008, 15:46:44

Tworzysz pole hidden:
<input type="hidden" name="lang" id="pole" /> //najlepiej używać pola przez ID

Teraz JS

[HTML] pobierz, plaintext 
function zaznacz(id){
//odznaczamy wszytskie - mozna uzyc for, while
document.getElementById('lang1').className='';
document.getElementById('lang2').className='';
document.getElementById('lang3').className='';
//zaznaczamy
document.getElementById('lang'+id).className='current';
//przekazujemy parametr
document.getElementById('pole').value=id; //dajemy numer (potem w php mozesz sobie zmienic (case) 1=mp3, 2=filmy itd
}
[HTML] pobierz, plaintext

Aby zobaczyc jak to dziala zamiast hidden daj TEXT i bedziesz 'na żywo' widział zmiany

Dodatkowo na końcu funkcji możesz dodać:
document.getElementById(_nazwa_pola_wyszukiwania_).focus(); //automatycznie zaznaczy pole do wpisywania

necro

9.08.2008, 15:55:04

Wygląda że jestem za tępy

Dałem tak:

Kod

<li><a href="#" id="lang1" onClick="zaznacz(1)">{$lang.mp3}</a></li>
<li><a href="#" id="lang2" onClick="zaznacz(2)">{$lang.video}</a></li>
<li><a href="#" id="lang3" onClick="zaznacz(3)">{$lang.torrents}</a></li>
<li><a href="#" id="lang4" onClick="zaznacz(4)">{$lang.lyrics}</a></li>
<li><a href="#" id="lang5" onClick="zaznacz(5)">{$lang.wikipedia}</a></li>
<li><a href="#" id="lang6" onClick="zaznacz(6)">{$lang.images}</a></li>

A JS:

Kod

function zaznacz(id){
//odznaczamy wszytskie - mozna uzyc for, while
document.getElementById('lang1').className='';
document.getElementById('lang2').className='';
document.getElementById('lang3').className='';
document.getElementById('lang4').className='';
document.getElementById('lang5').className='';
document.getElementById('lang6').className='';
//zaznaczamy
document.getElementById('lang'+id).className='current';
//przekazujemy parametr
document.getElementById('lang1').value=mp3;
document.getElementById('lang2').value=video;
document.getElementById('lang3').value=torrent;
document.getElementById('lang4').value=lyrics;
document.getElementById('lang5').value=wikipedia;
document.getElementById('lang6').value=images;
}

I coś nie działa

Zamiast np. search-mp3,tiesto,1.html jest search-,tiesto,1.html

macza

9.08.2008, 16:05:55

document.getElementById('lang1').value="mp3"; //stringi umieszczamy w ""

po 2... nie dajesz elementom lang1, 2, 3... value bo to są linki.

po 3... <script>initKatalogMP3euSearch('search','altRadioOn','altRadioOff');</script> to odpowiada u Ciebie za typ wyszukiwania...

więc...
zamiast <script>...</script> daj:
<input type="hidden" value="" name="search" id="search" />

teraz przejdź do javy:
zamiast:

CODE

document.getElementById('lang1').value=mp3;
document.getElementById('lang2').value=video;
document.getElementById('lang3').value=torrent;
document.getElementById('lang4').value=lyrics;
document.getElementById('lang5').value=wikipedia;
document.getElementById('lang6').value=images;

daj:

CODE

if(id==1){ wart="mp3"; }
if(id==2){ wart="video"; } //itd...

potem przekazujemy do pola SEARCH
document.getElementById('search').value=wart;
i już 

necro

9.08.2008, 16:29:24

Naprawdę tego nie kumam, powiedz mi czy dobrze już mam zrobione:

Menu:

Kod

<form action="" method="post" id="search">
            <ul>

<li><a href="#" name="type" id="lang1" onClick="zaznacz(1)">{$lang.mp3}</a></li>
<li><a href="#" name="type" id="lang2" onClick="zaznacz(2)">{$lang.video}</a></li>
<li><a href="#" name="type" id="lang3" onClick="zaznacz(3)">{$lang.torrents}</a></li>
<li><a href="#" name="type" id="lang4" onClick="zaznacz(4)">{$lang.lyrics}</a></li>
<li><a href="#" name="type" id="lang5" onClick="zaznacz(5)">{$lang.wikipedia}</a></li>
<li><a href="#" name="type" id="lang6" onClick="zaznacz(6)">{$lang.images}</a></li>


            </ul>
            <div id="search1">

                    <p><input type="text" name="name" class="search1" /> <input type="submit" name="submit" value="{$lang.search}" class="button" /></p>
                <input type="hidden" value="" name="search" id="search" />
                </form>

JS:

Kod

macza

9.08.2008, 16:42:35

Ty dobrze kminisz ale wdarł się błąd, ponieważ twój FORM ma id="search" i pole ma to samo id,
zmień pole <input type="hidden" value="" name="search" id="searched" />

no i w js musisz też zmienić:
document.getElementById('searched').value=wart;

necro

9.08.2008, 16:46:17

Zmieniłem, ale dalej nie wyszukuje. Nie chce się poddawać ale chyba nie będę miał wyboru

PS. Dzięki za pomoc

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.