formularze w jQuery
Wykorzystanie datalist – lista sugerowanych pozycji.
<script type="text/javascript"> FormWeb=new Object(); FormWeb.goForm=function(){ var mountain = document.myForm.summit.value; alert(mountain) } </script> <datalist id="myMountains"> <option value="Mount Everest Mountain in Asia" label="Everest"> <option value="Mount Kilimanjaro Mountain in Tanzania" label="Kilimanjaro"> <option value="Mount Denali Mountain in Alaska" label="Denali"> </datalist> <form name="myForm"> <label>Your Mountain:</label> <input type="text" list="myMountains" name="summit"> Summary: <input type="button" name="submit" value="Show" onClick="FormWeb.goForm()"> </form>
Pluginy jQuery wspomagające działanie opcji HTML5:
Magicsuggest – funkcja autouzupełniania
elastyczna lista rozwijana (combobox) z funkcją autouzupełniania. Jej funkcje:
- możliwość wyboru kilku opcji przy przyciśnięciu przycisku CTRL
- możliwość dalszego wprowadzania tekstu po naciśnięciu ENTER
- przypinanie wybranych elementów po prawej stronie
- zastosowanie stylu elementu z usług Google
- filtrowanie kolumn
Opcje uzupełnienia listy rozwijanej danymi:
- brak źródła danych – wartość null – nie podaje podpowiedzi, pozostaje możliwość wprowadzenia kilku wartości jeśli opcja FreeEntries posiada wartość true (domyślna wartość)
- statyczne źródło danych – tablica obiektów JSON, tablica ciągów znaków, ciąg wartości rozdzielonych przecinkami (CSV)
- adres URL – gdzie komponent pobiera dane w formacie JSON, pobieranie za pomocą żądań Ajax typu POST, gdzie parametrem zapytania będzie wprowadzony tekst
- funkcja – zwracająca tablicę obiektów JSON, do działania tego mechanizmu wystarczy jedna funkcja wywołania zwrotnego lub wartość zwracana przez tą funkcję
<link href="_css/magicsuggest.css" rel="stylesheet" type="text/css"> <script src="http://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script> <script src="_js/magicsuggest-min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ var jsonData = []; var mountains = 'Everest,Aconcagua,Denali,Kilimanjaro,Vinson,Blanc,Kosciuszko'.split(','); for(var i=0; i<mountains.length; i++) jsonData.push({id:i,name:mountains[i]}); var city = $('#field-mountain').magicSuggest({ data: jsonData, resultAsString: true, maxSelection: 1, maxSelectionRenderer: function(){} }) }); </script> <label for="field-mountain">Mountain: </label> <input id="field-mountain" type="text"/>
Pickadate – wybór daty i czasu
pozwala na stworzenie własnego interfejsu niezależnego od przeglądarki czy urządzenia.
Zawiera wiele opcji:
- tłumaczenie na ok 40 języków,
- funkcję dotyku i keyboard friendliness
- wprowadzenia własnego nazewnictwa/ skrótów nazw miesięcy, dni
- wybór ograniczonego zakresu daty i czasu
<link href="_css/themes/default.css" rel="stylesheet" type="text/css"> <link href="_css/themes/default.date.css" rel="stylesheet" type="text/css"> <link href="_css/themes/default.time.css" rel="stylesheet" type="text/css"> <label>Pick a date and time</label> <input class="datepicker" type="text" placeholder="Enter the date"> <input class="timepicker" type="text" placeholder="Enter the time"> <script src="http://code.jquery.com/jquery-1.7.0.min.js" type="text/javascript"></script> <script src="_js/picker.js" type="text/javascript"></script> <script src="_js/picker.date.js" type="text/javascript"></script> <script src="_js/picker.time.js" type="text/javascript"></script> <script type="text/javascript"> $('.datepicker').pickadate(); $('.timepicker').pickatime() </script>
Blokowanie wielokrotnego przesyłania formularzy
pozwala wyłączyć kolejne przesyłanie danych z formularza oraz zmienić treść buttonu na informację o przesyłaniu danych:
$('#formID').submit(function(){ $('input[type=submit]').prop('disabled', true); }); $('#formID').submit(function(){ var submitButton = $(this).find(':submit'); submitButton.prop('disabled', true); submitButton.val('transfer in progress') }); $('#haveNoChildren').click(function(){ $('#children input').prop('disabled', true).css('backgroundColor', '#ccc'); $('#children label').css('color', '#bbb'); }); $('haveChildren').click(function(){ $('#children input').prop('disabled', false).css('backgroundColor', ''); $('#children label').css('color', ''); });
–
Tooltipster – podpowiedzi – tooltip
pojawia się po umieszczeniu kursora myszy na danym elementem i wyświetla dodatkowe informacje w osobnym okienku.
IdealForms
tworzenie responsywnych formularzy
Hope this helps and happy coding :)
Zobacz jeszcze
AJAX
AJAX - interfejs do synchronicznych oraz asynchronicznych żądań HTTP Standaryzacja implementacji obiektu XMLHttpRequest. Zapytania obsługuje się poprzez metodę globalną jQuery.post lub...
AJAX
Metaznaki
* - wskazany znak lub ciąg znaków, w dowolnym miejscy ciagu ^ - początek wiersza, ciągu znaków $ - koniec wiersza lub ciągu...