HTML5 ve CSS3 Programlama için AJAX'te Seçilebilir Öğeler Nasıl Yapılır - mankenler

Kullanıcıların bir öğe listesinden seçim yapmasını istediğiniz bir durumunuz olabilir. AJAX, HTML5 ve CSS3 programcılarına bu seçeneği sunar. Seçilebilir widget, bu işlevselliği sıradan bir listeden oluşturmak için mükemmel bir yoldur. Kullanıcı seçmek için sürükleyebilir veya öğeleri Ctrl + tıklatabilir. Özel CSS sınıfları, öğenin seçilmesi veya seçilmesi için dikkate alındığını belirtmek için otomatik olarak uygulanır.

Seçilebilir bir öğe yapmak için şu adımları izleyin:

1. Sırasız bir listeden başlayın.

   HTML'de standart bir sırasız liste oluşturun. Bir jQuery düğümü olarak tanımlanabilmesi için ul'a bir kimlik verin:

   
   seçilebilir
   
   alfa
   beta
   gama
   delta
   
   
   
   
   
   
   
   
   

2. Seçim ve seçilen durumlar için CSS sınıfları ekleyin.

   Öğeler seçilirken veya seçildiğinde seçilebilir öğelerin görünümünü değiştirmek istiyorsanız, gösterildiği gibi CSS sınıfları ekleyin. Bazı özel sınıflar (ui seçimi ve ui seçimi) önceden tanımlanmıştır ve uygun zamanlarda elemanlara eklenecektir:

   h1 {text-align: center;} # seçilebilir. u-seçme {background-color: gray;} # seçilebilir. ui-selected {background-color: black; renk: beyaz;}
   

3. init () işlevinde, listeyi seçilebilir bir düğüm olarak belirtin.

   Standart jQuery sözdizimini kullanın: selectable ().

   $ ("# seçilebilir"). () Seçilebilir;
   

Sınıf, seçildikten sonra tüm öğelere eklenir. Bu sınıfa bir çeşit CSS eklediğinizden emin olun, aksi takdirde o öğelerin seçildiğini söyleyemezsiniz.

Seçilen tüm öğelerle bir şeyler yapmak isterseniz, ui seçili sınıfla bir jQuery öğe grubu oluşturun:

var selectedItems = $ (".ui-selected");