close

j Query UI dhe Komponentët e Ndërfaqes së Përdoruesit- Integrimi dhe Përdorimi

j Query UI është një bibliotekë e fuqishme dhe fleksibël JavaScript e ndërtuar në krye të jQuery. Ai ju ofron komponentë të gatshëm për përdorim dhe të personalizueshëm të ndërfaqes së përdoruesit, duke e bërë të lehtë krijimin e faqeve dhe aplikacioneve në internet interaktive dhe tërheqëse.

Me j Query UI, mund të përdorni komponentë të tillë si butonat, zgjedhësit e datave, dialogët, plotësimet automatike, rrëshqitësit, skedat, shiritat e përparimit dhe fizarmonikët. Këta komponentë janë të dizajnuar dhe të pajtueshëm me njëri-tjetrin, duke ju lejuar të ndërtoni ndërfaqe fleksibël dhe miqësore për përdoruesit që ndërveprojnë pa probleme me përdoruesit.

 

Për të integruar j Query UI në projektin tuaj, ndiqni këto hapa

  1. Hapi 1: Shkarkoni jQuery dhe j Query UI

    • Vizitoni faqen zyrtare të jQuery( https://jquery.com/ ) dhe shkarkoni versionin më të fundit të jQuery.
    • Vizitoni Query UI faqen zyrtare të j( https://jqueryui.com/ ) dhe shkarkoni versionin më të fundit të j Query UI.

  2. Hapi 2: Krijoni strukturën e dosjeve

    • Krijoni një strukturë dosjeje për projektin tuaj, duke përfshirë drejtoritë për skedarët JavaScript, CSS dhe imazhe.

  3. Hapi 3: Kopjoni skedarët

    • Kopjoni skedarët jQuery dhe j Query UI në dosjen JavaScript të projektit tuaj.
    • Kopjoni skedarët j Query UI CSS në dosjen CSS të projektit tuaj.
    • Kopjoni skedarët e imazheve j Query UI në dosjen e imazheve të projektit tuaj.

  4. Hapi 4: Lidhni skedarët JavaScript dhe CSS

    • Në skedarin HTML të projektit tuaj, shtoni <script> etiketa për të lidhur skedarët jQuery dhe j Query UI: 
      <script src="path/to/jquery.js"></script>  
<script src="path/to/jquery-ui.js"></script>  
​
    • Shtoni <link> etiketa për të lidhur skedarin j Query UI CSS: 
      <link rel="stylesheet" href="path/to/jquery-ui.css">  
​
  5. Hapi 5: Përdorni j Query UI Komponentët
    • Tani jeni gati të përdorni Query UI komponentët j në projektin tuaj. Përdorni Query UI klasat dhe metodat j në JavaScript-in tuaj dhe aplikoni klasat përkatëse CSS për të krijuar ndërfaqe interaktive të përdoruesit.

      Shembull:

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

 

Sigurohuni që të keni specifikuar saktë shtigjet e skedarëve për Query UI skedarët jQuery dhe j në kodin tuaj HTML dhe projekti juaj do të integrojë me sukses j Query UI, duke ju lejuar të përdorni përbërësit e tij në projektin tuaj.

 

Këtu është një shpjegim i detajuar me shembuj për secilin komponent të ndërfaqes së përdoruesit të ofruar nga j Query UI:

Butonat

Lejon krijimin e butonave ndërveprues në faqet e internetit, me veçori si butonat e radios, kutitë e zgjedhjes dhe efektet lëvizëse/aktive.

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

 

Zgjedhësi i datës

Ofron një ndërfaqe miqësore për përdoruesit për zgjedhjen e datave nga një kalendar i krijuar në mënyrë dinamike, duke i lejuar përdoruesit të zgjedhin me lehtësi datat në formate të ndryshme.

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

 

Dialogu

Aktivizon krijimin e kutive të dialogut të personalizueshëm që mund të përmbajnë përmbajtje, butona dhe efekte hapje/mbylljeje.

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

 

Plotëso automatikisht 

Ofron funksione të plotësimit automatik ndërsa përdoruesit shkruajnë në një fushë teksti, duke shfaqur sugjerime bazuar në të dhënat e disponueshme ose nga burime të largëta të të dhënave.

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

 

Rrëshqitës

Lejon krijimin e rrëshqitësve për zgjedhjen e vlerave nga një gamë e paracaktuar vlerash.

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

 

Skedat

Mundëson krijimin e përmbajtjes me skeda, duke e ndarë përmbajtjen në seksione të ndryshme, duke e bërë të lehtë për përdoruesit kalimin midis seksioneve të ndryshme.

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

 

Shiriti i progresit

Ofron një shirit progresi grafik për të shfaqur ecurinë e një detyre që po kryhet.

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

 

Fizarmonikë

Lejon krijimin e elementeve të palosshëm, duke shfaqur vetëm një pjesë të përmbajtjes dhe duke i lejuar përdoruesit të zgjerojnë ose fshijnë përmbajtjen.

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

 

Këta janë vetëm disa shembuj të komponentëve të ndërfaqes së përdoruesit të ofruara nga j Query UI. Ju mund t'i përdorni këto komponentë dhe t'i personalizoni për të krijuar ndërfaqe interaktive dhe miqësore për përdoruesit në faqen tuaj të internetit.