close

j Query UI ja käyttöliittymän osat- integrointi ja käyttö

j Query UI on tehokas ja joustava JavaScript-kirjasto, joka on rakennettu jQueryn päälle. Se tarjoaa käyttövalmiita ja mukautettavia käyttöliittymäkomponentteja, joiden avulla on helppo luoda interaktiivisia ja houkuttelevia verkkosivuja ja verkkosovelluksia.

j:n avulla Query UI voit käyttää komponentteja, kuten painikkeita, päivämäärän valitsimia, valintaikkunoita, automaattisia täydennyksiä, liukusäätimiä, välilehtiä, etenemispalkkeja ja harmonikkalaitteita. Nämä komponentit on suunniteltu ja yhteensopivia keskenään, joten voit rakentaa joustavia ja käyttäjäystävällisiä käyttöliittymiä, jotka ovat saumattomasti vuorovaikutuksessa käyttäjien kanssa.

 

Integroidaksesi j:n Query UI projektiisi, noudata näitä ohjeita

  1. Vaihe 1: Lataa jQuery ja j Query UI

    • Vieraile jQueryn virallisella verkkosivustolla( https://jquery.com/ ) ja lataa jQueryn uusin versio.
    • Vieraile j:n Query UI virallisella verkkosivustolla( https://jqueryui.com/ ) ja lataa j:n uusin versio Query UI.

  2. Vaihe 2: Luo kansiorakenne

    • Luo projektillesi kansiorakenne, mukaan lukien hakemistot JavaScript-tiedostoille, CSS-tiedostoille ja kuville.

  3. Vaihe 3: Kopioi tiedostot

    • Kopioi jQuery- ja j- Query UI tiedostot projektisi JavaScript-kansioon.
    • Kopioi j Query UI CSS-tiedostot projektisi CSS-kansioon.
    • Kopioi j- Query UI kuvatiedostot projektisi kuvat-kansioon.

  4. Vaihe 4: Linkitä JavaScript- ja CSS-tiedostot

    • Lisää projektisi HTML-tiedostoon <script> tunnisteita jQuery- ja j-tiedostojen linkittämiseksi Query UI: 
      <script src="path/to/jquery.js"></script>  
<script src="path/to/jquery-ui.js"></script>  
​
    • Lisää <link> tageja linkittääksesi j Query UI CSS-tiedoston: 
      <link rel="stylesheet" href="path/to/jquery-ui.css">  
​
  5. Vaihe 5: Käytä j Query UI -komponentteja
    • Olet nyt valmis käyttämään j- Query UI komponentteja projektissasi. Query UI Käytä JavaScriptin j -luokkia ja menetelmiä ja käytä vastaavia CSS-luokkia interaktiivisten käyttöliittymien luomiseen.

      Esimerkki:

      <!DOCTYPE html>  
<html>  
<head>  
  <link rel="stylesheet" href="path/to/jquery-ui.css">  
</head>  
<body>  
  <div id="datepicker"></div>  
  
  <script src="path/to/jquery.js"></script>  
  <script src="path/to/jquery-ui.js"></script>  
  <script>  
    $(function() {  
      $("#datepicker").datepicker();  
    });  
  </script>  
</body>  
</html>

 

Varmista, että olet määrittänyt jQuery- ja j-tiedostojen tiedostopolut oikein Query UI HTML-koodissasi, ja projektisi integroi j:n onnistuneesti Query UI, jolloin voit käyttää sen komponentteja projektissasi.

 

Tässä on yksityiskohtainen selitys esimerkkeineen kustakin j:n tarjoamasta käyttöliittymäkomponentista Query UI:

Painikkeet

Mahdollistaa interaktiivisten painikkeiden luomisen verkkosivuille, joissa on ominaisuuksia, kuten valintanapit, valintaruudut ja hover/aktiiviset tehosteet.

// Create a button  
$("#myButton").button();  
  
// Create a radio button group  
$(".radioGroup").buttonset();

 

Päivämäärävalitsin

Tarjoaa käyttäjäystävällisen käyttöliittymän päivämäärien valitsemiseen dynaamisesti luodusta kalenterista, jolloin käyttäjät voivat helposti valita päivämäärät eri muodoissa.

// Create a datepicker for a date input field  
$("#datepicker").datepicker();  
  
// Create a simple datepicker with a custom date format  
$("#datepicker").datepicker({ dateFormat: "dd-mm-yy" });

 

Dialogi

Mahdollistaa mukautettavien ponnahdusikkunoiden luomisen, jotka voivat sisältää sisältöä, painikkeita ja avaus-/sulke-tehosteita.

// Create a simple dialog  
$("#myDialog").dialog();  
  
// Create a dialog with a custom close button  
$("#myDialog").dialog({  
  buttons: [  
    {  
      text: "Close",  
      click: function() {  
        $(this).dialog("close");  
      }  
    }  
  ]  
});

 

Automaattinen täydennys 

Tarjoaa automaattisen täydennystoiminnon käyttäjien kirjoittaessa tekstikenttään ja näyttää ehdotuksia saatavilla olevien tietojen tai etätietolähteiden perusteella.

// Create an input field with autocomplete feature  
$("#myInput").autocomplete({  
  source: ["Apple", "Banana", "Orange"]  
});  
  
// Create an input field with data from a remote data source  
$("#myInput").autocomplete({  
  source: "/search"  
});

 

Liukusäädin

Mahdollistaa liukusäätimien luomisen arvojen valitsemiseksi ennalta määritetyltä arvoalueelta.

// Create a simple slider  
$("#slider").slider();  
  
// Create a slider with minimum and maximum values  
$("#slider").slider({  
  min: 0,  
  max: 100  
});

 

Välilehdet

Mahdollistaa välilehtisisällön luomisen ja sisällön jakamisen eri osiin, jolloin käyttäjien on helppo vaihtaa eri osioiden välillä.

// Create a simple tab  
$("#tabs").tabs();  
  
// Create tabs with custom titles  
$("#tabs").tabs({  
  active: 1,  
  collapsible: true  
});

 

Edistymispalkki

Tarjoaa graafisen edistymispalkin, joka näyttää suoritettavan tehtävän edistymisen.

// Create a simple progressbar  
$("#progressbar").progressbar();  
  
// Update the progress value  
$("#progressbar").progressbar("value", 75);

 

Harmonikka

Mahdollistaa tiivistettävien elementtien luomisen, jolloin näytetään vain osa sisällöstä ja käyttäjät voivat laajentaa tai tiivistää sisältöä.

// Create a simple accordion  
$("#accordion").accordion();  
  
// Create an accordion with fast toggle  
$("#accordion").accordion({  
  collapsible: true,  
  active: false,  
  heightStyle: "content"  
});

 

Nämä ovat vain esimerkkejä j:n tarjoamista käyttöliittymäkomponenteista Query UI. Voit käyttää näitä komponentteja ja mukauttaa niitä luodaksesi interaktiivisia ja käyttäjäystävällisiä käyttöliittymiä verkkosivullesi.