Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] nieaktywny button
Forum PHP.pl > Forum > Przedszkole
comanderv
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
erix
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.
comanderv
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...
erix
Jak masz zadeklarowaną funkcję przewin? Bo mam wątpliwości co do tego, w jaki sposób przekazujesz obiekt do funkcji.
comanderv
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
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.