jQuery Mobile -lomake

jQuery Mobile lisää automaattisesti HTML-lomakkeisiin erinomaisen, kosketusystävällisen ulkoasun.

jQuery Mobile -lomakkeen rakenne

jQuery Mobile käyttää CSS:ää HTML-lomakkeen elementtien tyyleihin asettamiseen, jotta ne ovat houkuttelevampia ja helpommin käytettäviä.

jQuery Mobile -lomakkeessa voit käyttää seuraavia lomakkeen kontrollielementtejä:

  • Tekstikenttä
  • Hakukenttä
  • Valintatyökalu
  • Valintaruutu
  • Valintavalikko
  • Liukusäädin
  • Kääntyvä vaihtokäynti

Kun käsittelet jQuery Mobile -lomaketta, sinun tulisi tietää seuraavat tiedot:

  • <form>-elementillä on asetettava method- ja action-ominaisuudet
  • Jokaisella lomakkeen elementillä on oltava ainutlaatuinen "id"-ominaisuus. Tämä id on oltava yksilöllinen koko verkkosivuston sivuilla. Tämä johtuu siitä, että jQuery Mobilen yksisivuinen navigointimalli sallii useiden eri "sivujen" esittämisen samanaikaisesti.
  • Jokaisella lomakkeen elementillä on oltava merkintä (label). Aseta labelin for-ominaisuus vastaamaan elementin id:tä.

Esimerkki

<form method="post" action="demoform.asp">
  <label for="fname">First name:</label>
  <input type="text" name="fname" id="fname">
</form>

Kokeile itse

Jos haluat piilottaa labelin, käytä luokkaa ui-hidden-accessible. Tämä on erittäin yleistä, kun elementin placeholder-ominaisuus toimii labelina:

Esimerkki

<form method="post" action="demoform.asp">
  <label for="fname" class="ui-hidden-accessible">Nimi：</label>
  <input type="text" name="fname" id="fname" placeholder="Nimi...">
</form>

Kokeile itse

Alue容器

Jos haluat, että label ja lomakkeen elementit näkyvät normaalilla näytöllä oikein, käytä data-role="fieldcontain" -ominaisuutta varustettua <div>- tai <fieldset>-elementtiä labelin tai lomakkeen elementin suojeluun:

Esimerkki

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="fname">First name:</label>
    <input type="text" name="fname" id="fname">
    <label for="lname">Last name:</label>
    <input type="text" name="lname" id="lname">
  </div>
</form>

Kokeile itse

Vinkki:fieldcontain -ominaisuus asettaa label- ja lomakkeeseen liittyvien elementtien tyylit sivun leveyden perusteella. Kun sivun leveys on yli 480px, se asettaa label- ja lomakkeen elementit automaattisesti samalle riville. Kun sivun leveys on alle 480px, label sijoitetaan lomakkeen elementin yläpuolelle.

Vinkki:Jos haluat välttää, että jQuery Mobile asettaa automaattisesti tyylin klikattaville elementeille, käytä data-role="none" -ominaisuutta:

Esimerkki

<label for="fname">First name:</label>
<input type="text" name="fname" id="fname"} data-role="none">

Kokeile itse

Lomakkeen lähettäminen jQuery Mobile:ssa

Vinkki:jQuery Mobile suorittaa lomakkeen lähetyksen automaattisesti AJAX:n kautta ja yrittää integroida palvelimen vastauksen sovelluksen DOM:iin.