0

<div>別の の調整、別の のドラッグ アンド ドロップ、別<div>の の追加<div>、それによって配置されている位置の記憶など、カスタマイズ可能な機能を備えたダッシュボードを構築しようとしてい<div>ます。このダッシュボードは、 iGoogle のダッシュボードに似ています。

質問 1)私が間違っていなければ、これら<div>はウィジェットと呼ばれます。彼らは？

これに関してウェブを調べたところ、外部ソースからすでに構築されたウィジェットをウェブページに継承するためのチュートリアル/リンクのほとんどが見つかりましたが、これは私が望むものではありません。独自のウィジェットを作成したい (たとえば、円グラフで一部の JSON データを表すウィジェットと、棒グラフで同じデータを表すウィジェットを別のウィジェットにすることができます)。それで、私の次の質問は:-

質問 2)ユーザーが必要に応じてウィジェットを選択できるようにするための別の URL を用意します。では、最初は<div>for every ウィジェットを非表示にしておき、ユーザーが有効にしたときに非表示に戻すか、それとも別の方法がありますか?
PS: iGoogle のソース コードを調べて、ユーザーがそのウィジェットを有効にした後に iGoogle を追加するため、別の方法があることは確かです。それで、それはどのように行われますか？

質問 3)の配置はどのよう<div>に保存できますか?

4

1 に答える 1

1

質問 1) はい、ウィジェットとして知られています。jQuery UI などのかなりの数の Javascript フレームワークには、要素の移動、グリッドへのスナップなどの機能が含まれています - http://jqueryui.com/draggable/#snap-to

質問 2) ユーザーが何を選択したか、または表示が許可されているかに応じて、ウィジェットのみをロードします。それ以外の場合、すべてのウィジェットがページ上に表示され、非表示になります。ユーザーはこれらのウィジェットを再表示して、持っていない可能性のあるものを表示できます。へのアクセス。

さまざまな方法でウィジェットをページにロードできます。1 つの方法は、サーバー側 (PHP など) を介して、ページの読み込み時にユーザーが選択したウィジェットを見つけ、ユーザーがページを表示する前にそれらのウィジェットを読み込むことです。または、ページをロードできる Ajax を介して、後でウィジェットをページに追加できます。これは、ウィジェットをページにアニメーション化する場合、またはウィジェットに大量のデータがある場合に役立ちます。読み込みに時間がかかることを意味します。

質問 3) Q1 の私の例を使用すると、ユーザーが div をドロップしたときに X、Y 座標をキャプチャし、Ajax を使用してそれらをサーバーに送信し、これらの座標をそのユーザーのウィジェットに対して保存できます。ユーザーが次にページをロードするときに、これらの座標を使用してウィジェットを正しい場所にロードします。

于 2013-09-03T10:16:00.913 に答える