GoldenLine
Zaloguj się
Kamil Kowal

Kamil Kowal Student,
Politechnika
Wrocławska

Temat: Nietypowe pole formularza

Nietypowe pole formularza wielokrotnego wyboru. Kazdy kwadracik odpowiada ustalonemu rozmiarowi. Jak sie do tego zabrac, czy wogole jest to mozliwe do wykonania (bez flasha)?

Obrazek
Link do wypowiedziLink

konto usunięte

Temat: Nietypowe pole formularza

Jak dla mnie to wyrenderować to możesz za pomocą prostej tabelki, a zaznaczanie, zbieranie wartości oraz ewentualną walidację za pomocą js/jQuery.
Link do wypowiedziLink
Przemek Szalko

Przemek Szalko iOS Developer + Full
Stack Developer

Temat: Nietypowe pole formularza

Można też wrenderować 7x14 tagów: <label><input type="checkbox" /></label>

Ostylować tak żeby układały się jak na rysunku i tag <label> miał rozmiar jak komórka. Wtedy klikając w label od razu zaznacza Ci się pole.
Link do wypowiedziLink

konto usunięte

Temat: Nietypowe pole formularza

Przemek Szalko:
Można też wrenderować 7x14 tagów: <label><input
> type="checkbox" /></label>

Ostylować tak żeby układały się jak na rysunku i tag <label> miał rozmiar jak komórka. Wtedy klikając w label od razu zaznacza Ci się pole.
http://riddle.jogger.pl/2006/10/10/rece-precz-od-stylo...
;)

pomysł z tabelką jest dobry
Link do wypowiedziLink

konto usunięte

Temat: Nietypowe pole formularza

Input może być ukryty (i tak zostanie przekazany w formularzu), więc nie trzeba go w ogóle stylować, jedynie otaczający go label.
Link do wypowiedziLink
Michał Ławicki

Michał Ławicki dostawca zadowolenia

Temat: Nietypowe pole formularza

Kamil Brenk:
http://riddle.jogger.pl/2006/10/10/rece-precz-od-stylo...
;)
Starszego postu już chyba nie dało się znaleźć :) Trochę JS i wszystko można stylować :)
Link do wypowiedziLink

konto usunięte

Temat: Nietypowe pole formularza

Przy pomocy JS można podmieniać wygląd elementów formularzy i to jest ok, ale samych formularzy nie styluje się i jest to dogmat jak dla mnie, więc popieram post Kamila.
Link do wypowiedziLink
Tomasz Zadora

Tomasz Zadora programuję

Temat: Nietypowe pole formularza

Dodam tylko, że dane można wysłać przez JSON "POST-em".

Czyli generujemy dwie tablice:

- jedna to HTML gdzie każdy TD ma id z jakimś prefiksem (np. "clr_" i mamy "clr_32_96", "clr_32_128", etc.) i jest określonej klasy albo ma odpowiedni atrybut rel
- druga to tablica JS

przechwycenie zdarzenia onclick na elementach td (selector przez class lub rel) które spowoduje zmianę koloru on/off i odpowiednią zmianę wartości w tablic js.

Później już tylko odpowiedni przycisk "wyślij" który wyśle dane JSONEM lub ewentualnie przekaże te dane do jakiegoś ukrytego pola formularza i później wyśle cały formularz.
Link do wypowiedziLink
Przemek Szalko

Przemek Szalko iOS Developer + Full
Stack Developer

Temat: Nietypowe pole formularza

Panowie Kamilowie ;)
Proszę przeczytać post Riddle ze zrozumieniem. Riddle odnosi się do skryptów JS'owych które podmieniają domyślne elementy formularza na ich wyrenderowane, przebajerowane, htmlowe odpowiedniki.

W tym przypadku input to jest natywny element przeglądarki, dodając do tego label zwiększamy obszar w który może kliknąć użytkownik (nie musi celować w malutki inpucik). Ostylowanie sprowadza się dododania width+height+float, co działa w każdej przeglądarce. Zamiast float można te labelki wsadzić też w tabelę.

Dla maksymalnego upodobnienia formularza do projektu można jeszcze ukryć inputy (display:none).

Nie wciskajcie nikomu tutaj, że to jest nieużyteczne. Taki formularz nie rozsypie się nigdzie, przy odpowiednim oetykietowaniu labelek jest do wypełnienia nawet w przeglądarce tekstowej.
Najlepsze jest to że formularz działa bez linijki javascriptu.
Link do wypowiedziLink

konto usunięte

Temat: Nietypowe pole formularza

Dokładnie tak zrozumiałem i podzielam Twój post. O js pisałem odnosząc się do pozostałych pomysłów :)
Link do wypowiedziLink

konto usunięte

Temat: Nietypowe pole formularza

Przemek, masz rację ;) Rano byłem jeszcze pijany (juwenalia), więc po prostu źle zrozumiałem :D
Tomasz Zadora:
przechwycenie zdarzenia onclick na elementach td (selector przez class lub rel)
http://dev.w3.org/html5/spec/elements.html#embedding-c... ;)
Link do wypowiedziLink
Wojciech Małota

Wojciech Małota Programista

Temat: Nietypowe pole formularza

Przemek Szalko:
Najlepsze jest to że formularz działa bez linijki javascriptu.

A zmiana koloru zaznaczonej labelki? ;-)
Link do wypowiedziLink

konto usunięte

Temat: Nietypowe pole formularza

Wojciech Małota:
A zmiana koloru zaznaczonej labelki? ;-)

To myślę że dałoby się zrobić jakoś z pseudoklasą :checked dla inputa wewnątrz labela, ale teraz tylko fantazjuję, nie testowałem.
Link do wypowiedziLink

konto usunięte

Temat: Nietypowe pole formularza

Kamil Borkowski:
Wojciech Małota:
A zmiana koloru zaznaczonej labelki? ;-)

To myślę że dałoby się zrobić jakoś z pseudoklasą :checked dla inputa wewnątrz labela, ale teraz tylko fantazjuję, nie testowałem.
dałoby radę z :target - do każdego labela dodać link ustawiający kotwicę ;)
Link do wypowiedziLink
Tomasz Zadora

Tomasz Zadora programuję

Temat: Nietypowe pole formularza

Kamil Brenk:
[...]
http://dev.w3.org/html5/spec/elements.html#embedding-c... ;)

No fajne... zawsze lepiej zastąpić JS, CSS-em - i "data-" to jest na pewno o wiele lepszy sposób przechowywania różnych rzeczy powiązanych z elementami DOM niż triki z id :)

Trzeba tylko jeszcze trochę poczekać aż HTML5 w pełni stanie się standardem w przeglądarkach w tym sensie, że wszystkie wersje przeglądarek używane przez większość użytkowników będą implementować w taki sam sposób większość standardu HTML5.
Link do wypowiedziLink

konto usunięte

Temat: Nietypowe pole formularza

Tomasz Zadora:
Kamil Brenk:
[...]
http://dev.w3.org/html5/spec/elements.html#embedding-c... ;)

No fajne... zawsze lepiej zastąpić JS, CSS-em - i "data-" to jest na pewno o wiele lepszy sposób przechowywania różnych rzeczy powiązanych z elementami DOM niż triki z id :)

Trzeba tylko jeszcze trochę poczekać aż HTML5 w pełni stanie się standardem w przeglądarkach w tym sensie, że wszystkie wersje przeglądarek używane przez większość użytkowników będą implementować w taki sam sposób większość standardu HTML5.
Akurat atrybut data-* działa na każdej przeglądarce, więc można spokojnie tego używać ;)

Co do rozwoju HTML5 i szybkości implementacji w przeglądarkach, nie do końca się zgodzę. To jak szybko dane funkcjonalności zostaną wdrożone do przeglądarek (wypierając przy tym starocie) zależy od nas - webdeveloperów. User widząc rozlatują się stronę na swoim ukochanym IE6 wraz z informacją "zmień przeglądarkę na lepszą" zmotywuje się i zainstaluje nowszą przeglądarkę.

Przy poważniejszych projektach oczywiście to nie przejdzie - wtedy stosujemy HTML5 Cross Browser Polyfills i dalej wykorzystujemy nowości z tą niekorzyścią dla staroci, że strona jest bardziej obciążona (co też ich powinno zmotywować do zmian).

Oczywiście to odnosi się głównie do Internetu, bo w korporacyjnych intranetach nie ma opcji na przepisanie oprogramowania na lepsze przeglądarki.
Link do wypowiedziLink
Tomasz Zadora

Tomasz Zadora programuję

Temat: Nietypowe pole formularza

Na razie jadę na XHTML, z przesiadką na HTML5 poczekam jeszcze co najmniej rok. Tu jest też kwestia urządzeń przenośnych / androida - wiesz może jak to tam wygląda ?
Link do wypowiedziLink

konto usunięte

Temat: Nietypowe pole formularza

Tomasz Zadora:
Na razie jadę na XHTML, z przesiadką na HTML5 poczekam jeszcze co najmniej rok. Tu jest też kwestia urządzeń przenośnych / androida - wiesz może jak to tam wygląda ?
Zależy o co konkretnie pytasz. Jeśli o atrybut data-* to zadziała nawet na IE6; przynajmniej jeśli rozwiążesz to na wzór:

var div = document.getElementById("div");

var dupa = div.getAttribute("data-dupa");


Co do reszty CSS3 & HTML5 na mobilach, warto dodać do czytnika:
http://www.quirksmode.org/blog/
Link do wypowiedziLink

konto usunięte

Temat: Nietypowe pole formularza

Problem nie problem, w jednym projekcie mamy kalendarz który możesz sobie "pokolorować" np oznaczając jakiś dzień jako ważny itp.

1. Robisz sobie div a wewnątrz mały divy z odpowiednimi rozmiarami. Np:


<div id="list">

    <div title="294:24"></div>

    <div title="88:55"></div>

    ...

</div>


2. Gdzieś tam wcześniej wybierasz kolor i zapisujesz go do zmiennej JS. Np "var color". Sam kolor można sprawdzić regexpem [0-9a-f]{6} dla przykładu.

3. Później tylko np z użyciem jQuery:


var color = '660000'; // ciemna czerwień, to Twój kolor



$(document).ready(function(){

    // Usuwasz kolor z wszystkich elementow jezeli ma byc tylko 1 na raz

    $('#list > div').click(function(){ 

        $('#list > div').each(function(index, item){ 

            $(item).css('backgrnound', 'none'); });

        });

        // Zmieniamy kolor

        $(this).css('background', '#'+color);

        // Robimy alert ktory podaje rozmiar pola ktory to byl zaszyty w title

        alert('POKOLOROWALEM '+$(this).attr('title'));

    });

});


Nic nie stoi na przeszkodzie żeby ajaxem taką zmianę puścić gdzieś albo zapisać rozmiar do pola hidden formularza czy cokolwiek innego.

Jeżeli dobrze zrozumiałem intencjeDariusz Półtorak edytował(a) ten post dnia 23.05.11 o godzinie 17:21
Link do wypowiedziLink
Michał Sznurawa

Michał Sznurawa Scala Developer

Temat: Nietypowe pole formularza

Ja to dałbym dwa selecty (ew. jakiś slidery). Kolor chyba się gdzieś indziej wybiera, i tylko jedna komórka ma być zaznaczana. Dużo mniej miejsca by to zajmowało i sprowadzone to by zostało do typowego przypadku.
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy


Następna dyskusja:

Zabezpieczenie formularza p...




Wyślij zaproszenie do
Anuluj