close

j Query UI dan Komponen Antara Muka Pengguna- Penyepaduan dan Penggunaan

j Query UI ialah perpustakaan JavaScript yang berkuasa dan fleksibel yang dibina di atas jQuery. Ia memberikan anda komponen antara muka pengguna yang sedia untuk digunakan dan boleh disesuaikan, menjadikannya mudah untuk membuat halaman web dan aplikasi web yang interaktif dan menarik.

Dengan j Query UI, anda boleh menggunakan komponen seperti butang, pemilih tarikh, dialog, autolengkap, peluncur, tab, bar kemajuan dan akordion. Komponen ini direka bentuk dan serasi antara satu sama lain, membolehkan anda membina antara muka yang fleksibel dan mesra pengguna yang berinteraksi dengan pengguna dengan lancar.

 

Untuk menyepadukan j Query UI ke dalam projek anda, ikut langkah ini

  1. Langkah 1: Muat turun jQuery dan j Query UI

  2. Langkah 2: Buat Struktur Folder

    • Buat struktur folder untuk projek anda, termasuk direktori untuk fail JavaScript, CSS dan imej.

  3. Langkah 3: Salin Fail

    • Salin fail jQuery dan j Query UI ke dalam folder JavaScript projek anda.
    • Salin fail j Query UI CSS ke dalam folder CSS projek anda.
    • Salin fail imej j Query UI ke dalam folder imej projek anda.

  4. Langkah 4: Pautkan Fail JavaScript dan CSS

    • Dalam fail HTML projek anda, tambahkan <script> teg untuk memautkan fail jQuery dan j Query UI: 
      <script src="path/to/jquery.js"></script>  
<script src="path/to/jquery-ui.js"></script>  
​
    • Tambah <link> tag untuk memautkan fail j Query UI CSS: 
      <link rel="stylesheet" href="path/to/jquery-ui.css">  
​
  5. Langkah 5: Gunakan Query UI Komponen j
    • Anda kini bersedia untuk menggunakan Query UI komponen j dalam projek anda. Gunakan Query UI kelas dan kaedah j dalam JavaScript anda dan gunakan kelas CSS yang sepadan untuk mencipta antara muka pengguna interaktif.

      Contoh:

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

 

Pastikan anda telah menyatakan dengan betul laluan fail untuk Query UI fail jQuery dan j dalam kod HTML anda, dan projek anda akan berjaya menyepadukan j Query UI, membolehkan anda menggunakan komponennya dalam projek anda.

 

Berikut ialah penjelasan terperinci dengan contoh untuk setiap komponen antara muka pengguna yang disediakan oleh j Query UI:

Butang

Membenarkan penciptaan butang interaktif pada halaman web, dengan ciri seperti butang radio, kotak pilihan dan kesan tuding/aktif.

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

 

Pencari tarikh

Menyediakan antara muka mesra pengguna untuk memilih tarikh daripada kalendar yang dijana secara dinamik, membolehkan pengguna memilih tarikh dalam pelbagai format dengan mudah.

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

Membolehkan penciptaan kotak dialog pop timbul boleh disesuaikan yang boleh mengandungi kandungan, butang dan kesan buka/tutup.

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

 

Autolengkap 

Menyediakan kefungsian autolengkap semasa pengguna menaip ke dalam medan teks, memaparkan cadangan berdasarkan data yang tersedia atau daripada sumber data jauh.

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

 

peluncur

Membenarkan penciptaan peluncur untuk memilih nilai daripada julat nilai yang telah ditetapkan.

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

 

Tab

Membolehkan penciptaan kandungan tab, membahagikan kandungan kepada bahagian yang berbeza, memudahkan pengguna untuk bertukar antara bahagian yang berbeza.

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

 

Bar kemajuan

Menyediakan bar kemajuan grafik untuk memaparkan kemajuan tugas yang dilakukan.

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

 

Akordion

Membenarkan penciptaan elemen boleh lipat, memaparkan hanya sebahagian daripada kandungan dan membenarkan pengguna mengembangkan atau meruntuhkan kandungan.

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

 

Ini hanyalah beberapa contoh komponen antara muka pengguna yang disediakan oleh j Query UI. Anda boleh menggunakan komponen ini dan menyesuaikannya untuk mencipta antara muka interaktif dan mesra pengguna pada halaman web anda.