Bir kullanıcı başka bir tablonun hücresinin üzerine geldiğinde nasıl bir veri tablosu görüntüleyebilirim?

Question

Nesnelerin listesinden bir tablo oluşturmam gerekiyor. Her satır, her nesne için yalnızca temel bilgileri içerecektir. Ancak, kullanıcı belirli bir hücreye geçtiğinde, bir açılır pencere ister, bu belirli nesnenin tüm bilgilerini içerir. Belki pop-up bir tür tüm detaylar ile bir tablo şeklinde olmalıdır? Bunu nasıl başarabilirim? JQuery'yi de üzerinde bazı efektlerle kullanabilir miyim?

Answer 1

Bu tür şeyler için jQuery tooltip kullanıyorum. Rasgele stil uygulayabileceğiniz araç ipucu bölmesini doldurmak için Javascript'i çalıştırmak için bodyHandler seçeneğini kullanabilirsiniz. Örneklere bakın.

Answer 2

Evet yapabilirsiniz. Bunu yapmak için http://dev.iceburg.net/jquery/jqModal/'u kullanabilirsiniz.

Answer 3

Mouseover olay dinleyicisini bağlama - bu şekilde istenen öğenin üzerine geldiklerinde geri aranmanız çağrılır. Geri aramada, olayı tetikleyen öğeye erişebilirsiniz - sizin durumunuzda td veya tr - bu, uygun jquery seçiciyi kullanarak tüm satırın içeriğini alır. Ardından bir iletişim kutusu görüntüleyebilir ve şimdi iletişim kutusunun içinde görüntüleyebileceğiniz içeriğe sahip olabilirsiniz.

Answer 4

yep, jQuery bu tür şeyler için harikadır.

iki yol kendisine do (en azından) vardır:

1. önceden doldurulmuş ve (CSS) gizli: onları konumlandırmak için CSS kullanarak HTML sayfasında görebileceğiniz hücrelerin içindeki tüm pop-up detay tabloları oluşturmak ana katman (ve hücrenin dışına) 'üstünde' ve display:none ile imleç ana hücrede olduğunda görünür hale getirmek için bir .maincell:hover .detailtable { display:block;} ekleyin.

2. AJAX: Her ana hücrenin "mouseenter"/"mouseleave" olaylara bağlamak fonksiyonları, orada tercihen sabit bir yere, bir konumlandırılmış <div> içinde sunucu ve ekrandan ayrıntı tablosunu almak için AJAX kullanın veya belki bir kaç piksel imlecin sağında (eğer küçük bir masa ise). jQuery's $("#inspector").load(dataURL) işlevi onu son derece kolaylaştırır ('denetçinin' ayrıntı tablosunu eklediğiniz <div> kimliğidir).