Formular mobil Jquery. Antet în partea de sus sau antet receptiv. Oferă posibilitatea de a salva date
Acest articol este un anunț despre noi funcționalități.
Nu este recomandat să folosiți conținutul acestui articol pentru a afla funcționalități noi.
Descriere completa o nouă funcționalitate va fi furnizată în documentația pentru versiunea corespunzătoare.
Lista plina schimbari in versiune noua este furnizat în fișierul v8Update.htm.
Implementat în versiunea 8.3.11.2867.
Continuăm să dezvoltăm platforma mobilă, adăugând funcționalități care sunt deja disponibile în platformă pentru calculatoare personale. În plus, dezvoltăm capabilități specifice ale platformei care sunt relevante doar pentru dispozitivele mobile. Vă vom spune acum despre unele dintre cele mai importante îmbunătățiri.
Programator
Modelul obiect al programatorului „mobil” nu s-a schimbat, dar s-a schimbat modul în care utilizatorul interacționează cu planificatorul, deoarece metodele de introducere a informațiilor pe dispozitivele mobile diferă de cele folosite pe computerele desktop.
De exemplu, editare rapidă elementul se realizează printr-un singur clic pe element. Apeluri de apăsare lungă meniul contextual, și la apariția unor markere care vă permit să întindeți elementul. Tragerea se face prin apăsare lungă și apoi mișcarea degetului.
Derularea întregului planificator se face prin defilarea cu un deget, mărirea cu două degete și așa mai departe.
O caracteristică a implementării actuale a programatorului „mobil” este că nu acceptă încă imprimarea.
Document formatat
Un alt obiect „nou” pe care l-am adăugat pe platforma mobilă este FormattedDocument. Din punctul de vedere al utilizatorului, un document formatat „mobil” diferă doar prin faptul că panoul său de editare este încorporat în controlul însuși și este o parte logică tastatura virtuala. Voi, în calitate de dezvoltatori, nu sunteți obligat să faceți acest lucru adăugare separată la configurație. Panoul de editare are tip diferitîn funcție de tipul dispozitivului mobil (telefon sau tabletă).
Previzualizarea formularului „mobil” în configurator
În configurator, la dezvoltarea unui formular, am adăugat posibilitatea de a vedea cum va arăta formularul dvs dispozitiv mobil.
În panoul de comandă puteți selecta o opțiune de interfață Dispozitiv mobil, și vedeți cum va arăta formularul în orientare standard.
Aici vă puteți roti dispozitivul mobil.
În plus, ți-am oferit posibilitatea de a alege un numar mare dispozitive comune.
În plus, puteți vizualiza formularele mobile în trei scări diferite:
- Pixel la pixel- când un pixel al ecranului unui dispozitiv mobil corespunde unui pixel al ecranului ferestrei previzualizare;
- Dimensiunea reală - când dimensiunea dispozitivului mobil de pe ecran se potrivește dimensiuni geometrice dispozitive;
- După dimensiunea ferestrei- când scara de afișare este selectată în așa fel încât zona de afișare „mobilă” să se încadreze în fereastra de previzualizare fără derulare.
Procesarea în lot a documentelor din foile de calcul
Am adăugat o serie de noi obiecte pe platforma mobilă care vă permit să creați pachete de documente afișate. Această funcționalitate este similară cu cea găsită în platforma PC. Astfel, acum puteți, de exemplu, să trimiteți mai multe documente pentru tipărire simultan.
Dezvoltarea notificărilor livrabile
Am implementat suport pentru serviciul de notificare push Windows (WNS, Windows Notification Services). Acum puteți utiliza funcționalitatea notificărilor livrate atunci când rulați o aplicație mobilă pe platforme din familia Windows.
De asemenea, am reelaborat sistemul de gestionare a erorilor pentru trimiterea notificărilor livrate. În situațiile în care o eroare a fost aruncată anterior ca o excepție, acum este aruncată ca o valoare pe care o puteți gestiona în limbajul încorporat.
Accelerarea hardware în sistemul de operare Android
Pe versiuni sistem de operare Platforma mobilă Android 4.4.2 și o versiune ulterioară utilizează acum accelerare hardware. Acest lucru ne-a permis să creștem viteza de redare a interfeței de 1,5 – 3 ori.
Designer UX de la IBM Zoltan Collin.
La marcaje
Zoltan Collin
Formularele dropdown par a fi o alegere evidentă de design: sunt ușor și ieftin de creat, nu ocupă prea mult spațiu, confirmă automat informațiile introduse, sunt acceptate pe toate browserele și platformele și utilizatorii sunt deja utilizați lor.
Listele drop-down sunt cea mai obișnuită utilizare a meniurilor drop-down de către designeri și, potrivit directorului de produs Google, Luke Wroblewski, acest model ar trebui folosit doar ca ultimă soluție.
Să ne uităm la câteva restricții:
- Opțiunile drop-down sunt invizibile până când utilizatorul face clic sau atinge formularul. În plus, la prima vedere, este imposibil de prezis câte linii vor fi în listă - două sau cincizeci.
- Selectarea unei opțiuni dintr-o listă derulantă este un proces în mai mulți pași, în special pe dispozitivele mobile: utilizatorul trebuie mai întâi să atingă formularul și să deschidă opțiunile, să deruleze în jos și să o găsească pe cea dorită, să o selecteze și să închidă lista.
- Listele drop-down îi fac pe designeri leneși, deoarece este atât de ușor să adăugați totul opțiuni posibileîntr-o singură listă fără prioritizare. Din acest motiv, lista drop-down este foarte asemănătoare cu un alt șablon - meniul „hamburger”.
- Derularea listelor lungi, precum selectarea unei țări este un coșmar. În special pe dispozitivele mobile, unde căutarea de la tastatură nu este de obicei disponibilă.
- Pe unele dispozitive, câmpul pentru afișarea opțiunilor este foarte mic, așa că glisarea poate fi un coșmar.
Cantitate opțiuni vizibile lista pe iOS poate părea extrem de nesemnificativă
Vestea bună este că există un numar mare de elemente alternative pentru introducerea datelor, care în multe cazuri vor funcționa mai bine decât listele derulante.
Estimați numărul de opțiuni
Nu ar trebui să utilizați liste derulante pentru decizii în care trebuie să alegeți una dintre cele două opțiuni. Încercați o casetă de selectare sau un buton radio.
Pentru cantitate mica Pentru opțiuni care se exclud reciproc, este potrivită o formă sub formă de butoane radio sau butoane de control segmentat. Utilizatorul va vedea imediat toate opțiunile disponibile și nu va trebui să extindă lista.
Exemplu de utilizare a butoanelor de control segmentat
Numărul de opțiuni vizibile depinde de lățimea ecranului și lungimea textului. Cu toate acestea, nu ar trebui să utilizați mai mult de cinci opțiuni
Utilizați un formular de introducere cu o listă derulantă filtrată pentru un număr mare de opțiuni bine definite în care utilizatorul știe exact ce trebuie să găsească.
În loc să defileze prin întreaga listă, utilizatorii pot introduce primele litere și pot selecta opțiunile filtrate
Pentru liste mari și diverse, este mai bine să utilizați datele existente ale utilizatorilor pentru a vă asigura că opțiunile populare de răspuns sunt incluse în listă. În acest caz, 90% dintre utilizatori vor putea selecta imediat opțiunea necesară, iar restul de 10% vor face clic pe opțiunea „Altele”, care va fi clarificată în următoarea întrebare.
Și în timp ce „Altele” nu este cea mai elegantă soluție, prioritizarea poate îmbunătăți UX pentru majoritatea utilizatorilor.
Evaluați formularul de introducere preferat
Unul dintre avantajele unei liste derulante este că utilizatorii nu trebuie să tastați atât de mult. Cu toate acestea, dacă trebuie să tastați puțin, iar datele sunt solicitate destul de des (de exemplu, Informații personale), atunci este mai convenabil să le introduceți decât să le selectați dintr-o listă.
Pe dispozitivele mobile, cel mai simplu mod de a vă introduce anul nașterii este utilizarea tastatură numerică, nu o listă derulantă
În general, tastatura numerică este cea mai mare metoda eficienta introduceți o valoare numerică.
Chiar dacă valorile listei sunt sortate în ordine, poate fi mai ușor pentru utilizatori să le introducă manual în loc să le deruleze.
Dacă este important pentru dvs. să confirmați datele pe care le introduce o persoană, utilizați un formular de introducere cu o listă derulantă filtrată.
De exemplu, atunci când utilizatorul trebuie să specifice o stare, filtrați lista Optiuni Disponibile poate doar o scrisoare
Acest lucru este deosebit de important dacă ordinea de sortare a elementelor listei nu este complet clară.
De exemplu, utilizatorii nu înțeleg după ce principiu sunt sortate monedele. Faceți-o astfel încât să poată căuta atât după numele, cât și după abreviere
Același lucru este valabil și pentru lista de țări.
Pentru numere întregi - cum ar fi numărul de pasageri sau articole dintr-un cărucior - cel mai bine este să folosiți un stepper. Acesta va permite utilizatorilor să crească sau să scadă valoarea cu un singur clic.
Pentru numere fracționare sau variabile situate pe o scară, cel mai bine este să utilizați un glisor.
JQuery Mobile adaugă automat un stil formularelor HTML, făcându-le mai atractive, mai ușor de utilizat la atingere.
Structura formularului mobil JQuery
JQuery Mobile pentru a utiliza CSS pentru a stila elemente formular HTML pentru a le face mai atractive și mai ușor de utilizat.
În jQuery Mobile, puteți utiliza următoarele elemente forme:
- câmp de introducere a textului
- Căutați un câmp de introducere
- buton de radio
- Caseta de bifat
- Selectați Meniu
- glisor
- Flip comutator
La folosind JQuery Formularul mobil ar trebui să știți:
- <Форма>elementul trebuie să aibă o metodă și un atribut de acțiune
- Fiecare element de formular trebuie să aibă un atribut unic „ID”. ID-ul trebuie să fie unic pe toate paginile de pe site. Acest lucru se datorează faptului că mecanismul de navigare pe o pagină Jquery Mobile este prezentat în așa fel încât mulți diverse pagini simultan
- Fiecare element de formular trebuie să aibă o etichetă. fila Setări Pentru proprietăți pentru a se potrivi cu id-ul elementului
exemple
Incearca-l "
Pentru a ascunde o etichetă, utilizați clasa UI-hidden-accessible. Acesta este adesea folosit atunci când atribuiți un element ca etichetă de substituent:
exemple
Incearca-l "
Sfat: Putem folosi atributul data-net-BTN="true" pentru a adăuga un buton pentru a șterge conținutul câmpului de introducere (pictograma X din dreapta câmpului de intrare):
exemple
<Ярлык = "имя_файла">Nume: метка>
<Входной тип = "текст" имя = "имя_файла" ID = "имя_файла" данных четко БТН = "истинный">
Incearca-l "
Pictograma jQuery Mobile Forms
Formular cod de buton HTML standard <вход>element (buton, resetare, trimitere). Ei vor reda automat stilurile, adaptând automat dispozitivele mobile la desktop:
exemple
<Тип входного = "Сброс" значение = "кнопка сброса">
Incearca-l "
Dacă trebuie să adăugați stiluri suplimentare V<вход>butonul, puteți utiliza următorul tabel de date-*atribute:
Buton pentru a adăuga o pictogramă:
<Тип входного = "Сброс" значение = "кнопка сброса">
Incearca-l "
Câmp container
Pentru a face etichetele și elementele de formular să pară mai potrivite pentru ecrane late, vă rugăm sau