close

j Query UI agus Comhpháirteanna Comhéadain Úsáideora- Comhtháthú agus Úsáid

Is leabharlann JavaScript chumhachtach agus solúbtha í j Query UI atá tógtha ar bharr jQuery. Soláthraíonn sé comhpháirteanna comhéadan úsáideora atá réidh le húsáid agus inoiriúnaithe duit, rud a fhágann go bhfuil sé éasca leathanaigh ghréasáin agus feidhmchláir ghréasáin idirghníomhacha agus tharraingteacha a chruthú.

Le j Query UI, is féidir leat úsáid a bhaint as comhpháirteanna ar nós cnaipí, roghnóirí dáta, dialóga, uathchríochnaithe, sleamhnáin, cluaisíní, barraí dul chun cinn, agus bosca ceoil. Tá na comhpháirteanna seo deartha agus comhoiriúnach lena chéile, rud a ligeann duit comhéadain sholúbtha so-úsáidte a thógáil a idirghníomhaíonn gan uaim le húsáideoirí.

 

Chun j a chomhtháthú Query UI le do thionscadal, lean na céimeanna seo

  1. Céim 1: Íoslódáil jQuery agus j Query UI

    • Tabhair cuairt ar shuíomh Gréasáin oifigiúil jQuery( https://jquery.com/ ) agus íoslódáil an leagan is déanaí de jQuery.
    • Tabhair cuairt ar an suíomh Gréasáin oifigiúil j Query UI( https://jqueryui.com/ ) agus íoslódáil an leagan is déanaí de j Query UI.

  2. Céim 2: Cruthaigh Struchtúr Fillteán

    • Cruthaigh struchtúr fillteán do do thionscadal, lena n-áirítear eolairí do chomhaid JavaScript, CSS, agus íomhánna.

  3. Céim 3: Cóipeáil na Comhaid

    • Cóipeáil na Query UI comhaid jQuery agus j isteach i bhfillteán JavaScript do thionscadal.
    • Cóipeáil na Query UI comhaid j CSS isteach i bhfillteán CSS do thionscadal.
    • Cóipeáil na comhaid íomhá j Query UI isteach i bhfillteán íomhánna do thionscadal.

  4. Céim 4: Nasc JavaScript agus Comhaid CSS

    • I gcomhad HTML do thionscadal, cuir clibeanna leis chun na comhaid <script> jQuery agus j a nascadh: Query UI 
      <script src="path/to/jquery.js"></script>  
<script src="path/to/jquery-ui.js"></script>  
​
    • Cuir <link> clibeanna leis chun an Query UI comhad j CSS a nascadh: 
      <link rel="stylesheet" href="path/to/jquery-ui.css">  
​
  5. Céim 5: Úsáid j Query UI Comhpháirteanna
    • Tá tú réidh anois chun j Query UI comhpháirteanna a úsáid i do thionscadal. Bain úsáid as na ranganna agus na modhanna j Query UI i do JavaScript agus cuir na ranganna CSS comhfhreagracha i bhfeidhm chun comhéadain úsáideora idirghníomhacha a chruthú.

      Sampla:

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

 

Cinntigh go bhfuil na cosáin chomhad sonraithe i gceart agat do na comhaid jQuery agus j Query UI i do chód HTML, agus comhtháthóidh do thionscadal j, go rathúil Query UI, ag ligean duit a chomhpháirteanna a úsáid i do thionscadal.

 

Seo míniú mionsonraithe le samplaí do gach comhpháirt comhéadan úsáideora curtha ar fáil ag j Query UI:

Cnaipí

Ligeann sé seo cnaipí idirghníomhacha a chruthú ar leathanaigh ghréasáin, le gnéithe cosúil le cnaipí raidió, ticbhoscaí, agus éifeachtaí ainlithe/gníomhach.

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

 

Roghnóir dáta

Soláthraíonn sé comhéadan atá éasca le húsáid chun dátaí a roghnú ó fhéilire a ghintear go dinimiciúil, a ligeann d'úsáideoirí dátaí a roghnú go héasca i bhformáidí éagsúla.

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

 

Dialóg

Cumasaíonn sé boscaí dialóige aníos inoiriúnaithe a chruthú a bhféadfaidh ábhar, cnaipí agus éifeachtaí oscailte/dún a bheith iontu.

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

 

Uathchríochnaithe 

Soláthraíonn sé feidhmiúlacht uathchríochnaithe de réir mar a chlóscríobhann úsáideoirí isteach i réimse téacs, ag taispeáint moltaí bunaithe ar shonraí atá ar fáil nó ó fhoinsí iargúlta sonraí.

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

 

Sleamhnán

Ligeann sé seo sleamhnáin a chruthú chun luachanna a roghnú ó raon luachanna réamhshainithe.

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

 

Cluaisíní

Cumasaíonn sé ábhar cluaisíní a chruthú, roinntear an t-ábhar ina rannóga éagsúla, rud a fhágann go mbeidh sé éasca d’úsáideoirí aistriú idir rannóga éagsúla.

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

 

Barra Dul Chun Cinn

Soláthraíonn barra dul chun cinn grafach chun dul chun cinn taisc atá á dhéanamh a thaispeáint.

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

 

Bosca ceoil

Ligeann sé eilimintí infhillte a chruthú, gan ach cuid den ábhar a thaispeáint agus ligean d'úsáideoirí an t-ábhar a leathnú nó a laghdú.

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

 

Níl anseo ach roinnt samplaí de chomhpháirteanna an chomhéadain úsáideora a chuir j Query UI. Is féidir leat na comhpháirteanna seo a úsáid agus iad a shaincheapadh chun comhéadain idirghníomhacha atá éasca le húsáid a chruthú ar do leathanach gréasáin.