gpt4 book ai didi

jquery - 将 jquery-layout 与 Meteor 一起使用

转载 作者:行者123 更新时间:2023-12-01 01:25:06 24 4
gpt4 key购买 nike

我是meteor 和 jquery-layout 的新手。

我正在努力寻找如何让两者一起工作。我添加了 jquery 和 jquery-layout 包。我相信我需要在某个阶段要求 jQuery 布局来布局页面,但是什么时候呢?如果我在 HTML 页面中执行此操作,则会收到消息“/UI 布局初始化错误/中心 Pane 元素不存在。/中心 Pane 是必需的元素。”。我认为这是因为 meteor 尚未加载任何模板。该示例基于 meteor 默认应用程序。我在东 Pane 中添加了一个额外的模板。并粘贴到 jQuery 布局脚本中。

那么我应该在哪里、何时以及如何布局我的页面?

  <head>
<title>Layouts</title>
<script type="text/javascript">
$(document).ready(function () {
$('body').layout({ applyDemoStyles: true });
});
</script>
</head>

<body>
{{> navigation}}
{{> hello}}
</body>

<template name="navigation">
<div class="ui-layout-east">
<p>Navigation stuff here</p>
</div>
</template>

<template name="hello">
<div class="ui-layout-north">
<h1>Hello World!</h1>
{{greeting}}
<input type="button" value="Click" />
</div>
</template>

最佳答案

实际上,问题正如错误所示:center Pane 是必需的元素。所以而不是 ui-layout-eastui-layout-north ,尝试ui-layout-eastui-layout-center :

<template name="hello">
<div class="ui-layout-center">
<h1>Hello World!</h1>
{{greeting}}
<input type="button" value="Click" />
</div>
</template>

此外,初始化布局的正确位置是模板的 .rendered 内。事件处理程序。因此,请尝试重组您的代码,以便有一个主模板,例如 root在下面的示例中,然后将 jQuery 初始化代码放入 Template.root.rendered 中(下面 .js 文件的第 2 行)。不要在 <head> 中放入任何 JavaScript并且不要使用$(document).ready :

layout.html(假设使用默认文件名)

<head>
<title>Layouts</title>
</head>

<body>
{{> root}}
</body>

<template name="root">
{{> navigation}}
{{> hello}}
</template>

<template name="navigation">
<div class="ui-layout-east">
<p>Navigation stuff here</p>
</div>
</template>

<template name="hello">
<div class="ui-layout-center">
<h1>Hello World!</h1>
{{greeting}}
<input type="button" value="Click" />
</div>
</template>

layout.js

if (Meteor.isClient) {
Template.root.rendered = function() {
$('body').layout({ applyDemoStyles: true });
};
}

关于jquery - 将 jquery-layout 与 Meteor 一起使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16037823/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com