Question

我在顶部标题中有面板。点击图片后（标题左侧）显示面板。实际上我的问题是每当我的面板打开时，我的标题标题就是我的例子中的hide（“Test”）。首先我用过 data-display="push"它隐藏了我的标题标题（“测试”）。但是，当我尝试data-display="overlay"时，它并没有隐藏我的标题标题文字，而是隐藏了我的图像.. :(为什么我不能同时显示这两个内容？

http://jsfiddle.net/7Cmb3/1/

$(function () {   
  $('#panelOpenImge').click(function(){
    $( "#mypanel" ).panel( "open" );
  })
})

Answer 1

我添加了一些css代码

@media ( min-width: 200px) {

    /* wrap on wide viewports once open */

    .ui-panel-page-content-open.ui-panel-page-content-position-left {
        margin-right: 17em;
    }
    .ui-panel-page-content-open.ui-panel-page-content-position-right {
        margin-left: 17em;
    }
    .ui-panel-page-content-open {
        width: auto;
    }

    .ui-panel-page-content-open.ui-panel-page-content-position-left.ui-panel-page-content-display-push {
        margin-right: 17em;
    }
    .ui-panel-page-content-open.ui-panel-page-content-position-right.ui-panel-page-content-display-push {
        margin-left: 17em;
    }
    .ui-panel-page-content-open.ui-panel-page-content-display-push {
        width: auto;
    }

}

请检查

http://jsfiddle.net/7Cmb3/7/

Answer 2

我更改了data-display="overlay"并应用以下代码来相应地计算面板的高度

$(function () {   
    $('#panelOpenImge').click(function(){
        $( "#mypanel" ).panel( "open"  );
    });
    var header = $('[data-role=header]').outerHeight();
    var panel = $('#mypanel').height();
    var panelheight = panel - header;
    $('.ui-panel').css({
        'top': header,
        'min-height': panelheight
    });
});

此answer

的所有信用

更新了小提琴here

Answer 3

选中 Working Fiddle

$(function () {   
    $('#panelOpenImge').click(function(){

        $( "#mypanel" ).panel( "open"  );

    });
    var panel = $('#mypanel').height();
    var panelheight = panel - header;
    $('.ui-panel').css({
       'min-height': panelheight
    });
});

滑动面板打开时为什么标题文本隐藏？

3 个答案: