Как улучшить систему, которая сохраняет размеры div в CSS с помощью jquery - PullRequest
Новая
       10

Как улучшить систему, которая сохраняет размеры div в CSS с помощью jquery

1 голос
/ 07 марта 2009

Предупреждение: я не очень хороший человек, чтобы объяснять вещи, мой английский не идеален, и я немного новичок с php, javascript и jquery. Если вы думаете, что справитесь с этим, продолжайте читать.

Итак, у меня есть небольшая система, где вы можете добавлять элементы div на сайт, перетаскивать их и масштабировать. Это легко с jquery. Однако я пытаюсь сохранить изменения в файлах CSS и HTML, поэтому в следующий раз, когда вы откроете страницу, она будет такой же, как вы ее отредактировали.

Это еще не готово, но я знаю, что это возможно сделать. Однако, прежде чем завершить его, я хотел бы знать, есть ли у кого-нибудь предложения, как сделать его более простым или лучше каким-либо образом.

Я сейчас объясню, как это работает:

Пользователь добавляет несколько div, масштабирует и перетаскивает их. (JQuery UI). Когда пользователь нажимает кнопку, которая сохраняет изменения, система проверяет, сколько дочерних элементов имеет основной контейнер (все созданные пользователем элементы div являются дочерними по отношению к основному контейнеру). Теперь система зацикливает все дочерние элементы и получает их размеры (width, height, left, right) в массив, подобный этому [0]="200,300,500,500". Когда цикл завершен, система объединяет массив в строку, где различные элементы разделяются точкой с запятой.

Система отправляет строку с $.ajax() и использует php-файл для ее чтения, вот что происходит в php-файле:

  1. php разбирает полученную строку по почте в массив, подобный этому 

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

  2. теперь он просматривает содержимое массива, разбивая каждую строку на 4 переменные 

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

  3. Теперь система помещает эти значения в другой массив в виде строки и добавляет в строку код css. Так что этот новый массив выглядит так 

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

  4. Когда массив заполнен, система внедряет его в строку, удаляет старый файл customstyle.css и записывает строку в новый файл customstyle.css.

Не включает в себя создание пользовательского html-файла, но это просто делается путем проверки того, сколько значений имеет массив, состоящий из данных публикации, а затем создание равного количества div в html-файле, где каждый div имеет идентификатор "div (число)".

Когда страница загружается, php включает в себя пользовательские файлы CSS и HTML. Цель состоит в том, чтобы иметь индексную страницу, которая не требует javascript и имеет допустимость xhtml с простым оформлением, а другая страница предназначена для редактирования и требует javascript ofcourse.

Я думаю, что эта система слишком сложна, слишком много массивов и т. Д. Но я не знаю, как ее упростить:)

Я думал о создании всей строки стиля с использованием javascript вначале и публикации ее в php в целом, а затем просто записал ее в таблицу стилей как есть. Но эта строка намного больше, чем сейчас, и ее публикация не будет такой эффективной. (Не то чтобы это имело значение, потому что я единственный, кто пробовал систему, но это не правильно: P)

Ответы [ 2 ]

1 голос
/ 07 марта 2009

Кнопка сохранения может собрать объект json с коллекцией всех элементов div. Он предлагает много преимуществ по сравнению со строками и может быть легко прочитан php.

Со стороны php напишите класс для пользовательского элемента. Это поможет удобочитаемости, а также позволит вам собирать данные более логичным способом. Класс может быть таким простым, как этот 

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

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

Теперь, когда вы захотите разобраться с новым пользовательским элементом, вы можете сделать 

$curElement = new CustomElement("div2");
$curElement->height = 600;
$curElement->width = 800;
...
0 голосов
/ 07 марта 2009

Это звучит как работа для печенья. В основном вы сохраняете состояние измерения в куки ( вот ссылка на Quirksmode, описывающую использование куки в Javascript ) При загрузке страницы вы пытаетесь извлечь состояние измерения из файлов cookie с помощью javascript и применить его к своим элементам. Вы можете отфильтровать их с помощью jQuery по классам html (css), так что это простая задача.

Если вы все сделаете правильно, пользователь ничего не заметит.

...