JQuery ile div boyutlarını css'ye kaydeden sistem nasıl geliştirilir

Question

Uyarı: Bazı şeyleri açıklamak için iyi bir insan değilim, ingilizcem mükemmel değil ve php, javascript ve jquery ile biraz noob. Bunu halledebileceğini düşünüyorsan, okumaya devam et.

Web siteme div ekleyebileceğiniz, sürükleyebileceğiniz ve ölçekleyebileceğiniz küçük bir sistemim var. Bu jquery ile kolaydır. Ancak, değişiklikleri css ve html dosyalarına kaydetmeye çalışıyorum, böylece sayfayı bir sonraki açılışta, tıpkı sizin düzenlediğiniz gibi olacaktır.

Henüz hazır değil, ancak bunun mümkün olduğunu biliyorum. Ancak bunu tamamlamadan önce, herhangi bir şekilde nasıl daha basit veya daha iyi hale getirilebileceği konusunda önerilerin olup olmadığını bilmek isterim.

Ben şimdi nasıl çalıştığını açıklayacağız:

Kullanıcı renklendirilmiş, ölçekler ekler oradan oraya sürükler. (JQuery UI). Kullanıcı değişiklikleri kaydeden bir butona tıkladığında, sistem ana konteynerin kaç tane çocuk elemanının olduğunu kontrol eder (tüm kullanıcı tarafından oluşturulan div'ler ana konteynerin çocuklarıdır). Artık sistem tüm alt öğeleri birleştirir ve boyutlarını (width, height, left, right) bu [0]="200,300,500,500" gibi dizilere ekler. Döngü tamamlandığında, sistem diziyi, farklı öğelerin noktalı virgülle ayrıldığı bir dizeye ekler. Bu

gibi diziye,

1. php ayrıştırır o posta yoluyla aldık dizesi:

   Sistem Mesajları $.ajax() ile dize ve bu php dosyasında böyle olur, okumak için php dosyası kullanır

   [0]="200,300,500,500" 
   

2. şimdi 4 değişken

   $width = 200; 
   $height = 300; 
   $left = 500; 
   $top = 500; 
   

her bir dize ayrıştırma, dizinin içeriğine döngüler

3. Artık sistem bu değerleri string olarak başka bir diziye koyar ve css kodunu dizeye ekler. Yani bu yeni dizi dizi tamamlandığında, sistem, bir dizeye implodes eski customstyle.css dosyayı siler ve yeni customstyle.css dosyaya dize yazar bu

   [0] = "#div0{width:200px;height:300px;left:500px;top:500px;}." 
   

4. benziyor.

bu özel html dosyasının oluşturulmasını içerir yoktu, ama sadece her div sahip olduğu sonrası verilerinin yapılmış dizisi, daha sonra html dosyası içine divs eşit miktarda oluşturarak kaç değerleri kontrol ederek yapılır "div (number)" değeri.

Sayfa yüklendiğinde, php özel css ve html dosyaları içerir. Hedef, javascript gerektirmeyen dizin sayfası ve basit stil ile xhtml geçerli, düzenleme için diğer sayfa ve javascript ofcourse gerektirir.

Orada çok fazla diziler vs var Ama biraz daha basit hale getirmek için nasıl bilmiyorum, bu sistem çok karmaşık olduğunu düşünüyorum :)

ben başında javascript ile tüm stil dize oluşturma düşünüyordum ve bir bütün olarak php'ye gönderir, sonra onu sadece stil sayfasına yazar. Ama şu andan çok daha büyük bir ip var ve onu göndermek o kadar etkili olmazdı.(Sistemi çalıştıran tek kişi olduğumdan farketmez, fakat doğru hissetmiyordur: P)

Answer 1

Bu, çerezler için bir iş gibi görünüyor. Temel olarak boyut durumunu çerezlere kaydedersiniz (here's a link to Quirksmode describing using cookies in Javascript). Sayfa yüklemesinde, javascript ile çerezlerden boyut durumunu almayı ve bunları öğelerinize uygulamayı denersiniz. Bunları jQuery ile html (css) sınıflarına göre filtreleyebilirsiniz, böylece basit bir görevdir.

Doğru yaparsanız, kullanıcı bir şey fark etmez.

Answer 2

Kaydet düğmesi, tüm div'lerin bir koleksiyonunu içeren bir json nesnesini bir araya getirebilir. Dizeleri kullanmanın birçok avantajı vardır ve php ile kolayca okunabilir.

PHP tarafında, özel öğe için bir sınıf yazın. Okunabilirliğe yardımcı olur ve ayrıca verilerinizi daha mantıklı bir şekilde bir araya getirmenize izin verir. Yeni bir özel öğe ile uğraşmak istediğiniz zaman Sınıf Eğer

$curElement = new CustomElement("div2"); 
$curElement->height = 600; 
$curElement->width = 800; 
...