JQuery мобильный 1.4.5 панель panel высота возможно?

Question

Я делаю проект jqm только для мобильных телефонов.

У меня есть две панели, одна из которых предназначена для наложения другого наложения. Один находится в левом углу, а другой - в верхнем правом углу.

Мой вопрос: можно ли установить правую панель на 100% ширину (что я сделал) и установить высоту 10-20% (40px-50px).

Можно ли это сделать, не нарушая функциональность? Это можно сделать в Css? Я могу установить ширину, но не могу установить высоту.

Спасибо заранее!

Answer 1

Настройка правой или левой панели вам нужно будет изменить 3 класса CSS, установленные JQM. Анимация, панель и внутренняя часть панели, на которой находится контент, находятся. Более простой способ - создать пользовательский оверлейный блок.

Demo https://jsfiddle.net/bz649m86/

Html

<div class="box"><a class="close">Close</a></div> 

CSS

.box { 
    position:fixed; // a fixed position is used for the box 
    top:0; // placed at the top of the screen 
    right:-100%; // with a minus position setting on the right side of the screen so its hidden from view 
    background-color: blue; 
    width: 100%; //with a width of the whole screen, but it can be any width 
    display: block; //displayed in block format 
    z-index: 999999; // above the header when in view 
    overflow: hidden; // if you don't require scrolling within the box 
    height:40px; // the height size required 
//the transition settings are not needed but makes the animation of the panel much smoother. 
    -webkit-transition: all .3s ease; 
    -moz-transition: all .3s ease; 
    -ms-transition: all .3s ease; 
    -o-transition: all .3s ease; 
    transition: all .3s ease; 
} 

Jquery

// animate on click to bring the box in to view 
    $(document).on("click", ".pannel", function() { 
     $('.box').animate({ 
      'right': "0%" 
     }, 300); 
    }) 
// and out of view when closed  
    $(document).on("click", ".close", function() { 
     $('.box').animate({ 
      'right': "-100%" 
     }, 300); 
    }) 

В качестве дополнительного примечания, с помощью этого метода вы можете иметь пользовательскую панель (наложенную), отображаемую в любом месте экрана.

В этом демо ящик приходит из верхней части экрана

https://jsfiddle.net/Lqxp2ewb/

Answer 2

Как уже упоминалось:

$(document).on("click", ".pannel", function() { 
    $('.box').animate({ 
     'top': "0%" 
    }, 200); 
return false; 
}) 

$(document).on("click", ".close", function() { 
    $('.box').animate({ 
     'top': "-100%" 
    }, 200); 
    return false; 
}) 

Не уверен, является ли возвращение ложным лучше, чем preventDefault и stopPropagation. Пробовал оба, в любом случае, очень плавно на мобильных устройствах.

Answer 3

CSS-код .ui-panel из jQueryMobile.css определяет атрибут min-height min-height: 100% Таким образом, вы должны переопределить атрибут min-height.

Поскольку ваше значение высоты меньше значения минимальной высоты 100%, оно не оказывает никакого эффекта.

В моем случае я хочу, чтобы установить панель под бар фиксированного заголовка, поэтому я использую:

top: 38.4px; 
min-height: calc(100% - 38.4px);