Comment améliorer le système qui sauve les dimensions div à css avec jquery

Question

Attention: je ne suis pas une bonne personne pour expliquer les choses, mon anglais n'est pas parfait et je suis un peu noob avec php, javascript et jquery. Si vous pensez que vous pouvez gérer cela, continuez à lire. Donc, j'ai ce petit système où vous pouvez ajouter des divs à un site Web, les faire glisser et les mettre à l'échelle. C'est facile avec jquery. Cependant, j'essaie de sauvegarder les changements dans les fichiers css et html, donc la prochaine fois que vous ouvrirez la page, ce sera exactement comme vous l'avez édité.

Ce n'est pas encore prêt, mais je sais qu'il est possible de le faire. Cependant, avant de le remplir, j'aimerais savoir si quelqu'un a des suggestions sur la façon de le rendre plus simple ou meilleur de quelque façon que ce soit.

Je vais vous expliquer comment cela fonctionne maintenant:

utilisateur ajoute quelques divs, les échelles et les traîne autour. (Interface utilisateur JQuery). Lorsque l'utilisateur clique sur un bouton qui enregistre les modifications, le système vérifie le nombre d'éléments enfants du conteneur principal (tous les fichiers div créés par l'utilisateur sont des enfants du conteneur principal). Maintenant, le système boucle tous les éléments enfants et obtient leurs dimensions (width, height, left, right) dans un tableau comme ceci [0]="200,300,500,500". Lorsque la boucle est terminée, le système joint le tableau dans une chaîne, où les différents éléments sont séparés par un point-virgule.

messages du système La chaîne avec $.ajax() et utilise fichier php pour le lire, voici ce qui se passe dans le fichier php:

1. php parse la chaîne, il a par la poste, dans un tableau comme celui-ci

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

2. maintenant des boucles à travers le contenu du tableau, l'analyse syntaxique de chaque chaîne en 4 variables

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

3. Maintenant, le système place ces valeurs dans un autre tableau sous forme de chaîne et ajoute le code CSS à la chaîne. Donc, ce nouveau tableau ressemble à ce

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

4. Une fois que le tableau est complet, système, il implose dans une chaîne, supprime l'ancien fichier customstyle.css et écrit la chaîne dans un nouveau fichier customstyle.css.

N'a pas inclure la création de fichier HTML personnalisé dans ce domaine, mais il est tout simplement fait en vérifiant le nombre de valeurs du tableau en données post a, puis en créant une quantité égale de divs dans le fichier html où chaque div a id de "div (nombre)". Lors du chargement de la page, php inclut des fichiers css et html personnalisés.

L'objectif est d'avoir une page d'index qui ne nécessite pas de javascript et xhtml est valide avec un style simple, une autre page qui est à éditer et nécessite javascript ofcourse.

Je pense que ce système est beaucoup trop compliqué, il y a trop de tableaux, etc. Mais je ne sais pas comment le rendre plus simple :)

Je pensais à créer la chaîne entière de style avec javascript au début et l'afficher sur php dans son ensemble, puis l'écrire simplement dans la feuille de style. Mais c'est une chaîne beaucoup plus grande que maintenant et l'afficher ne serait pas aussi efficace.(Pas que ce serait important puisque je suis le seul à essayer le système, mais il ne me semble pas correct: P)

Answer 1

Cela ressemble à un travail pour les cookies. Fondamentalement, vous enregistrez l'état de la dimension dans les cookies (here's a link to Quirksmode describing using cookies in Javascript). Au chargement de la page, vous essayez de récupérer l'état de la dimension des cookies avec javascript et de l'appliquer à vos éléments. Vous pouvez les filtrer avec des classes jQuery by html (css), c'est donc une tâche simple.

Si vous le faites correctement, l'utilisateur ne remarquera rien.

Answer 2

Le bouton de sauvegarde pourrait assembler un objet json avec une collection de tous les divs. Il offre de nombreux avantages sur l'utilisation des chaînes et peut facilement être lu par php. Du côté php, écrivez une classe pour l'élément personnalisé.

Cela aidera à la lisibilité et vous permettra également d'assembler vos données de manière plus logique. Classe pourrait être aussi simple que cela

class CustomElement{ 
    public $height; 
    public $width; 
    public $leftPos; 
    public $rightPos; 
    private $elmentName; 

    public function __construct($name){ 
     $this->elementName = $name 
    } 
} 

Maintenant, chaque fois que vous voulez faire face à un nouvel élément personnalisé que vous pouvez faire

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