jqueryを使用してdivディメンションをCSSに保存するシステムを改善するには

Question

警告：私は物事を説明するには良い人ではありません、私の英語は完璧ではない、私はphp、javascript、およびjqueryでちょっとしたことだ。あなたがそれを処理できると思うなら、読書を続けてください。

私は、ウェブサイトにdivを追加し、ドラッグして拡大縮小することができるこの小さなシステムを持っています。これはjqueryで簡単です。しかし、私はcssとhtmlファイルに変更を保存しようとしているので、次回にページを開くと、編集したようになります。

まだ準備が整っていませんが、できることはわかっています。しかし、それを完了する前に、誰かがもっとシンプルに、あるいはより良いものにする方法を提案しているかどうかを知りたいと思います。

私はそれが今どのように動作するかを説明します：

ユーザーは、いくつかのdivを追加してスケールし、それらを周りにドラッグ。 （JQueryのUI）。ユーザーが変更を保存するボタンをクリックすると、メインコンテナの子要素の数がチェックされます（すべてのユーザー作成のdivはメインコンテナの子になります）。次に、システムはすべての子要素をループし、[0]="200,300,500,500"のような配列に次元（width、height、left、right）を取得します。ループが完了すると、システムは配列を文字列に結合します。この場合、異なる要素はセミコロンで区切られます。 $.ajax()と

システムポスト文字列と、それを読むためのPHPファイルを使用して、これはPHPファイルに何が起こるかです：

1. PHPはこの

   のような配列に、それはポストを経由して得た文字列を解析し

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

2. は、今では4つの変数

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

に各文字列を解析、アレイの内容をループ

3. システムは、これらの値を別の配列にstringとして入れ、その文字列にCSSコードを追加します。だから、この新しい配列は、配列が完了すると、システムは、文字列にそれを内破古いcustomstyle.cssファイルを削除し、新しいcustomstyle.cssファイルに文字列を書き込みます。この

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

4. のように見えます。

が、この中にカスタムHTMLファイルの作成が含まれていませんでしたが、それは単に、各div要素は持っているhtmlファイルへのdivの同量を作成し、その後、ポストデータで作られた配列を持っているどのように多くの値をチェックすることによって行われています"div（number）"のIDです。

ページが読み込まれると、phpにはカスタムのcssファイルとhtmlファイルが含まれます。目標は、javascriptを必要とせず、単純なスタイリングで有効なxhtmlのインデックスページを持つことです。編集のための他のページで、javascript ofcourseが必要です。

:)

私は開始時にJavaScriptを使用して全体の形式の文字列を作成することを考えていた私は、このシステムはあまりにも複雑で、あまりにも多くの配列がなどあると思うしかし、私はそれをより簡単にする方法がわかりませんPHP全体に投稿した後、スタイルシートにそのまま書いてください。しかし、それは今よりもずっと大きな文字列であり、それを掲示することはそれほど効果的ではないでしょう。（私はシステムを試している唯一の人だから問題ではないが、それは正しいとは思わない：P）

Answer 1

これはクッキーの仕事のように聞こえる。基本的には、ディメンションの状態をクッキー（here's a link to Quirksmode describing using cookies in Javascript）に保存します。ページが読み込まれると、javascriptを使用してCookieからディメンション状態を取得し、要素に適用しようとします。あなたはhtml（css）クラスでjQueryでフィルタリングすることができますので、簡単な作業です。

あなたが正しいとすれば、ユーザーは気づかないでしょう。

Answer 2

保存ボタンは、すべてのdivのコレクションでjsonオブジェクトをアセンブルできます。それは文字列を使用することよりも多くの利点を提供し、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; 
...