[SOLVED] FormBuilder - klasa CSS bezpośrednio dla input'ów? Topic is solved

[nms007]

Zauważyłem (moim zdaniem) bardzo irytującą rzecz w FB.
A mianowicie nie mam pojęcia dodać klasę CSS (podaną podczas tworzenia nowego pola) bezpośrednio do tego pola np.

Code: Select all

<div><input type="text" class="moja_nazwa_klasy" ... /></div>

bo na chwilę obecną FB dodaje te klasy, ale do DIV'a (lub innego znacznika) w którym zawierają się input'y:

Code: Select all

<div class="moja_nazwa_klasy"><input type="text" ... /></div>

oczywiście w szablonie za wyświetlenie klasy odpowiada: {$entry->css_class}, ale ni cholery nie wiem jak wrzucić to do inputa

jakieś pomysły??

[maranc]

Nie wiem w czym masz wielki problem.... Kilka razy poruszałem ten temat na forach EN, ale w skrócie:
1. Tworząc klasę bezpośrednio dla danego pola FB działa dokładnie tak jak opisałeś, żeby osiągnąć efekt stylizacji np. pola input text w arkuszu stylów dodajesz:

.twojaklasa input[type="text"]
{
....twoje kodowanie pola input np.
border: 1px solid #CCC;
background-color: #F0F0F0;
}

Jeżeli zaś dodatkowo dodasz:
.twojaklasa {
..... }

to możesz niezależnie formatować np. label pola input (wielkość i kolor czcionki), zaś w inny sposób samo pole input (patrz wyżej).

Metoda ta jest dobra, jeżeli chcesz sformatować pojedyncze pole typu input, textarea lub dowolne inne w formularzu. Szczerze nie polecam specjalnie tej metody. Zakładając, że masz np. 50 formularzy na stronie przy każdym z nich będziesz musiał 50 razy nadawać klasę dla jakiegoś pola, które ma mieć zaplanowany przez Ciebie wygląd.

2. Metoda 2 - Wszystkie możliwe formularze (FB, Self Registration, itd.) posiadają z góry zdefiniowane klasy typów pól, używanych w formularzach. I tak np. każde nowe pole input typu text ma klasę css: .cms_textfield, przycisk button to .cms_button. Jeżeli chcesz, możesz w bardzo łatwy sposób osiągnąć ten sam efekt dla wszystkich pól typu input, select, textarea formatując je w css, np:

.cms_textfield {
...... }

.cms_button {
..........}

No i tak dalej...... Wada lub jak kto woli plus tej metody - jeżeli zdefiniujesz klasę . cms_textfield w css wówczas w każdym formularzu będzie ona dokładnie wyglądać tak samo, np. podasz długość 200px; to zarówno w Form Builder, Self Registration, Company Directory itd pole te bedzie dokładnie miało 200px.


Metoda 3 - często jej używam ze względu na wadę metody 2.

Tworząc formularz zawsze wstawiam go w div z okreslonym ID, np.

{Formbuider cos tam coś tam}

Jeżeli wszystkie parametry określonych typów pól input, select, itd mi pasują to nie ma problemu. Co stanie się jednak, jeżeli dla .cms_textfield nadaliśmy w naszym arkuszu stylów np. width: 250px i ładnie nam to pasowało w 10 formularzach, a tu nagle chcemy mieć pole typu text o długości 120px? Proste, możesz w arkuszu stylu dodać coś takiego:

div#moj_formularz .cms_textfield {
width: 120px;
}
I zrobione.. Pole o klasie .cms_textfield w tym konkretnym formularzu będzie miało długość 120px.

Ten sam efekt możesz osiągnąć podobnie, ale z typem pola:

div#moj_formularz input[type="text"] {
width: 120px;
}.
Decyzja co do wyboru należy do Ciebie. Z mojego krótkiego wywodu, powinieneś dojść do wniosku, iż masz w zakresie formatowania formularzy całą masę możliwości ich formatowania.


Jeżeli coś dalej nie jest jasne, pisz.

Marek A.

[nms007]

Dzięki za info, ale nie o to chodziło. Otóż, bardzo dobrze znam zasady stylizowania pól formularzy i z tym absolutnie nie ma problemów 

Moje pytanie dotyczyło bezpośrednio skryptów jQuery do walidacji pól formularzy - weźmy np. skrypt "Ketchup Plugin" (http://demos.usejquery.com/ketchup-plugin/). Do każdego pola dodaje się odpowiednią klasę (required, minlength, email itp.) np:

Code: Select all

<input type="text" id="ex1_username" class="validate(required, username)" />

i w zależności od tejże klasy skrypt sprawdza dane pole.

[maranc]

Są dwa sposoby - albo zmieniasz klasę w action.admin.php albo użyj funkcji replace, podaje przykład na przykładzie modułu Company Directory (wywołanie formularza formstart):

{$formstart|replace:'class="cms_form"':'class="mojaklasa" onsubmit="return formCheck(this);"'}

Adekwatnie musisz zrobić to w podobny sposób ale dla pola input (w moim przykładzie klasa cms_form została zastąpiona klasą "mojaklasa" oraz dodatkowo dodano do formularza ackcję onsubmit="return formCheck(this);")

Mam nadzieję, ze Ci to pomoże.

Marek A.

[nms007]

dzięki za wskazówkę - na pewno się przyda 

i tak jeszcze na koniec - czy da się osiągnąć powyższy efekt w sposób automatyczny?

tzn. podając nazwę klasy w adminie ("Klasa CSS dla tego pola:") chciałbym ją mieć automatycznie przypisaną do tegoż inputa.
Bo załóżmy że będę miał kilka pól (text, textarea, select itd.), i dla nich będą wykorzystywane różne typy walidacji, a co za tym idzie, muszą mieć różne klasy CSS np.:

Code: Select all

<input type="text" class="required" />
<input type="text" class="required_digits " />
<input type="text" class="required_email" />
<textarea class="required"></textarea>

etc..

da się?

[optart]

Da -
jQuery("#formID").addClass(function() {
return $(this).parent('div').attr('class')});

[numer9]

Niezłe wskazówki, też sobie je zanotowałem

A jak ludzie pomogli, to prośba do autora wątku o zmianę tytułu na tytuł [SOLVED], żeby było porządnie i czytelnie