close

j Query UI ir vartotojo sąsajos komponentai – integravimas ir naudojimas

j Query UI yra galinga ir lanksti JavaScript biblioteka, sukurta ant jQuery. Jame yra paruošti naudoti ir pritaikomi vartotojo sąsajos komponentai, todėl lengva kurti interaktyvius ir patrauklius tinklalapius ir žiniatinklio programas.

Naudodami j Query UI galite naudoti tokius komponentus kaip mygtukai, datos rinkikliai, dialogo langai, automatinis užbaigimas, slankikliai, skirtukai, eigos juostos ir akordeonai. Šie komponentai yra sukurti ir suderinami vienas su kitu, todėl galite sukurti lanksčias ir patogias sąsajas, kurios sklandžiai sąveikauja su vartotojais.

 

Norėdami integruoti j Query UI į savo projektą, atlikite šiuos veiksmus

  1. 1 veiksmas: atsisiųskite jQuery ir j Query UI

    • Apsilankykite oficialioje „jQuery“ svetainėje( https://jquery.com/ ) ir atsisiųskite naujausią „jQuery“ versiją.
    • Apsilankykite oficialioje j Query UI svetainėje( https://jqueryui.com/ ) ir atsisiųskite naujausią j versiją Query UI.

  2. 2 veiksmas: sukurkite aplanko struktūrą

    • Sukurkite projekto aplanko struktūrą, įskaitant „JavaScript“ failų, CSS ir vaizdų katalogus.

  3. 3 veiksmas: nukopijuokite failus

    • Nukopijuokite jQuery ir j Query UI failus į savo projekto JavaScript aplanką.
    • Nukopijuokite j Query UI CSS failus į savo projekto CSS aplanką.
    • Nukopijuokite j Query UI vaizdo failus į savo projekto vaizdų aplanką.

  4. 4 veiksmas: susiekite „JavaScript“ ir CSS failus

    • Savo projekto HTML faile pridėkite <script> žymų, kad susietumėte jQuery ir j Query UI failus: 
      <script src="path/to/jquery.js"></script>  
<script src="path/to/jquery-ui.js"></script>  
​
    • Pridėkite <link> žymų, kad susietumėte j Query UI CSS failą: 
      <link rel="stylesheet" href="path/to/jquery-ui.css">  
​
  5. 5 veiksmas: naudokite j Query UI komponentus
    • Dabar esate pasirengę naudoti j Query UI komponentus savo projekte. Naudokite j Query UI klases ir metodus savo „JavaScript“ ir pritaikykite atitinkamas CSS klases, kad sukurtumėte interaktyvias vartotojo sąsajas.

      Pavyzdys:

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

 

Įsitikinkite, kad savo HTML kode teisingai nurodėte jQuery ir j Query UI failų kelius, o jūsų projektas sėkmingai integruos j Query UI, leisdamas naudoti jo komponentus savo projekte.

 

Čia yra išsamus paaiškinimas su kiekvieno vartotojo sąsajos komponento, pateikto j, pavyzdžiais Query UI:

Mygtukai

Leidžia tinklalapiuose kurti interaktyvius mygtukus su tokiomis funkcijomis kaip radijo mygtukai, žymimieji laukeliai ir užvedimo / aktyvūs efektai.

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

 

Datos rinkiklis

Suteikia patogią sąsają, leidžiančią pasirinkti datas iš dinamiškai generuojamo kalendoriaus, todėl vartotojai gali lengvai pasirinkti įvairių formatų datas.

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

 

Dialogas

Leidžia kurti tinkinamus iššokančiuosius dialogo langus, kuriuose gali būti turinio, mygtukų ir atidarymo / uždarymo efektų.

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

 

Automatinis užbaigimas 

Teikia automatinio užbaigimo funkciją, kai naudotojai įveda teksto lauką, rodydami pasiūlymus pagal turimus duomenis arba iš nuotolinių duomenų šaltinių.

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

 

Slankiklis

Leidžia kurti slankiklius, kad būtų galima pasirinkti reikšmes iš iš anksto nustatyto reikšmių diapazono.

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

 

Skirtukai

Leidžia kurti skirtukų turinį, padalijant turinį į skirtingas dalis, todėl naudotojai gali lengvai perjungti skirtingus skyrius.

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

 

Progreso juosta

Pateikiama grafinė eigos juosta, rodanti atliekamos užduoties eigą.

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

 

Akordeonas

Leidžia kurti sutraukiamus elementus, rodančius tik dalį turinio ir leidžiančius vartotojams išplėsti arba sutraukti turinį.

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

 

Tai tik keli vartotojo sąsajos komponentų pavyzdžiai, kuriuos pateikia j Query UI. Galite naudoti šiuos komponentus ir pritaikyti juos, kad sukurtumėte interaktyvias ir patogias sąsajas savo tinklalapyje.