close

j Query UI da Abubuwan Mu'amalar Mai amfani- Haɗin kai da Amfani

j Query UI babban ɗakin karatu na JavaScript ne mai ƙarfi kuma mai sassauƙa wanda aka gina akan jQuery. Yana ba ku shirye-shiryen amfani da abubuwan haɗin haɗin haɗin mai amfani, yana sauƙaƙa ƙirƙirar shafukan yanar gizo masu ban sha'awa da aikace-aikacen yanar gizo.

Tare da j Query UI, zaku iya amfani da abubuwan da aka gyara kamar maɓallai, maɓallan kwanan wata, maganganu, autocompletes, sliders, shafuka, mashaya ci gaba, da accordions. An tsara waɗannan abubuwan haɗin gwiwa kuma sun dace da juna, suna ba ku damar gina sassauƙa da mu'amala mai sauƙin amfani waɗanda ke mu'amala da masu amfani ba tare da matsala ba.

 

Don haɗa j Query UI cikin aikinku, bi waɗannan matakan

  1. Mataki 1: Zazzage jQuery da j Query UI

    • Ziyarci gidan yanar gizon hukuma na jQuery( https://jquery.com/ ) kuma zazzage sabuwar sigar jQuery.
    • Ziyarci gidan yanar gizon j Query UI( https://jqueryui.com/ ) kuma zazzage sabuwar sigar j Query UI.

  2. Mataki 2: Ƙirƙiri Tsarin Jaka

    • Ƙirƙiri tsarin babban fayil don aikinku, gami da kundayen adireshi don fayilolin JavaScript, CSS, da hotuna.

  3. Mataki 3: Kwafi Fayilolin

    • Kwafi fayilolin jQuery da j Query UI cikin babban fayil ɗin JavaScript na aikin ku.
    • Kwafi fayilolin j Query UI CSS zuwa babban fayil ɗin CSS na aikin ku.
    • Kwafi fayilolin hoton j Query UI cikin babban fayil ɗin hotuna na aikinku.

  4. Mataki 4: Haɗa JavaScript da Fayilolin CSS

    • A cikin fayil ɗin HTML ɗin aikin ku, ƙara <script> tags don haɗa fayilolin jQuery da j Query UI: 
      <script src="path/to/jquery.js"></script>  
<script src="path/to/jquery-ui.js"></script>  
​
    • Ƙara <link> tags don haɗa fayil ɗin j Query UI CSS: 
      <link rel="stylesheet" href="path/to/jquery-ui.css">  
​
  5. Mataki na 5: Yi amfani da Query UI kayan j
    • Yanzu kun shirya don amfani da Query UI abubuwan j a cikin aikinku. Yi amfani da azuzuwan j Query UI da hanyoyin cikin JavaScript ɗin ku kuma yi amfani da azuzuwan CSS masu dacewa don ƙirƙirar mu'amalar mai amfani.

      Misali:

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

 

Tabbatar cewa kun ƙayyade hanyoyin fayil ɗin daidaitattun fayilolin jQuery da j Query UI a cikin lambar HTML ɗinku, kuma aikinku zai sami nasarar haɗa j Query UI, yana ba ku damar amfani da abubuwan da ke cikin aikin ku.

 

Anan ga cikakken bayani tare da misalan kowane ɓangaren mahaɗan mai amfani da j Query UI:

Buttons

Yana ba da damar ƙirƙirar maɓallai masu mu'amala a shafukan yanar gizo, tare da fasalulluka kamar maɓallan rediyo, akwatunan rajistan shiga, da tasirin shawagi/aiki.

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

 

Mai ɗaukar kwanan wata

Yana ba da hanyar haɗin yanar gizo na abokantaka don zaɓar ranaku daga kalandar da aka ƙirƙira, yana ba masu amfani damar zabar ranaku cikin sauƙi cikin tsari iri-iri.

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

 

Magana

Yana ba da damar ƙirƙirar akwatunan maganganu waɗanda za su iya ƙunsar abun ciki, maɓalli, da tasirin buɗewa/rufe.

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

 

Cikakke ta atomatik 

Yana ba da aikin kammalawa ta atomatik yayin da masu amfani ke rubutawa cikin filin rubutu, suna nuna shawarwari dangane da samuwan bayanai ko daga tushen bayanan nesa.

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

 

Slider

Yana ba da damar ƙirƙira maɓalli don zaɓar ƙima daga ƙayyadaddun ƙimar ƙima.

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

 

Tabs

Yana ba da damar ƙirƙirar abubuwan da aka buga, rarraba abun ciki zuwa sassa daban-daban, yana sauƙaƙa wa masu amfani don canzawa tsakanin sassa daban-daban.

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

 

Progressbar

Yana ba da sandar ci gaba mai hoto don nuna ci gaban aikin da ake yi.

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

 

Accordion

Yana ba da damar ƙirƙirar abubuwa masu ruɗuwa, nuna wani yanki na abun ciki kawai da ƙyale masu amfani su faɗaɗa ko rushe abun ciki.

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

 

Waɗannan wasu misalai ne kawai na abubuwan haɗin haɗin mai amfani da j Query UI. Kuna iya amfani da waɗannan abubuwan haɗin gwiwa kuma ku keɓance su don ƙirƙirar mu'amala mai ma'amala da abokantaka a shafin yanar gizonku.