2012-12-05 23 views
7

Jquery tabanlı bir kontrol paneli oluşturmayı düşünüyorum. Aşağıdaki örneklere bakarak:Kılavuz Düzenli Jquery Panosu

http://jqueryui.com/sortable/#display-grid

ve

http://jqueryui.com/sortable/#portlets

Bence bir akış düzenini varsa bu işlevi kolayca gerçekleştirilir görüyoruz. Ancak. Yukarıda belirtilen örneklerden biraz daha karmaşık olan bir kontrol paneli istiyorum.

Oluşturmak istediğim gösterge panosunun ürününün üzerine düşebileceği bir kılavuz olacak. Öğeler sayfada herhangi bir yere bırakılabilir ve öğeler arasında boşluk bırakılabilir. Öğeler, nesnenin yoldan çıkmasına neden olan ızgaraya karşı yeniden boyutlandırılabilir.

, fayansların yukarı kaydığı ve aralarında boşluk bırakılmasına izin vermeyen google ana sayfa gösterge panosu gibi bir düzen istiyor.

Bu nedenle, örneğin bir bir kiremit 1 x 1 olabilir, bir 10 x 10 grid (50 birim piksel)

olurdu ve 1 x 2 olacak şekilde boyutlandırılır ve daha sonra orada 1 x 1 boşluk olabilir ve başka bir çini.

Bunu yapmak için iyi bir algoritma arıyorum. Nihai hedefim, android ana ekranlarınızda göreceğinize benzer bir kontrol paneli ile bitmek. Bununla birlikte, en büyük dezavantajım şu anda şebekeyi değiştirmek ve düzenlemek için akıllı çarpışma algılamasıdır.

Bir kez tamamlandığında, gösterge panelimi github'da paylaşmayı ümit ediyorum. Teşekkür ederim.

+1

Bunu yapmak için kullanabileceğiniz bir jQuery eklentisi mi arıyorsunuz? Ya da kendini bir sıfırdan yaz. * Ya da * burada birisinin GitHub'a yazacağınız bir tane yazmasına izin verin mi? :) –

+0

Mümkünse bu konuda yardımcı olabilecek bir JQuery eklentisi arıyorum (gereksinimleri karşılarsa). Muhtemelen eninde sonunda kendi başıma yazacağım ama buna yaklaşmak için iyi bir algoritma veya referans uygulaması arıyorum. – Elixir

+0

Sağladığınız iki bağlantı çok iyi bir başlangıç ​​noktasıdır, okuduğunuz kodu okuyabilir ve ardından ihtiyaçlarınıza göre özelleştirebilirsiniz. –

cevap

11

Bir jQuery eklentisi değil, Gridster, yeniden boyutlandırma için HARİCİNDEN bahsettiğiniz her şeyi yapıyor.

Lütfen daha eksiksiz bir şey bulursanız bize bildirin.

+1

Gridster iyi bir başlangıç. Ama aslında beklediğim şekilde bunu başaramıyor. Kesinlikle çekilmek. Kılavuz düzeni, öğelerin yeniden boyutlandırmaya izin vermemekle birlikte iki pencere arasında dikey boş sütun satırları olmasına izin vermez. – Elixir

+1

http://ksylvest.github.io/jquery-gridly/ – Steve

+2

bir göz atın Küçük bilgi güncelleme: Gridster döşeme yeniden boyutlandırma desteği ile bir jQuery eklentisi (en azından şimdi ve demoları görebildiğim gibi) şimdiye kadar). Bilgi biraz modası geçmiş olsa bile, bu güzel küçük eklentiyi işaret etmeme yardımcı oldu. Teşekkürler @rowanu;) –

İlgili konular