2

ウィジェットで動作する Web サイトを作成する必要があります。Google IGのようなレイアウトを作成する方法を見つけましたが、ウィジェットのサイズも変更できるようにしたいと考えています。ウィジェットが 2 つの列にまたがり、その上または下に他の小さなウィジェットがある可能性があります。私が欲しいものの例は、Protopage Web サイトにあります。

要するに、私はしたい：

1. Use widgets
2. Be able to resize widgets in both height and width
3. Add and remove widgets
4. Move widgets

Protopageのような Web サイトの作成方法に関するドキュメントがあれば、十分な情報が得られると思います。

JQuery を使用して MVC3 で Azure Web ロールを作成したいと考えています。JQuery はウィジェットを作成するための最も重要な部分になるので、これに最適なフレームワーク/プラグインはありますか? IsotopeとMasonryの両方を見てきましたが、どちらもドラッグ アンド ドロップでウィジェットのサイズを変更したり移動したりする方法を示していません。どんな助けでも大歓迎です。

4

1 に答える 1

0

この小さなプラグインを使用すると、ドラッグしてサイズを変更したり、互いに「スナップ」したりできます。それらはページの「グリッド」にスナップするのではなく、相互にスナップします。 https://github.com/polomoshnov/jQuery-UI-Resizable-Snap-extension デモ: http://fiddle.jshell.net/5xB7S/show/light/

更新:プラグインが必要ない場合は、ここから始めてください。ゼロから思いどおりに作成するのはそれほど難しくありません。

http://jsfiddle.net/xv57M/8/

これがコードの一部です。すべてのフィドルを参照してください...

//CSS
#grid table{ position:absolute; width:600px; top:0px; }
#grid table td{ height:150px; width:300px; }

.item { position:absolute; width: 300px; height: 150px; background: rgba(54, 25, 25, .5); }
#item1 { top:10px; }
#item2 { top:160px; }
#item3 { top:310px; }

//JS
$(function() {
    $( "#item1" ).resizable({ grid: 300 });
    $( "#item2" ).resizable({ grid: 300 });
    $( "#item3" ).resizable({ grid: 300 });

    $( "#item1" ).draggable({ grid: [ 300, 150 ] });
    $( "#item2" ).draggable({ grid: [ 300, 150 ] });
    $( "#item3" ).draggable({ grid: [ 300, 150 ] });
});
于 2014-02-12T18:12:00.193 に答える