Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [CSS] nieaktywny button
comanderv
post 7.12.2008, 22:43:01
Post #1





Grupa: Zarejestrowani
Postów: 87
Pomógł: 1
Dołączył: 2.12.2008

Ostrzeżenie: (0%)
-----


witam,

mam pytanie, w domyslych wzorach na <input type="button"> mam wypukly przycisk dla aktywnego przycisku i wklesly raczej plaski dla nieaktywnego gdy juz "dalej kliknac nie mozemy", moje pytanie: jak zdefiniowac styl dla nieaktywnego przycisku ?

na klasie button .inactive? khhhh...

poprostu za button mam graficzke (tez wstawiona nieumiejetnie bo jako tlo buttona o value=" " <--puste pole) i chce wiedziec kiedy skoncza mi sie opcje klikania tongue.gif
Go to the top of the page
+Quote Post
erix
post 7.12.2008, 22:45:11
Post #2





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów




Musiałbyś zrobić regułę dla selektora z atrybutem (jeśli disabled; sprawdź w specyfikacji, bo jest ładnie opisane).

Ale IE tego nie zrozumie, więc podejrzewam, że będziesz musiał albo napisać behavior, albo posłużyć się jakimś skryptem do tego celu. Eventualnie expression, który byłby chyba tu najlepszy.

Ten post edytował erix 7.12.2008, 22:45:27


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

ZCE :: Pisząc PW załączaj LINK DO TEMATU i TYLKO w sprawach moderacji :: jakiś błąd - a TREŚĆ BŁĘDU? :: nie ponaglaj z odpowiedzią via PW!
Go to the top of the page
+Quote Post
comanderv
post 8.12.2008, 14:47:36
Post #3





Grupa: Zarejestrowani
Postów: 87
Pomógł: 1
Dołączył: 2.12.2008

Ostrzeżenie: (0%)
-----


no dobra zdzierze to co mam... teraz inne pytanie ;p

Kod
'<input type="checkbox" name="auto"' + (auto ? ' checked="checked"' : '') + ' id="' + this.id + '__auto" onclick="' + this.id + '.przewin()" onkeypress="' + this.id + '.przewin()" style="vertical-align: middle" /> <label for="' + this.id + '__auto">Pokaz slajdów</label>'


mam input checkboxa ktory po jego zaznaczeniu wywoluje funkcje przewin... gdy przerobile kod na:
Kod
'<input type="button" name="auto"'  + ' id="' + this.id + '__auto" onclick="' + this.id + '.przewin()" onkeypress="' + this.id + '.przewin()" style="vertical-align: middle"  class="button"/>'

to poprostu juz nie wywoluje funkcji jaka powinien... calosc jest w document.write(' .... <--dlatego tak kod wyzej wyglada...

jakis pomysl czy trzeba cala funkcje dla podgladu wrzucic ?

aaa i jeszcze jedno... jak sprawdzic czy checkbox jest zaznaczony ?

bo chce poprostu obsluzyc checkboxa ze jesli jest zaznaczony to zmieniam mu tlo :E

znalazlem na necie jakas pseuda JSowska funckje onCheckboxChecked stosowana jak onClicki i reszta...ale nie ani wzmianki o niej na polskich stronach wiec cos mi tu smiedzi...
Go to the top of the page
+Quote Post
erix
post 8.12.2008, 17:14:42
Post #4





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów




Jak masz zadeklarowaną funkcję przewin? Bo mam wątpliwości co do tego, w jaki sposób przekazujesz obiekt do funkcji.


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

ZCE :: Pisząc PW załączaj LINK DO TEMATU i TYLKO w sprawach moderacji :: jakiś błąd - a TREŚĆ BŁĘDU? :: nie ponaglaj z odpowiedzią via PW!
Go to the top of the page
+Quote Post
comanderv
post 8.12.2008, 17:43:31
Post #5





Grupa: Zarejestrowani
Postów: 87
Pomógł: 1
Dołączył: 2.12.2008

Ostrzeżenie: (0%)
-----


Kod
/**
* @author Sławomir Kokłowski {@link http://www.kurshtml.boo.pl}
* @copyright NIE usuwaj tego komentarza! (Do NOT remove this comment!)
*/
function change(){
         if (f.elements['auto'].checked) this.sciezka= 'play.jpeg';
        else this.sciezka= 'pause.jpeg';
}
function PrzegladarkaZdjec(id, zdjecia)
{
    this.czas = 2;    // czas przejścia w trybie pokazu slajdów [sek]
    
    
    this.id = id;
    this.zdjecia = zdjecia;
    var timerID = null;
    
    this.wyswietl = function(nr)
    {
        clearTimeout(timerID);        
        var f = document.getElementById(this.id);
        
        if (nr < 0) nr = f.elements['zdjecia'].options.length - 1;
        else if (nr > f.elements['zdjecia'].options.length - 1) nr = 0;
        
        if (nr == 0)
        {
            f.elements['poczatek'].disabled = true;
            f.elements['wstecz'].disabled = true;
            f.elements['dalej'].disabled = false;
            f.elements['koniec'].disabled = false;
        }
        else if (nr == f.elements['zdjecia'].options.length - 1)
        {
            f.elements['poczatek'].disabled = false;
            f.elements['wstecz'].disabled = false;
            f.elements['dalej'].disabled = true;
            f.elements['koniec'].disabled = true;
        }
        else
        {
            f.elements['poczatek'].disabled = false;
            f.elements['wstecz'].disabled = false;
            f.elements['dalej'].disabled = false;
            f.elements['koniec'].disabled = false;
        }
        
        f.elements['zdjecia'].selectedIndex = nr;
        document.getElementById(this.id + '__img').src = f.elements['zdjecia'].options[nr].value;
        document.getElementById(this.id + '__opis').innerHTML = typeof this.zdjecia[nr][2] != 'undefined' ? this.zdjecia[nr][2] : '';
        if (f.elements['auto'].checked) this.przewin();
    }
    
    this.przewin = function()
    {
        clearTimeout(timerID);
        var f = document.getElementById(this.id);
        if (f.elements['auto'].checked)
        {
            if (document.getElementById(this.id + '__img').complete) timerID = setTimeout(this.id + '.wyswietl(' + (f.elements['zdjecia'].selectedIndex < f.elements['zdjecia'].options.length - 1 ? f.elements['zdjecia'].selectedIndex + 1 : 0) + ')', this.czas * 1000);
            else timerID = setTimeout(this.id + '.przewin()', 500);
        }
    }
    
    var matches = window.location.search.match(new RegExp('[\?&]' + this.id + '=(-?[0-9]+)(&|$)'));
    if (matches && typeof matches[1] != 'undefined')
    {
        var auto = matches[1].substring(0, 1) == '-' ? true : false;
        matches[1] = parseInt(matches[1]);
        var nr = Math.abs(matches[1]);
        if (nr < 0) nr = 0;
        else if (nr > zdjecia.length - 1) nr = zdjecia.length - 1;
    }
    else
    {
        var nr = 0;
        var auto = false;
    }
    
    for (var i = 0, html = ''; i < zdjecia.length; i++)
    {
        html += '<option value="' + zdjecia[i][0] + '"' + (i == nr ? ' selected="selected"' : '') + '>' + zdjecia[i][1] + '</option>';
    }


Kod
    document.write('<center><table class="przeglad" border="1px" width="500"><tr><td>' +
        '<form action="javascript:void(0)" id="' + this.id + '" class="zdjecia">' +
            
            '<div class="zdjecia_menu">' +
            
            /* POLE LISTY */
                '<select name="zdjecia" onchange="' + this.id + '.wyswietl(this.selectedIndex)">' +
                    html +
                '</select> <br>' +
                
    /* BUTTON POCZATKA */        
                '<input type="button" name="poczatek" class="button4"' + (nr == 0 ? ' disabled="disabled"' : '') + ' title="Początek" onclick="' + this.id + '.wyswietl(0)" onkeypress="' + this.id + '.wyswietl(0)" />' +
                
    /* BUTTON WSTECZ */            
                '<input type="button" class="button" name="wstecz" value="   "' + (nr == 0 ? ' disabled="disabled"' : '') + ' title="Wstecz" onclick="' + this.id + '.wyswietl(this.form.elements[\'zdjecia\'].selectedIndex - 1)" onkeypress="' + this.id + '.wyswietl(this.form.elements[\'zdjecia\'].selectedIndex - 1)" />' +
                
                    /* CHECKBOX POKAZU SLAJDOW */
                '<input type="checkbox"  name="auto"' + (auto ? ' ' : '') + ' id="' + this.id + '__auto" onclick="' + this.id + '.przewin()" onkeypress="' + this.id + '.przewin()" style="vertical-align: middle" /> <label style="position: relative; top: 0px" for="' + this.id
                + '__auto" >Pokaz</label>' +

    /* BUTTON DALEJ */            
                '<input type="button" name="dalej" class="button2"' + (nr == zdjecia.length - 1 ? ' disabled="disabled"' : '') + ' title="Dalej" onclick="' + this.id + '.wyswietl(this.form.elements[\'zdjecia\'].selectedIndex + 1)" onkeypress="' + this.id + '.wyswietl(this.form.elements[\'zdjecia\'].selectedIndex + 1)" />' +
                
    /* BUTTON NA KONIEC */        
                '<input type="button" name="koniec" class="button3"' + (nr == zdjecia.length - 1 ? ' disabled="disabled"' : '') + ' title="Koniec" onclick="' + this.id + '.wyswietl(this.form.elements[\'zdjecia\'].options.length - 1)" onkeypress="' + this.id + '.wyswietl(this.form.elements[\'zdjecia\'].options.length - 1)" />' +

            '</div>' + '</td></tr>' +
            
    /* ZDJECIE */
            '<tr><td height="500">' + '<img id="' + this.id + '__img" src="' + zdjecia[nr][0] + '" alt="" title="Dalej..." onclick="' + this.id + '.wyswietl(document.getElementById(\'' + this.id + '\').elements[\'zdjecia\'].selectedIndex + 1)" width="500" />' + '</td></tr><tr><td>' +
    
    /* OPIS */        
            '<div class="zdjecia_opis" id="' + this.id + '__opis" style="text-align: center; margin-right: 5px; margin-left: 5px; margin top: 2px;">' + (typeof zdjecia[nr][2] != 'undefined' ? zdjecia[nr][2]: '') + '</div>' +
        '</form>' + '</td></tr>'+ '</table></center>'
    );
    
    if (auto) this.przewin();
}


łot i cala historyja...za checkboxa chcialem wstawic buttona i podstawic grafike jako tlo w stylach ale element z podstawienie buttona nie wypalil... moze chcialoby sie komus zmodyfikowac ten kod dla wiekszej skutecznosci przejrzystosci i mniej wiecej pod to co mi by sie marzylo ? <maslane oczy>

chce ladne buttony a nie kombinowane (style="background-image: url (bla bla bla)")... hmm

piszac probowalem mam na mysli podmienialem za checkboxa buttona i zmienialem pola checked na disabled=false itd... mniej wiecej zauwazylem ze kod jest pod tego checkboxa napisany... ale pasowaloby mi sie go pozbyc haha.gifd
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 29.06.2025 - 12:10