Question

您好我有关于Kendo UI的窗口内容的查询。基本上我已经选择了一个很好的小桌面式（WebOS）设置，我想摆弄它。应用程序窗口＆＃34; openWin1＆＃34;和＆＃34; openWin2＆＃34;已定义，但为空，没有内容。我在哪里添加内容？在HTML5或Javascript中？

非常感谢任何帮助。我对此很陌生。

的index.html：

<!DOCTYPE html>
<html>
<head>
<title>Masrani Global OS</title>
<link href="styles/kendo.common.min.css" rel="stylesheet">
<link href="styles/kendo.default.min.css" rel="stylesheet">
<link href="css/system.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/kendo.web.min.js"></script>
<script src="js/kendo.window.min.js"></script>
<script src="custom.js"></script>

</head>
<body>
<div id="titleBar"><a id="openWin1" class="topBtn" href="#">Terminal</a><a id="openWin2" class="topBtn" href="#">Media Player</a></div>
<div id="deskTop"></div>
<div id="statusBar"><ul id="statusBarBtns"><li id="hideAll"><a class="statBarBtn" href="#">Show Desktop</a></li></ul><div id="logText"></div></div>


</body>
</html>

custom.js：

function log(data){
console.log(data);
}

function repositionWindow(elementName){
var thisWindow = $("#" + elementName).closest('.k-window'),
winOffset = thisWindow.offset(),
thisWindowWidth = thisWindow.width()
thisWindowHeight = thisWindow.height()
bottomEdge = winOffset.top + thisWindowHeight
rightEdge = winOffset.left + thisWindowWidth
deskTopOffset = $('#deskTop').offset()
deskTopHeight = $('#deskTop').height();
deskTopBottom = deskTopOffset.top + deskTopHeight - 25
deskTopWidth = deskTopOffset.left + $('#deskTop').width() - 2;
if(thisWindowWidth>$('#deskTop').width()){thisWindow.width($('#deskTop').width());}
if(bottomEdge>deskTopBottom){thisWindow.css('top',winOffset.top - (bottomEdge - deskTopBottom)+'px');}
if(rightEdge>deskTopWidth){thisWindow.css('left',winOffset.left - (rightEdge - deskTopWidth)+'px');}
if(winOffset.top < deskTopOffset.top){ thisWindow.css('top',(deskTopOffset.top+2)+'px');}
if(winOffset.left < deskTopOffset.left){thisWindow.css('left',deskTopOffset.left + 'px');}
if(thisWindow.offset().top<deskTopOffset.top){thisWindow.css('top',deskTopOffset.top+'px');thisWindow.height(deskTopHeight-25);}
}


function createWindow(elementName,Icon,WindowTitle,Width,Height){
$('body').append('<div id="'+elementName+'"></div>');
var window = $("#" + elementName);
if (!window.data("kendoWindow")) {
    $('#statusBarBtns').append('<li id="statbar_'+elementName+'"><a class="statBarBtn" href="#WIN-'+elementName+'">'+WindowTitle+'</a></li>');
    window.kendoWindow({
        width: Width+"px",
        height: Height+"px",
        title: WindowTitle,
        actions: ["Custom","Maximize", "Close"],
        close: function(){
            $('#statbar_'+elementName).remove();
            $("#"+elementName).data("kendoWindow").destroy();
            if(elementName == 'myWindow'){
                $('#openWin1').show();              
            }
            if(elementName == 'myWindow2'){
                $('#openWin2').show();              
            }
        },
        activate: function(e){
            repositionWindow(elementName);
        },
        dragend: function(e){
            repositionWindow(elementName);
        },
        resize: function(e){
            repositionWindow(elementName);
        }
    });
    $("#" + elementName +'_wnd_title').parent().prepend('<img class="windowLeftIcon" src="icons/'+Icon+'.png"/>'); 
    window = $("#" + elementName).data("kendoWindow");
    var vv = window.wrapper.find(".k-i-custom");
    vv.removeClass('k-i-custom').addClass('k-i-minimize2');
    vv.click(function (e) {
        $("#" + elementName).closest('.k-window').hide();
    })
}   
}

$('.statBarBtn').live('click',function(e){
e.preventDefault();
var elementName = $(this).attr('href');
if(elementName == '#') return;
elementName = elementName.replace("#WIN-","");
var wnd = $("#"+elementName).data("kendoWindow");
if(wnd.element.is(":hidden")){
    $("#" + elementName).closest('.k-window').show();
    wnd.toFront();
} else {
    $("#" + elementName).closest('.k-window').hide();
}
});

$(document).ready(function() {
$('#openWin1').click(function(){
    createWindow('myWindow','server','Terminal',500,300);
    $(this).hide();
});

$('#openWin2').click(function(){
    createWindow('myWindow2','server','Media Player',400,200);
    $(this).hide();
});

$('#hideAll').click(function(){
    $(".k-window-content").each(function(){
        $(this).closest('.k-window').hide();
    });
});
});

Answer 1

在JavaScript中，创建div并将其添加到DOM：

$('body').append('<div id="'+elementName+'"></div>');

然后在创建的div上设置Kendo Window对象：

var window = $("#" + elementName);
if (!window.data("kendoWindow")) {
    ...
    window.kendoWindow({...});
}

因此，嵌套在创建的div中的任何HTML内容都将显示在Kendo窗口中，即：

$('body').append('<div id="'+elementName+'"><p>This will appear in the window</p></div>');

Kendo UI窗口（内容）

1 个答案: