Imperial.StyleForm

Opis

Plugin pozwala zastąpić natywne elementy formularza takie jak przełączniki (checkboxy), opcje wyboru (radio), listy rozwijalne (select), przyciski dodawania nowego pliku (file), kodem html umożliwiającym w prosty sposób przygotowanie ich wyglądu graficznego poprzez nadanie odpowiednich styli.

 

Dla walidacji formularza za pomocą pluginy jquery validation dodano odpowiednie wsparcie dzięki czemu klasa błędu pojawia się również na utworzonym elemencie.

Opis autora.

Jak zacząć?

Z pluginu możemy skorzsystać na dwa sposoby:

  1. Dla formularza lub elementu który zawiera w sobie natywne elementy formularza możemy uruchomić metodę styleForm.

    $(function(){
        $("form").styleForm()
    });

     

  2. Dla każdego z elementów formularza możemy uruchomić metodę odzielnie z różnymi parametrami, służą do tego funkcję:
    1. Checkbox - checkboxStyle,

      $(function(){
          $("input[type='checkbox']").checkboxStyle()
      });

       

    2. Radio - radioStyle

      $(function(){
          $("input[type='radio']").radioStyle()
      });

       

    3. Select - selectStyle

      $(function(){
          $("select").selectStyle()
      });

       

    4. File - fileUploaderStyle

      $(function(){
          $("input[type='file']").fileUploaderStyle()
      });

Możliwości funkcji checkboxStyle

  1. Funkcja checkboxStyle może przyjmować następujące parametry:
    1. hover - przyjmuje wartości typu boolean(domyślnie false), jeżeli opcja jest włączona to dodawana jest klasa i-ch-hover po najechaniu na ten element, i usuwana po opuszczeniu myszki z tego elementu,
    2. disabled - przyjmuje wartości typu boolean(domyślnie false), jeżeli opcja jest włączona to wszystkim wybranym elementom zostanie przypisana wartość disabled. Elementy które są disabled mają dodawaną klasę i-ch-disabled,
    3. wrapClass - może przyjmować wartości typu boolean, string, oraz wartość null. Jeżeli wprowadzimy wartość typu boolean i wybierzemy wartość true to wszystkie klasy z atrybutu class, które były ustawione na elemencie typu checkbox zostaną dodane do elementu i-ch-wrapper. Jeżeli wprowadzimy wartość jako string to do atrybutu class elementu i-ch-wrapper zostaną dodane wartości jakie podamy. Wartość null oznacza że nic nie zostanie dodane do atrybutu class dla elementu i-ch-wrapper.
    4. inputClass - przyjmuje wartości typu string lub wartość null. Jeżeli wprowadzimy wartość jako string to do atrybutu class elementu checkbox zostaną dodane wartości jakie podamy.
    5. wrapTitle - może przyjmować wartości typu boolean, string, oraz wartość null. Jeżeli wprowadzimy wartość typu boolean i wybierzemy wartość true to Tytuł z atrybutu title, który był ustawiony na elemencie typu checkbox zostanie ustawiony dla elementu i-ch-wrapper. Jeżeli wprowadzimy wartość jako string to dla atrybutu title elementu i-ch-wrapper zostanie ustawiona wartość jaka podamy. Wartość null oznacza że nie zostanie ustawiony atrybut title dla elementu i-ch-wrapper.
    6. ignoredClass - przyjmuje wartości typu string. Podajmy tutaj klasy dla których elementy nie będą używać pluginu do formatowania.
    7. onEnter - funkcja jaką można wykonać podczas najechania na element przez myszkę,
    8. onLeave - funkcja jaką można wykonać podczas opuszczenia elementu przez myszkę,
    9. onChange - funkcja jaką można wykonać podczas zmiany wartości dla elementu
    10. onCreate - funkcja jaką można wykonać podczas tworzenia elementu
    11. onClick - funkcja jaką można wykonać po kliknięciu w element.
  2. Najważniejsze klasy funkcji checkboxStyle:
    1. i-ch-wrapper - kontener dla wszsytkich elementów dotyczących checkboxa.
    2. i-ch-disabled - tą klasę przyjmuje dodatkowo kontener w przypadku kiedy checkbox posiada atrybut disabled,
    3. i-ch-default - klasa ta jest elementem który odpowiada od strony graficznej za wygląd naszego checkbox,
    4. i-ch-clicked - klasa ta jest dodawana w momencie kiedy checkbox jest w stanie aktywnym jest ona dodawana do elementu i-ch-default,
    5. i-ch-hover - klasa dodawana jest do konteneru i-ch-wrapper, na jej podstawie możemy określić wygląd naszego elementu po najechaniu myszką na niego,
    6. i-ch-only-checkbox - ta klasa występuje w przypadku kiedy checkbox nie posiada żadnej etykiety można za jej pomocą usunąć nie potrzebny margines.
  3. Dodatkowe funkcje które mogą być wywołane po inicjalizacji:
    1. destroy - przywraca checkbox do stanu pierwotnego, przed zastosowaniem pluginu,
    2. refresh - przywraca checkbox do stanu pierwotnego, przed zastosowaniem pluginu i tworzy go na nowo.
  4. Przykłady wywołania funkcji:
$(function() {
    $("input[type='checkbox']").checkboxStyle(
    {
        hover: true,
        disabled: false,
        wrapClass: "additionalWrapClassName",
        inputClass: "additionalInputClassName",
        wrapTitle: true,
        ignoredClass: "ignoreCheckbox",
        onEnter: function()
        {
            /*kod do wykonania przy najechaniu myszą*/
        },
        onLeave: function()
        {
            /*kod do wykonania po opuszczeniu myszy z elementu*/
        },
        onChange: function()
        {
            /*kod do wykonania w momencie zmiany wartości*/
        },
        onCreate: function()
        {
            /*kod do wykonania w momencie tworzenia kodu html elementu*/
        },
        onClick: function()
        {
            /*kod do wykonania w momencie kliknięcia na element*/
        }
    });
});


$(function(){
    $("input[type='checkbox']").checkboxStyle("destroy");
});

 
$(function(){
    $("input[type='checkbox']").checkboxStyle("refresh");
});

Możliwości funkcji radioStyle

  1. Funkcja radioStyle może przyjmować następujące argumenty:
    1. hover - przyjmuje wartości typu boolean(domyślnie false), jeżeli opcja jest włączona to dodawana jest klasa i-r-hover po najechaniu na ten element, i usuwana po opuszczeniu myszki z tego elementu,
    2. disabled - przyjmuje wartości typu boolean(domyślnie false), jeżeli opcja jest włączona to wszystkim wybranym elementom zostanie przypisana wartość disabled. Elementy które są disabled mają dodawaną klasę i-r-disabled,
    3. wrapClass - może przyjmować wartości typu boolean, string, oraz wartość null. Jeżeli wprowadzimy wartość typu boolean i wybierzemy wartość true to wszystkie klasy z atrybutu class, które były ustawione na elemencie typu radio zostaną dodane do elementu i-r-wrapper. Jeżeli wprowadzimy wartość jako string to do atrybutu class elementu i-r-wrapper zostaną dodane wartości jakie podamy. Wartość null oznacza że nic nie zostanie dodane do atrybutu class dla elementu i-r-wrapper.
    4. inputClass - przyjmuje wartości typu string lub wartość null. Jeżeli wprowadzimy wartość jako string to do atrybutu class elementu radio zostaną dodane wartości jakie podamy.
    5. wrapTitle - może przyjmować wartości typu boolean, string, oraz wartość null. Jeżeli wprowadzimy wartość typu boolean i wybierzemy wartość true to Tytuł z atrybutu title, który był ustawiony na elemencie typu radio zostanie ustawiony dla elementu i-r-wrapper. Jeżeli wprowadzimy wartość jako string to dla atrybutu title elementu i-r-wrapper zostanie ustawiona wartość jaka podamy. Wartość null oznacza że nie zostanie ustawiony atrybut title dla elementu i-r-wrapper.
    6. ignoredClass - przyjmuje wartości typu string. Podajmy tutaj klasy dla których elementy nie będą używać pluginu do formatowania.
    7. onEnter - funkcja jaką można wykonać podczas najechania na element przez myszkę,
    8. onLeave - funkcja jaką można wykonać podczas opuszczenia elementu przez myszkę,
    9. onChange - funkcja jaką można wykonać podczas zmiany wartości dla elementu
    10. onCreate - funkcja jaką można wykonać podczas tworzenia elementu
    11. onClick - funkcja jaką można wykonać po kliknięciu w element.
  2. Najważniejsze klasy funkcji checkboxStyle:
    1. i-r-wrapper - kontener dla wszsytkich elementów dotyczących radio.
    2. i-r-disabled - tą klasę przyjmuje dodatkowo kontener w przypadku kiedy radio posiada atrybut disabled,
    3. i-r-default - klasa ta jest elementem który odpowiada od strony graficznej za wygląd naszego radio,
    4. i-r-clicked - klasa ta jest dodawana w momencie kiedy radio jest w stanie aktywnym jest ona dodawana do elementu i-ch-default,
    5. i-r-hover - klasa dodawana jest do konteneru i-ch-wrapper, na jej podstawie możemy określić wygląd naszego elementu po najechaniu myszką na niego.
    6. i-r-only-radio - ta klasa występuje w przypadku kiedy radio nie posiada żadnej etykiety można za jej pomocą usunąć nie potrzebny margines.
  3. Dodatkowe funkcje które mogą być wywołane po inicjalizacji:
    1. destroy - przywraca radio do stanu pierwotnego, przed zastosowaniem pluginu.
    2. refresh - przywraca radio do stanu pierwotnego, przed zastosowaniem pluginu i tworzy go na nowo.
  4. Przykłady wywołania funkcji:
$(function () {
    $("input[type='radio']").radioStyle(
    {
        hover: true,
        disabled: false,
        wrapClass: "additionalWrapClassName",
        inputClass: "additionalInputClassName",
        wrapTitle: true,
        ignoredClass: "ignoreRadio",
        onEnter: function ()
        {
            /*kod do wykonania przy najechaniu myszą*/
        },
        onLeave: function ()
        {
            /*kod do wykonania po opuszczeniu myszy z elementu*/
        },
        onChange: function ()
        {
            /*kod do wykonania w momencie zmiany wartości*/
        },
        onCreate: function ()
        {
            /*kod do wykonania w momencie tworzenia kodu html elementu*/
        },
        onClick: function ()
        {
            /*kod do wykonania w momencie kliknięcia na element*/
        }
    });
});


$(function() {
    $("input[type='checkbox']").radioStyle("destroy");
});


$(function() {
    $("input[type='checkbox']").radioStyle("refresh");
});

Możliwości funkcji selectStyle

  1. Funkcja selectStyle może przyjmować następujące argumenty:
    1. hover - przyjmuje wartości typu boolean(domyślnie false), jeżeli opcja jest włączona to dodawana jest klasa i-s-hover po najechaniu na ten element, i usuwana po opuszczeniu myszki z tego elementu,
    2. isClickable - przyjmuje wartości typu boolean(domyślnie true), jeżeli ustawiony na true to oznacza że cały element listy jest klikalny żeby ją rozwinąć, jeżeli jest false to tylko handler i-s-button jest odpowiedzialny za rozwijanie listy.
    3. disabled - przyjmuje wartości typu boolean(domyślnie false), jeżeli opcja jest włączona to wszystkim wybranym elementom zostanie przypisana wartość disabled. Elementy które są disabled mają dodawaną klasę i-s-disabled,
    4. wrapClass - może przyjmować wartości typu boolean, string, oraz wartość null. Jeżeli wprowadzimy wartość typu boolean i wybierzemy wartość true to wszystkie klasy z atrybutu class, które były ustawione na elemencie typu select zostaną dodane do elementu i-s-wrapper. Jeżeli wprowadzimy wartość jako string to do atrybutu class elementu i-s-wrapper zostaną dodane wartości jakie podamy. Wartość null oznacza że nic nie zostanie dodane do atrybutu class dla elementu i-s-wrapper.
    5. inputClass - przyjmuje wartości typu string lub wartość null. Jeżeli wprowadzimy wartość jako string to do atrybutu class elementu select zostaną dodane wartości jakie podamy.
    6. wrapTitle - może przyjmować wartości typu boolean, string, oraz wartość null. Jeżeli wprowadzimy wartość typu boolean i wybierzemy wartość true to Tytuł z atrybutu title, który był ustawiony na elemencie typu select zostanie ustawiony dla elementu i-s-wrapper. Jeżeli wprowadzimy wartość jako string to dla atrybutu title elementu i-s-wrapper zostanie ustawiona wartość jaka podamy. Wartość null oznacza że nie zostanie ustawiony atrybut title dla elementu i-s-wrapper.
    7. ignoredClass - przyjmuje wartości typu string. Podajmy tutaj klasy dla których elementy nie będą używać pluginu do formatowania.
    8. minWidth - przyjmuje wartości typu boolean (domyślnie true), jeżeli jest ustawiona wartość true to plugin wykorzystuje algorytm do określenie minimalnej szerokości elementu na podstawie wszystkich elementów znajdujących się na liście.
    9. onEnter - funkcja jaką można wykonać podczas najechania na element przez myszkę,
    10. onLeave - funkcja jaką można wykonać podczas opuszczenia elementu przez myszkę,
    11. onChange - funkcja jaką można wykonać podczas zmiany wartości dla elementu
    12. onCreate - funkcja jaką można wykonać podczas tworzenia elementu
    13. onClick - funkcja jaką można wykonać po kliknięciu w element.
  2. Najważniejsze klasy funkcji checkboxStyle:
    1. i-s-wrapper - kontener dla wszystkich elementów dotyczących selecta.
    2. i-s-disabled - tą klasę przyjmuje dodatkowo kontener w przypadku kiedy select posiada atrybut disabled,
    3. i-s-holder - kontener dla elementu etykiety wybranej opcji oraz przycisku do rozwijania listy,
    4. i-s-button - przycisk do rozwijania / zwijania listy
    5. i-s-list - kontener listy elementów naszej listy z select, mogą tutaj być elementy option oraz optgroup,
    6. i-s-optgroup-list - kontener listy elementów dla tagu optgroup
    7. i-s-optgroup-label - etykieta dla grupy elementów pochodząca z atrybutu label z tagu optgroup
    8. i-s-default - klasa określająca elementy listy możliwe do wybrania,
    9. i-s-active - klasa określa który element jest wybrany na liście,
    10. i-s-optgroup - kontener obejmujący grupę elementów listy oraz etykietę grupy jeżeli podano - tag optgroup.
  3. Dodatkowe funkcje które mogą być wywołane po inicjalizacji:
    1. destroy - przywraca select do stanu pierwotnego, przed zastosowaniem pluginu.
    2. refresh - przywraca select do stanu pierwotnego, przed zastosowaniem pluginu i tworzy go na nowo.
  4. Przykładowe wywołania funkcji: 
$(function() {
    $("select").selectStyle(
    {
        hover: true,
        isClickable: true,
        disabled: false,
        wrapClass: "additionalWrapClassName",
        inputClass: "additionalInputClassName",
        wrapTitle: true,
        ignoredClass: "ignoreSelect",
        minWidth : true,
        onEnter: function()
        {
            /*kod do wykonania przy najechaniu myszą*/
        },
        onLeave: function()
        {
            /*kod do wykonania po opuszczeniu myszy z elementu*/
        },
        onChange: function()
        {
            /*kod do wykonania w momencie zmiany wartości*/
        },
        onCreate: function()
        {
            /*kod do wykonania w momencie tworzenia kodu html elementu*/
        },
        onClick: function()
        {
            /*kod do wykonania w momencie kliknięcia na element*/
        }
    });
});


$(function(){
    $("select").selectStyle("destroy");
});

 
$(function(){
    $("select").selectStyle("refresh");
});

Możliwości funkcji fileUploaderStyle

  1. Funkcja fileUploaderStyle może przyjmować następujące argumenty:
    1. class - obiekt który może zawierać dwa elementy,
    2. class.wrap - możemy podać dodatkową klasę dla kontenera i-file-upload-btn-wrap,
    3. class.btn - możemy dodawać dodatkową klasę dla przycisku i-file-upload-btn-handler
  2. Najważniejsze klasy funkcji fileUploaderStyle:
    1. i-file-upload-btn-wrap - kontener dla przycisku typu file,
    2. i-file-upload-btn-handler - przycisk pokazujący okno dodawania pliku.
  3. Dodatkowe funkcje które mogą być wywołane po inicjalizacji:
    1. destroy - przywraca przyciski do stanu pierwotnego, przed zastosowaniem pluginu.
  4. Przykład wywołania funkcji: 
$(function() {
    $("input[type='file']").fileUploaderStyle(
    {
        class: {
            wrap: "additionalClassWrap",
            btn: "additionalClassBtn"
        }
    });
});


$(function(){
    $("input[type='file']").selectStyle("destroy");
});

Możliwości funkcji styleForm

  1. Funkcja styleForm może przyjmować następujące argumenty:
    1. checkbox - obiekt który może zawierać wszystkie parametry jakie posiada funkcja checkboxStyle, zawiera dodatkowy parametr o nazwie use który określa czy użyć funkcji checkboxStyle dla wszystkich elementów checkbox które są dostępne w ramach obiektu na którym funkcja została wywołana,
    2. radio - obiekt który może zawierać wszystkie parametry jakie posiada funkcja radioStyle, zawiera dodatkowy parametr o nazwie use który określa czy użyć funkcji checkboxStyle dla wszystkich elementów checkbox które są dostępne w ramach obiektu na którym funkcja została wywołana,
    3. select - obiekt który może zawierać wszystkie parametry jakie posiada funkcja selectStyle, zawiera dodatkowy parametr o nazwie use który określa czy użyć funkcji checkboxStyle dla wszystkich elementów checkbox które są dostępne w ramach obiektu na którym funkcja została wywołana,,
    4. fileUploader- obiekt który może zawierać wszystkie parametry jakie posiada funkcja fileUploaderStyle, zawiera dodatkowy parametr o nazwie use który określa czy użyć funkcji checkboxStyle dla wszystkich elementów checkbox które są dostępne w ramach obiektu na którym funkcja została wywołana,
  2. Dodatkowe funkcje które mogą być wywołane po inicjalizacji:
    1. initValidationAdditionalEvent - pozwala uruchomić event który będzie sprawdzał czy dany element typu radio, checkbox, select jest błędnie zwalidowany i przekazanie tej klasy walidatora dla błędnych pól do kontenera elementu np. i-ch-wrapperd,
    2. destroy - resetuje formularz do stanu przed zastosowaniem pluginu.
  3. Przykład wywołania funkcji: 
$(function() {
    $("form").styleForm(
    {
        checkbox: {
            use: true,
            /*Pozostałe parametry z funkcji checkboxStyle*/
        },
        radio: {
            use: true,
            /*Pozostałe parametry z funkcji radioStyle*/
        },
        select: {
            use: true,
            /*Pozostałe parametry z funkcji selectStyle*/
        },
        fileUploader: {
            use: true,
            /*Pozostałe parametry z funkcji fileUploaderStyle*/
        }
    });
});


$(function(){
    $("form").styleForm("initValidationAdditionalEvent");
});


$(function(){
    $("form").styleForm("destroy");
});

maxlistelement