close

j Query UI na Vipengele vya Kiolesura cha Mtumiaji- Ujumuishaji na Matumizi

j Query UI ni maktaba yenye nguvu na rahisi ya JavaScript iliyojengwa juu ya jQuery. Inakupa vipengele vya kiolesura vilivyo tayari kutumia na vinavyoweza kugeuzwa kukufaa, na kuifanya iwe rahisi kuunda kurasa za wavuti shirikishi na za kuvutia na programu za wavuti.

Ukiwa na j Query UI, unaweza kutumia vipengee kama vile vitufe, vichagua tarehe, mazungumzo, kukamilisha kiotomatiki, vitelezi, vichupo, upau wa maendeleo na accordions. Vipengee hivi vimeundwa na kuendana na kila kimoja, hivyo kukuruhusu kuunda violesura vinavyonyumbulika na vinavyofaa mtumiaji ambavyo hutangamana bila mshono na watumiaji.

 

Ili kujumuisha j Query UI kwenye mradi wako, fuata hatua hizi

  1. Hatua ya 1: Pakua jQuery na j Query UI

  2. Hatua ya 2: Unda Muundo wa Folda

    • Unda muundo wa folda wa mradi wako, ikijumuisha saraka za faili za JavaScript, CSS na picha.

  3. Hatua ya 3: Nakili Faili

    • Nakili faili za jQuery na j Query UI kwenye folda ya JavaScript ya mradi wako.
    • Nakili faili za j Query UI CSS kwenye folda ya CSS ya mradi wako.
    • Nakili Query UI faili za picha za j kwenye folda ya picha ya mradi wako.

  4. Hatua ya 4: Unganisha JavaScript na Faili za CSS

    • Katika faili ya HTML ya mradi wako, ongeza <script> vitambulisho ili kuunganisha faili za jQuery na j Query UI: 
      <script src="path/to/jquery.js"></script>  
<script src="path/to/jquery-ui.js"></script>  
​
    • Ongeza <link> vitambulisho ili kuunganisha Query UI faili ya j CSS: 
      <link rel="stylesheet" href="path/to/jquery-ui.css">  
​
  5. Hatua ya 5: Tumia Query UI Vipengee vya j
    • Sasa uko tayari kutumia Query UI vipengele vya j katika mradi wako. Tumia Query UI madarasa na mbinu za j katika JavaScript yako na utumie madarasa yanayolingana ya CSS ili kuunda miingiliano ya watumiaji inayoingiliana.

      Mfano:

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

 

Hakikisha kwamba umebainisha kwa usahihi njia za faili za jQuery na j Query UI faili katika msimbo wako wa HTML, na mradi wako utaunganisha kwa ufanisi j Query UI, kukuruhusu kutumia vijenzi vyake katika mradi wako.

 

Hapa kuna maelezo ya kina na mifano kwa kila sehemu ya kiolesura iliyotolewa na j Query UI:

Vifungo

Inaruhusu uundaji wa vitufe vya kuingiliana kwenye kurasa za wavuti, zilizo na vipengele kama vile vitufe vya redio, visanduku vya kuteua, na madoido ya kuelea/amilifu.

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

 

Kichagua tarehe

Hutoa kiolesura kinachofaa mtumiaji kwa kuchagua tarehe kutoka kwa kalenda inayozalishwa kwa nguvu, kuruhusu watumiaji kuchagua kwa urahisi tarehe katika miundo mbalimbali.

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

 

Mazungumzo

Huwasha uundaji wa visanduku ibukizi vinavyoweza kugeuzwa kukufaa ambavyo vinaweza kuwa na maudhui, vitufe, na madoido wazi/kufunga.

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

 

Kamilisha kiotomatiki 

Hutoa utendakazi wa ukamilishaji kiotomatiki watumiaji wanapoandika kwenye sehemu ya maandishi, kuonyesha mapendekezo kulingana na data inayopatikana au kutoka kwa vyanzo vya mbali vya data.

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

 

Kitelezi

Huruhusu uundaji wa vitelezi kwa ajili ya kuchagua thamani kutoka kwa anuwai ya thamani iliyoainishwa awali.

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

 

Vichupo

Huwasha uundaji wa maudhui ya vichupo, kugawanya maudhui katika sehemu tofauti, na kurahisisha watumiaji kubadili kati ya sehemu tofauti.

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

 

Progressbar

Hutoa upau wa maendeleo wa picha ili kuonyesha maendeleo ya kazi inayotekelezwa.

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

 

Accordion

Huruhusu uundaji wa vipengele vinavyoweza kukunjwa, kuonyesha sehemu tu ya maudhui na kuruhusu watumiaji kupanua au kukunja maudhui.

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

 

Hii ni baadhi tu ya mifano ya vijenzi vya kiolesura vilivyotolewa na j Query UI. Unaweza kutumia vipengele hivi na kuvibinafsisha ili kuunda violesura shirikishi na vinavyofaa mtumiaji kwenye ukurasa wako wa wavuti.