close

j Query UI ve Kullanıcı Arayüzü Bileşenleri- Entegrasyon ve Kullanım

j, Query UI jQuery üzerine inşa edilmiş güçlü ve esnek bir JavaScript kitaplığıdır. Size kullanıma hazır ve özelleştirilebilir kullanıcı arabirimi bileşenleri sağlayarak etkileşimli ve çekici web sayfaları ve web uygulamaları oluşturmayı kolaylaştırır.

j ile Query UI düğmeler, tarih seçiciler, iletişim kutuları, otomatik tamamlamalar, kaydırıcılar, sekmeler, ilerleme çubukları ve akordeonlar gibi bileşenleri kullanabilirsiniz. Bu bileşenler, kullanıcılarla sorunsuz bir şekilde etkileşim kuran esnek ve kullanıcı dostu arayüzler oluşturmanıza izin verecek şekilde tasarlanmış ve birbiriyle uyumludur.

 

j'yi Query UI projenize entegre etmek için şu adımları izleyin

  1. 1. Adım: jQuery ve j'yi indirin Query UI

    • jQuery resmi web sitesini( https://jquery.com/ ) ziyaret edin ve jQuery'nin en son sürümünü indirin.
    • j Query UI resmi web sitesini( https://jqueryui.com/ ) ziyaret edin ve j'nin en son sürümünü indirin Query UI.

  2. 2. Adım: Klasör Yapısı Oluşturun

    • Projeniz için JavaScript dosyaları, CSS ve resimler için dizinler içeren bir klasör yapısı oluşturun.

  3. 3. Adım: Dosyaları Kopyalayın

    • JQuery ve j Query UI dosyalarını projenizin JavaScript klasörüne kopyalayın.
    • J Query UI CSS dosyalarını projenizin CSS klasörüne kopyalayın.
    • j Query UI resim dosyalarını projenizin resimler klasörüne kopyalayın.

  4. 4. Adım: JavaScript ve CSS Dosyalarını Bağlayın

    • Projenizin HTML dosyasına, <script> jQuery ve j Query UI dosyalarını bağlamak için etiketler ekleyin: 
      <script src="path/to/jquery.js"></script>  
<script src="path/to/jquery-ui.js"></script>  
​
    • <link> j Query UI CSS dosyasını bağlamak için etiketler ekleyin: 
      <link rel="stylesheet" href="path/to/jquery-ui.css">  
​
  5. Adım 5: j Query UI Bileşenlerini Kullanın
    • Query UI Artık projenizde j bileşenlerini kullanmaya hazırsınız. Query UI JavaScript'inizdeki j sınıflarını ve yöntemlerini kullanın ve etkileşimli kullanıcı arabirimleri oluşturmak için karşılık gelen CSS sınıflarını uygulayın.

      Örnek:

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

 

Query UI HTML kodunuzdaki jQuery ve j dosyaları için dosya yollarını doğru bir şekilde belirttiğinizden emin olun ; projeniz j'yi başarıyla entegre Query UI ederek bileşenlerini projenizde kullanmanıza izin verecektir.

 

Burada, j tarafından sağlanan her bir kullanıcı arabirimi bileşeni için örnekler içeren ayrıntılı bir açıklama bulunmaktadır Query UI:

düğmeler

Radyo düğmeleri, onay kutuları ve fareyle üzerine gelme/aktif efektler gibi özelliklerle web sayfalarında etkileşimli düğmelerin oluşturulmasına izin verir.

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

 

tarih seçici

Dinamik olarak oluşturulmuş bir takvimden tarih seçmek için kullanıcı dostu bir arayüz sağlar ve kullanıcıların çeşitli biçimlerdeki tarihleri ​​kolayca seçmesine olanak tanır.

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

 

diyalog

İçerik, düğmeler ve açma/kapama efektleri içerebilen özelleştirilebilir açılır iletişim kutularının oluşturulmasını sağlar.

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

 

otomatik tamamlama 

Kullanıcılar bir metin alanına yazarken, mevcut verilere dayalı veya uzak veri kaynaklarından gelen önerileri görüntüleyerek otomatik tamamlama işlevi sağlar.

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

 

kaydırıcı

Önceden tanımlanmış bir değer aralığından değerleri seçmek için kaydırıcıların oluşturulmasına izin verir.

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

 

Sekmeler

Sekmeli içeriğin oluşturulmasını sağlar, içeriği farklı bölümlere ayırır ve kullanıcıların farklı bölümler arasında geçiş yapmasını kolaylaştırır.

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

 

İlerleme çubuğu

Gerçekleştirilmekte olan bir görevin ilerlemesini görüntülemek için grafiksel bir ilerleme çubuğu sağlar.

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

 

Akordeon

İçeriğin yalnızca bir kısmını görüntüleyerek ve kullanıcıların içeriği genişletmesine veya daraltmasına izin vererek daraltılabilir öğelerin oluşturulmasına izin verir.

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

 

Bunlar, j tarafından sağlanan kullanıcı arabirimi bileşenlerinin yalnızca bazı örnekleridir Query UI. Bu bileşenleri kullanabilir ve web sayfanızda etkileşimli ve kullanıcı dostu arayüzler oluşturmak için özelleştirebilirsiniz.