close

j Query UI in komponente uporabniškega vmesnika – integracija in uporaba

j Query UI je zmogljiva in prilagodljiva knjižnica JavaScript, zgrajena na vrhu jQuery. Zagotavlja vam pripravljene in prilagodljive komponente uporabniškega vmesnika, ki olajšajo ustvarjanje interaktivnih in privlačnih spletnih strani in spletnih aplikacij.

Z j Query UI lahko uporabite komponente, kot so gumbi, izbirniki datumov, pogovorna okna, samodokončanja, drsniki, zavihki, vrstice napredka in harmonike. Te komponente so zasnovane in združljive med seboj, kar vam omogoča, da zgradite prilagodljive in uporabniku prijazne vmesnike, ki nemoteno komunicirajo z uporabniki.

 

Če želite j vključiti Query UI v svoj projekt, sledite tem korakom

  1. 1. korak: Prenesite jQuery in j Query UI

    • Obiščite uradno spletno mesto jQuery( https://jquery.com/ ) in prenesite najnovejšo različico jQuery.
    • Obiščite uradno spletno stran j Query UI( https://jqueryui.com/ ) in prenesite najnovejšo različico j Query UI.

  2. 2. korak: Ustvarite strukturo map

    • Ustvarite strukturo map za svoj projekt, vključno z imeniki za datoteke JavaScript, CSS in slike.

  3. 3. korak: Kopirajte datoteke

    • Kopirajte datoteki jQuery in j Query UI v mapo JavaScript vašega projekta.
    • Kopirajte datoteke j Query UI CSS v mapo CSS vašega projekta.
    • Kopirajte slikovne datoteke j Query UI v mapo s slikami vašega projekta.

  4. 4. korak: Povežite datoteke JavaScript in CSS

    • V datoteko HTML vašega projekta dodajte <script> oznake za povezavo datotek jQuery in j Query UI: 
      <script src="path/to/jquery.js"></script>  
<script src="path/to/jquery-ui.js"></script>  
​
    • Dodajte <link> oznake za povezavo Query UI datoteke j CSS: 
      <link rel="stylesheet" href="path/to/jquery-ui.css">  
​
  5. 5. korak: Uporabite Query UI komponente j
    • Zdaj ste pripravljeni za uporabo Query UI komponent j v svojem projektu. Uporabite razrede in metode j Query UI v svojem JavaScriptu ter uporabite ustrezne razrede CSS za ustvarjanje interaktivnih uporabniških vmesnikov.

      primer:

      <!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>

 

Prepričajte se, da ste Query UI v kodi HTML pravilno navedli poti datotek za datoteke jQuery in j, in vaš projekt bo uspešno integriral j Query UI, kar vam bo omogočilo uporabo njegovih komponent v vašem projektu.

 

Tukaj je podrobna razlaga s primeri za vsako komponento uporabniškega vmesnika, ki jo zagotavlja j Query UI:

Gumbi

Omogoča ustvarjanje interaktivnih gumbov na spletnih straneh s funkcijami, kot so izbirni gumbi, potrditvena polja in učinki lebdenja/aktivnosti.

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

 

Izbirnik datumov

Zagotavlja uporabniku prijazen vmesnik za izbiranje datumov iz dinamično ustvarjenega koledarja, kar uporabnikom omogoča preprosto izbiro datumov v različnih oblikah.

// 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" });

 

Dialog

Omogoča ustvarjanje prilagodljivih pojavnih pogovornih oken, ki lahko vsebujejo vsebino, gumbe in učinke odpiranja/zapiranja.

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

 

Samodokončanje 

Omogoča funkcijo samodokončanja, ko uporabniki vnašajo v besedilno polje, prikazuje predloge na podlagi razpoložljivih podatkov ali iz oddaljenih virov podatkov.

// 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"  
});

 

Drsnik

Omogoča ustvarjanje drsnikov za izbiranje vrednosti iz vnaprej določenega obsega vrednosti.

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

 

Zavihki

Omogoča ustvarjanje vsebine z zavihki, ki deli vsebino na različne razdelke, kar uporabnikom olajša preklapljanje med različnimi razdelki.

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

 

Vrstica napredka

Ponuja grafično vrstico napredka za prikaz napredka opravila, ki se izvaja.

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

 

Harmonika

Omogoča ustvarjanje zložljivih elementov, ki prikazujejo le del vsebine in uporabnikom omogočajo razširitev ali strnitev vsebine.

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

 

To je le nekaj primerov komponent uporabniškega vmesnika, ki jih ponuja j Query UI. Te komponente lahko uporabite in jih prilagodite za ustvarjanje interaktivnih in uporabniku prijaznih vmesnikov na vaši spletni strani.