gpt4 book ai didi

jquery - 如何将 jQuery UI 小部件与 Meteor.js 一起使用?

转载 作者:行者123 更新时间:2023-12-01 03:14:52 26 4
gpt4 key购买 nike

我正在尝试使用 jQuery UI 小部件与 Meteor 应用程序集成。我安装了meteor-jQueryi-ui包裹。在本例中,我尝试使用 Accordion Widget。我不确定为什么 Accordion Widget 没有生效,您能否告诉我为什么它不起作用。下面是我的代码。谢谢

JS 文件

Images = new Meteor.Collection('images');

if (Meteor.isClient) {
$("#accordion").accordion({ heightStyle: "content" });
Template.element_menu.scenes = function () {
return Images.find({type: 'scene'});
};

Template.element_menu.characters = function () {
return Images.find({type: 'character'});
};
}

if (Meteor.isServer) {
Meteor.startup(function () {

if(Images.find().count() == 0){
Images.insert({type: 'scene', src:'http://www.clker.com/cliparts/0/f/b/8/1197091304272882353carlitos_Cartoon_Landscape.svg.hi.png'});
Images.insert({type: 'scene', src:'http://www.clker.com/cliparts/x/p/O/y/C/9/farm-fence-hi.png'});
Images.insert({type: 'scene', src:'http://www.clker.com/cliparts/f/a/d/2/12988691081493617768race%20track.svg.hi.png'});
Images.insert({type: 'character', src:'http://www.clker.com/cliparts/8/6/e/a/1237914684389011788StudioFibonacci_Cartoon_bunny.svg.hi.png'});
Images.insert({type: 'character', src:'http://www.clker.com/cliparts/c/a/b/4/11954237081096120744Machovka_panda.svg.hi.png'});
Images.insert({type: 'character', src:'http://www.clker.com/cliparts/2/7/a/d/12262023651915431669rg1024_Metalic_Bear.svg.hi.png'});
}


});
}

HTML

    <head>
<title>Story Teller</title>
</head>

<body>
{{> main}}
</body>

<template name="main">
{{> element_menu}}
<div class="page_related_container">
<div id="page_editor">
<div id="scene_container"></div>
</div>

<div id="page_navigation">Page Navigation</div>
</div>
</div>
</template>

<template name="element_menu">
<div class="element_menu">
<div id="accordion">
<h3>Scene</h3>
<div id="scene_list">
{{#each scenes}}
<div><img width="42" src="{{src}}"/></div>
{{/each}}
</div>
<h3>Characters</h3>
<div id="character_list">
{{#each characters}}
<div><img width="42" src="{{src}}"></div>
{{/each}}
</div>
<h3>Objects</h3>
<div id="object_list"></div>
<h3>Text</h3>
<div id="text_list"></div>
</div>
</div>
</template>

最佳答案

我明白了。为了应用 jQuery UI,您必须等待特定部分呈现。在这种情况下,我只需等到整个主模板加载完毕,然后应用小部件。

  Template.main.rendered = function (){
$("#accordion").accordion({
heightStyle: "content"
});
};

关于jquery - 如何将 jQuery UI 小部件与 Meteor.js 一起使用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17752079/

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