私はiPhoneのレイアウトに似たものを作っています(クリックして詳細情報を得ることができる写真/数字のタイルの束)。レイアウトが設定された後、タイルの 1 つを全画面表示するクリック イベントが必要です。現在、レイアウトが再調整されるようにタイルを移動しています。1 つのタイルが他のタイルの上に拡大されるように、石積みのレンダリングを停止することは可能ですか?
以下は私が試したものです(しかし失敗しました)。注: d3.js を使用して、石工が使用する div を生成します。
function drawGrid(divname,orders)
{
var mydiv = d3.select(divname);
$(divname).masonry({
itemSelector: '.g1',
isAnimated: true,
//isResizable: true
});
var myd = mydiv.selectAll("div");
var mygs = myd.data(orders,function(d){ return d.orderid;})
.enter().append("div")
.attr("class","g1")
.append("g");
var x1 = mygs.append("div")
.attr("class","tickerdiv")
.text(function(d){ return d.ticker; });
var ActiveOrder = "1";
$(divname+' .g1').click(function() {
//$(this).show('maximised');
console.log("clicked")
$(this).animate({"display":"none","position": "absolute",
"top": "0",
"left": "0",
"width": "100%",
"height": "100%",
"z-index": 1000 }, 1000);
});
var x = [];
x.redraw = function(o)
{
x1.text(function(d){ return d.ticker; });
}
return x;
}
そしてcssファイルから:
.g1 { min-height:80px; width: 100px; margin: 15px; float: left; background-color: RGB(223,224,224); border-radius: 10px; vertical-align: middle; text-align: center; padding-top: 20px;}