close

j Query UI lan Komponen Antarmuka Pangguna- Integrasi lan Panggunaan

j Query UI minangka perpustakaan JavaScript sing kuat lan fleksibel sing dibangun ing ndhuwur jQuery. Iki nyedhiyakake komponen antarmuka pangguna sing siap digunakake lan bisa disesuaikan, supaya gampang nggawe kaca web lan aplikasi web sing interaktif lan nyenengake.

Kanthi j Query UI, sampeyan bisa nggunakake komponen kayata tombol, datepickers, dialog, autocompletes, slider, tab, progressbars, lan akordion. Komponen iki dirancang lan kompatibel karo saben liyane, ngijini sampeyan kanggo mbangun antarmuka fleksibel lan pangguna-loropaken sing seamlessly sesambungan karo pangguna.

 

Kanggo nggabungake j Query UI menyang proyek sampeyan, tindakake langkah iki

  1. Langkah 1: Download jQuery lan j Query UI

    • Dolan maring situs web resmi jQuery( https://jquery.com/ ) lan download jQuery versi paling anyar.
    • Dolan maring website resmi j Query UI( https://jqueryui.com/ ) lan download versi paling anyar saka j Query UI.

  2. Langkah 2: Nggawe Struktur Folder

    • Gawe struktur folder kanggo proyek sampeyan, kalebu direktori kanggo file JavaScript, CSS, lan gambar.

  3. Langkah 3: Nyalin File

    • Nyalin file jQuery lan j Query UI menyang folder JavaScript proyek sampeyan.
    • Nyalin file j Query UI CSS menyang folder CSS proyek sampeyan.
    • Nyalin file gambar j Query UI menyang folder gambar proyek sampeyan.

  4. Langkah 4: Link JavaScript lan File CSS

    • Ing file HTML proyek sampeyan, tambahake <script> tag kanggo ngubungake file jQuery lan j Query UI: 
      <script src="path/to/jquery.js"></script>  
<script src="path/to/jquery-ui.js"></script>  
​
    • Tambah <link> tag kanggo ngubungake Query UI file j CSS: 
      <link rel="stylesheet" href="path/to/jquery-ui.css">  
​
  5. Langkah 5: Gunakake Query UI Komponen j
    • Sampeyan saiki siyap nggunakake Query UI komponen j ing proyek sampeyan. Gunakake kelas lan metode j Query UI ing JavaScript lan aplikasi kelas CSS sing cocog kanggo nggawe antarmuka pangguna interaktif.

      Tuladha:

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

 

Priksa manawa sampeyan wis nemtokake path file kanthi bener kanggo Query UI file jQuery lan j ing kode HTML, lan proyek sampeyan bakal sukses nggabungake j Query UI, ngidini sampeyan nggunakake komponen ing proyek sampeyan.

 

Punika panjelasan rinci kanthi conto kanggo saben komponen antarmuka panganggo sing diwenehake dening j Query UI:

Tombol

Ngidini nggawe tombol interaktif ing kaca web, kanthi fitur kaya tombol radio, kothak centhang, lan efek hover/aktif.

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

 

tukang tanggal

Nyedhiyani antarmuka pangguna-loropaken kanggo milih tanggal saka tanggalan mbosenke kui, ngidini kedhaftar kanggo gampang milih tanggal ing macem-macem format.

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

 

Dialog

Mbisakake nggawe kothak dialog popup sing bisa disesuaikan sing bisa ngemot konten, tombol, lan efek mbukak / nutup.

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

 

Rampung otomatis 

Nyedhiyakake fungsi rampung otomatis nalika pangguna ngetik menyang kolom teks, nampilake saran adhedhasar data sing kasedhiya utawa saka sumber data adoh.

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

 

Panggeser

Ngidini nggawe panggeser kanggo milih nilai saka sawetara nilai sing wis ditemtokake.

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

 

Tab

Mbisakake nggawe konten tab, mbagi konten menyang bagean sing beda-beda, nggawe pangguna gampang ngalih ing antarane bagean sing beda.

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

 

Progressbar

Nyedhiyakake garis kemajuan grafis kanggo nampilake kemajuan tugas sing ditindakake.

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

 

Akordion

Ngidini nggawe unsur sing bisa dilipat, mung nampilake bagean saka konten lan ngidini pangguna nggedhekake utawa ngrusak konten kasebut.

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

 

Iki mung sawetara conto komponen antarmuka panganggo sing diwenehake dening j Query UI. Sampeyan bisa nggunakake komponen iki lan ngatur kanggo nggawe antarmuka interaktif lan pangguna-loropaken ing kaca web.