ユーザーがウェブページのレイアウトを変更できるようにする

ユーザーがラベル付きフォーム入力オブジェクトを挿入できるようにするWebページがあります。彼らが新しいオブジェクトを追加すると、自動的に2列のテーブルに追加されます。左側の列はラベルで、右側はフォームコントロールです。ユーザーがウェブページのレイアウトを変更できるようにする

ユーザーにページのレイアウト方法をより詳細に制御したいと考えています。私はこれを達成するのに役立つ例、パターン、提案があるかどうか疑問に思っていました。私が見つけた唯一の例は、さまざまなレイアウトテンプレートを選択し、そのページ上でレイアウトと順序に従ってポートレットを配置できるLiferayです。

更新：

私は彼らが設計したレイアウトを維持したいと思います。

すでにフォーム自体が保持されています。 HTMLは永続化されず、フォームが要求されたときに即座に生成されます。フォームのレイアウトも変わらないようにしたいと思います。

私はあまりにも詳細を探していません。主な考えと提案。

は、これを行うための最も簡単で安全な方法は、jQueryのか、別のJavaScriptライブラリを経由してだろう、あなたに

出典

2010-11-30 Allan

ユーザーにHTML要素を挿入できるように余裕を持たせると（Javascriptが最も危険です）、多くのセキュリティリスクが発生する可能性があります。 – stillstanding

HTMLを直接挿入することはできません。彼らは 'タイプ'の定義済みリストから選択することができます。すべてのHTMLはサーバー側で生成されます。 – Allan

@ user119179以下の回答を受け入れることを忘れないでください。 – JakeParis

ここでは、.sortable()メソッドを使用して過去に似たようなことをしたことがあります。再配置されたデータを追跡するには、jQueryを使用します。 Ajaxデータベースフィールドへの注文。後で呼び出すことができます。データベースフィールドは、「42,12,6,4」

function saveSortChanges() { 
     var qString = $("#sortable").sortable("serialize"); // this should produce something like 'artOrder[]=5&artOrder[]=27&artOrder[]=3 

     $.ajax({ 
      type: 'get', 
      url: 'ajax.php', 
      data: qString, 
      success: function(txt) { } 
     }); 

    } 

    $("#sortable").sortable({ 
     cursor: 'move', 
     update: function(event,ui) { 
      saveSortChanges(); 
     } 
    });

のようなもので終わるだろうとhtmlは

<div id="sortable"> 
<div class="editindex" id="artOrder_22"><!--stuff--></div> 
<div class="editindex" id="artOrder_12"><!--stuff--></div> 
<div class="editindex" id="artOrder_4"><!--stuff--></div> 
</div>

出典

2011-01-05 14:41:57 JakeParis

+1これは一番簡単な方法ですが、IMHOです。 –

おい、1時間前にそれを受け入れることができなかったので、余分な50ポイントを得ることができましたか？あなたはとにかくそれらを失うつもりでした！ – JakeParis

それは私の拳の恩恵だった。私はそれがどう働いているのかは分からなかった。私は100の価値があったと心配しないでください – Allan

ありがとうございます。 jQuery UIとYUIをチェックしてください。どちらも、再配置、サイズ変更、およびその他のカスタマイズを可能にする機能ウィジェットです。ただし、ユーザーの変更をに変更したい場合は、さらに複雑になります。です。

出典

2010-11-30 17:03:14 syrion

元の投稿を更新しました。私はレイアウトを維持したいと思います。 – Allan

のようなものですあなたはログインシステムを持っていますか？もしそうなら、私はあなたがデータベースにユーザーの設定を保存する別のテーブルを持つ必要があると思います。

これ以外の場合は、必要に応じてCookieまたはSESSION変数を使用できます。

明確な方法は、別々のCSSファイルを用意して、セッション変数（またはdbテーブル）にCSSファイルID /名前を保存することです。あなたが出すメインのHTMLを同じままにしておきましょう。ちょうどcss relリンクを変更してください（インラインCSSを使用しないでください）。パラメータを使用してCSSを持つ方法が

あります（私は専門用語を忘れてしまった）が、どうやらIEは以降IE9から支援を停止しているので、それは非常にクロスブラウザの互換性がない場合があります。

出典

2011-01-05 14:42:02

JP19は非常に良い一般的なアドバイスをしていました。

バックエンドには何が使用されていますか？ ASP.NETを使用している場合は、パーソナライゼーションとテーマがあり、特にこの目的のために特別に設計されているためです。これを実装する方法のアイデアを得るために、パーソナライゼーションとASP.NET Webパーツを検討する価値があります。

出典

2011-01-11 14:03:23 smartcaveman