• twitter image
  • facebook image
  • youtube image
  • linkedin image
Language: CMS Made Simple Czech CMS Made Simple France CMS Made Simple Spain CMS Made Simple Hungary CMS Made Simple Russia CMS Made Simple Netherlands

All times are UTC




Post new topic Reply to topic  [ 7 posts ] 
Author Message
 Post subject: [SOLVED] FormBuilder - klasa CSS bezpośrednio dla input'ów?
PostPosted: Wed Aug 18, 2010 9:43 pm 
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.
\$1:
<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:

\$1:
<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??


Last edited by nms007 on Wed Jan 18, 2012 11:42 am, edited 2 times in total.

Top
   
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: FormBuilder - klasa CSS bezpośrednio dla input'ów?
PostPosted: Thu Aug 19, 2010 10:34 pm 
Offline
Forum Members
Forum Members

Joined: Tue May 04, 2010 5:04 pm
Posts: 249
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.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: FormBuilder - klasa CSS bezpośrednio dla input'ów?
PostPosted: Fri Aug 20, 2010 5:38 am 
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  :P

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:

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


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


Top
   
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: FormBuilder - klasa CSS bezpośrednio dla input'ów?
PostPosted: Fri Aug 20, 2010 1:41 pm 
Offline
Forum Members
Forum Members

Joined: Tue May 04, 2010 5:04 pm
Posts: 249
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.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: FormBuilder - klasa CSS bezpośrednio dla input'ów?
PostPosted: Fri Aug 20, 2010 7:32 pm 
dzięki za wskazówkę - na pewno się przyda  ;D

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.:
\$1:
<input type="text" class="required" />
<input type="text" class="required_digits " />
<input type="text" class="required_email" />
<textarea class="required"></textarea>

etc..

da się?


Top
   
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: FormBuilder - klasa CSS bezpośrednio dla input'ów?
PostPosted: Fri Jan 06, 2012 10:14 am 
Offline
Forum Members
Forum Members
User avatar

Joined: Thu Mar 11, 2010 9:01 am
Posts: 85
Location: Nijmegen,Netherlands
Da -
jQuery("#formID").addClass(function() {
return $(this).parent('div').attr('class')});


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: FormBuilder - klasa CSS bezpośrednio dla input'ów?
PostPosted: Wed Jan 18, 2012 11:11 am 
Niezłe wskazówki, też sobie je zanotowałem O0

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 :D


Top
   
 
Share On:
Share on Facebook Share on Twitter Share on Google+
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 7 posts ] 

All times are UTC


Who is online

Users browsing this forum: No registered users


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
A2 Hosting