close

j Query UI i komponente korisničkog sučelja- integracija i upotreba

j Query UI je snažna i fleksibilna JavaScript biblioteka izgrađena na jQueryju. Omogućuje vam komponente korisničkog sučelja spremne za korištenje i prilagodljive, što olakšava stvaranje interaktivnih i privlačnih web stranica i web aplikacija.

S j Query UI možete koristiti komponente kao što su gumbi, birači datuma, dijalozi, samodovršeci, klizači, kartice, trake napretka i harmonike. Ove komponente su dizajnirane i kompatibilne jedna s drugom, omogućujući vam da izgradite fleksibilna i user-friendly sučelja koja besprijekorno komuniciraju s korisnicima.

 

Za integraciju j Query UI u svoj projekt, slijedite ove korake

  1. 1. korak: preuzmite jQuery i j Query UI

    • Posjetite službenu web stranicu jQuery( https://jquery.com/ ) i preuzmite najnoviju verziju jQueryja.
    • Posjetite službenu web stranicu j Query UI( https://jqueryui.com/ ) i preuzmite najnoviju verziju j Query UI.

  2. Korak 2: Stvorite strukturu mape

    • Stvorite strukturu mapa za svoj projekt, uključujući direktorije za JavaScript datoteke, CSS i slike.

  3. Korak 3: Kopirajte datoteke

    • Kopirajte jQuery i j Query UI datoteke u JavaScript mapu vašeg projekta.
    • Kopirajte j Query UI CSS datoteke u CSS mapu vašeg projekta.
    • Kopirajte j Query UI slikovne datoteke u mapu slika vašeg projekta.

  4. Korak 4: Povežite JavaScript i CSS datoteke

    • U HTML datoteci vašeg projekta dodajte <script> oznake za povezivanje Query UI datoteka jQuery i j: 
      <script src="path/to/jquery.js"></script>  
<script src="path/to/jquery-ui.js"></script>  
​
    • Dodajte <link> oznake za povezivanje j Query UI CSS datoteke: 
      <link rel="stylesheet" href="path/to/jquery-ui.css">  
​
  5. Korak 5: Koristite j Query UI komponente
    • Sada ste spremni koristiti j Query UI komponenti u svom projektu. Upotrijebite j Query UI klase i metode u svom JavaScriptu i primijenite odgovarajuće CSS klase za stvaranje interaktivnih korisničkih sučelja.

      Primjer:

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

 

Provjerite jeste li ispravno odredili staze datoteka za jQuery i j Query UI datoteke u svom HTML kodu i vaš će projekt uspješno integrirati j Query UI, omogućujući vam korištenje njegovih komponenti u vašem projektu.

 

Ovdje je detaljno objašnjenje s primjerima za svaku komponentu korisničkog sučelja koje pruža j Query UI:

Gumbi

Omogućuje stvaranje interaktivnih gumba na web stranicama, sa značajkama kao što su radio gumbi, potvrdni okviri i lebdeći/aktivni efekti.

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

 

Birač datuma

Pruža korisničko sučelje za odabir datuma iz dinamički generiranog kalendara, omogućujući korisnicima jednostavan odabir datuma u različitim formatima.

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

 

Dijalog

Omogućuje stvaranje prilagodljivih skočnih dijaloških okvira koji mogu sadržavati sadržaj, gumbe i efekte otvaranja/zatvaranja.

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

 

Automatsko dovršavanje 

Omogućuje funkciju automatskog dovršavanja dok korisnici upisuju u tekstualno polje, prikazujući prijedloge temeljene na dostupnim podacima ili iz udaljenih izvora podataka.

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

 

Klizač

Omogućuje stvaranje klizača za odabir vrijednosti iz unaprijed definiranog raspona vrijednosti.

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

 

Kartice

Omogućuje stvaranje sadržaja s karticama, dijeljenje sadržaja u različite odjeljke, što korisnicima olakšava prebacivanje između različitih odjeljaka.

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

 

Traka za napredak

Pruža grafičku traku napretka za prikaz napretka zadatka koji se izvodi.

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

 

Harmonika

Omogućuje stvaranje sklopivih elemenata, prikazujući samo dio sadržaja i dopuštajući korisnicima da prošire ili sažmu sadržaj.

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

 

Ovo su samo neki primjeri komponenti korisničkog sučelja koje nudi j Query UI. Možete koristiti te komponente i prilagoditi ih za stvaranje interaktivnih sučelja prilagođenih korisniku na vašoj web stranici.