1

私は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;}
4

2 に答える 2

1

編集OK、私の最初の答えはここでは役に立ちませんでした - 石積み/同位体の相対的に配置されたコンテナに絶対配置された要素が含まれている場合、絶対配置は機能しません。解決策は、石積み/アイソトープ要素のコンテンツをクリックして DOM から取り出し、一時的に本文に追加することです。私の汚いスウェーデンのサンドボックスで基本的なアイデアを見ることができます

<!-- masonry/Isotope item large -->

<div class="item large">
    <div class="header">
        <p>Click here</p>
    </div>
    <div class="minimised">
        <p>Preview</p>
    </div>
    <div class="maximised">
        <p>Content</p>
        <button id="screen-overlay-on">Screen overlay on</button>
        <div id="screen-overlay-background"></div>
        <div id="screen-overlay-content">
            <p>Content</p>
            <button id="screen-overlay-off">Screen overlay off</button>
        </div>​
    </div>
</div>

<script type="text/javascript">
$(document).ready(function(){

    $('#screen-overlay-on').click(function(){

        var sob = $('#screen-overlay-background').detach();
        var soc = $('#screen-overlay-content').detach();

        sob.appendTo('body');
        soc.appendTo('body');

        $('#screen-overlay-background').toggleClass("active");
        $('#screen-overlay-content').toggleClass("active");
    });

    $('#screen-overlay-background, #screen-overlay-off').click(function(){
        $('#screen-overlay-background').toggleClass("active");
        $('#screen-overlay-content').toggleClass("active");
    });

});
</script>

のようなCSSで

#screen-overlay-background {
display: none;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: #333;
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
z-index: 1000;
}

#screen-overlay-content {
display: none;
position: absolute;
top: 50%;
left: 50%;
height: 240px;
width: 320px;
margin: -120px 0 0 -160px;
background-color: #FFF;
z-index: 1000;
}

#screen-overlay-background.active, #screen-overlay-content.active {
display: block;
}
于 2012-08-02T08:17:23.107 に答える
0

css の要素に :hover を追加して、z-index を変更できます。これは、クラスでクリックするだけで簡単に変更できます...

.item {
    z-index:1
}

.item:hover{
    z-index:2500;
}
于 2014-11-26T01:56:23.223 に答える