[英]How to make a RadWindow responsive based on screen / viewport size using JavaScript and CSS Grid
我一直在尋找使Telerik RadWindow響應式工作的解決方案。 需要響應的兩件事是RadWindow中的內容和RadWindow本身。
問題:
Per Telerik: “ RadWindow不支持響應大小更改,它不會根據視口自動更改大小,因為不能嚴格定義這種情況下的行為 ”
解決方案: (RadWindow內部的內容需要響應,RadWindow本身也需要響應)
RadWindow內容:在此示例中,我使用CSS Grid使RadWindow的內容具有響應性。
.sectionSearch {
display: grid;
grid-gap: 3px;
grid-template-columns: repeat(auto-fit, 200px);
align-items: end;
max-width: 809px;
}
RadWindow的響應度:
視口可以設置為屏幕的百分比,每本文章。 然后,您可以使用JavaScript媒體查詢來調整視口的高度和寬度的百分比,具體取決於屏幕的大小。
通過結合使用和修改一些帖子(包括這篇文章),以下示例解決方案可以滿足我對RadWindow作出響應的需求。
var $ = $telerik.$;
var radwindow;
function pageLoad() {
radwindow = $find("<%= radwindow.ClientID%>");
}
$(window).resize(function () {
if (radwindow.isVisible()) {
setWindowsize();
}
});
function setWindowsize() {
//var viewportWidth = $(window).width();
//var viewportHeight = $(window).height();
/* ==================================================== */
// media query event handler
if (matchMedia) {
var mqls = [ // array of media queries
window.matchMedia("(min-width: 0px) and (max-width: 399px)"),
window.matchMedia("(min-width: 400px) and (max-width: 600px)"),
window.matchMedia("(min-width: 600px) and (max-width: 800px)"),
window.matchMedia("(min-width: 800px) and (max-width: 1000px)"),
window.matchMedia("(min-width: 1000px) and (max-width: 4000px)")
]
for (i = 0; i < mqls.length; i++) { // loop though media queries
mqls[i].addListener(WidthChange); // listen for queries
WidthChange(mqls[i]); // call handler func at runtime
}
}
// media query change
function WidthChange(mql) {
if (mqls[0].matches) {
var viewportWidth = $(window).width();
var viewportHeight = $(window).height();
radwindow.setSize(Math.ceil(viewportWidth * 90 / 100), Math.ceil(viewportHeight * 90 / 100));
} else if (mqls[1].matches) {
var viewportWidth = $(window).width();
var viewportHeight = $(window).height();
radwindow.setSize(Math.ceil(viewportWidth * 90 / 100), Math.ceil(viewportHeight * 60 / 100));
} else if (mqls[2].matches) {
var viewportWidth = $(window).width();
var viewportHeight = $(window).height();
radwindow.setSize(Math.ceil(viewportWidth * 90 / 100), Math.ceil(viewportHeight * 40 / 100));
} else if (mqls[3].matches) {
var viewportWidth = $(window).width();
var viewportHeight = $(window).height();
radwindow.setSize(Math.ceil(viewportWidth * 90 / 100), Math.ceil(viewportHeight * 40 / 100));
} else if (mqls[4].matches) {
var viewportWidth = $(window).width();
var viewportHeight = $(window).height();
radwindow.setSize(Math.ceil(viewportWidth * 70 / 100), Math.ceil(viewportHeight * 45 / 100));
}
}
radwindow.center();
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.