gpt4 book ai didi

jquery-ui - 如何在 Ember 中创建像对话框这样的控件?

转载 作者:行者123 更新时间:2023-12-04 17:38:25 25 4
gpt4 key购买 nike

我想创建一个像对话框这样的控件,以便在需要 Ember 时重用。 Dialog 将使用 Jquery 库的 $('foo').dialog 函数来实现它。前任:

dialog control in Ember

你能给我任何想法和例子吗?谢谢。

最佳答案

Luke Melia 创建了一个 repository它展示了如何在 jQuery UI 中使用 Ember.js。

基于 Luke 的例子,我创建了一个 JQ.Dialog表示 jQuery UI 对话框的类,参见 http://jsfiddle.net/pangratz666/aX7x8/ :

// Create a new mixin for jQuery UI widgets using the Ember
// mixin syntax.
JQ.Widget = Em.Mixin.create({
// as defined in
// https://github.com/lukemelia/jquery-ui-ember/blob/master/js/app.js#L9-95
...
});

JQ.Dialog = Ember.View.extend(JQ.Widget, {
uiType: 'dialog',
uiOptions: 'autoOpen height width'.w(),

autoOpen: false,

open: function() {
this.get('ui').dialog('open');
},
close: function() {
this.get('ui').dialog('close');
}
});

然后像这样创建对话框:

var dialog = JQ.Dialog.create({
height: 100,
width: 200,
templateName: 'dialog-content'
});
dialog.append();

Ember.run.later(function(){
dialog.open();
}, 1000);



除了 jQuery UI,你还可以使用 flame.js ,Ember.js 的小部件/UI 库。这个项目支持面板,见 http://jsfiddle.net/qUBQg/ :

// the following code sample has been taken from http://jsfiddle.net/qUBQg/
App.TestPanel = Flame.Panel.extend({
layout: { width: 400, height: 200, centerX: 0, centerY: -50 },
// Controls whether all other controls are obscured (i.e. blocked
// from any input while the panel is shown)
isModal: true,
// This controls the visual effect only, and works only if
// isModal is set to true
dimBackground: true,
// Set to false if you want to e.g. allow closing the panel only
// by clicking some button on the panel (has no effect if isModal
// is false)
allowClosingByClickingOutside: true,
// Allow moving by dragging on the title bar - default is false
allowMoving: true,
// Title is optional - if not defined, no title bar is shown
title: 'Test Panel',

// A Panel must have exactly one child view named contentView
contentView: Flame.LabelView.extend({
layout: { left: 20, top: 90, right: 20, bottom: 20 },
textAlign: Flame.ALIGN_CENTER,
value: 'This is a panel.'
})
});

// later in the code
App.TestPanel.create().popup();

关于jquery-ui - 如何在 Ember 中创建像对话框这样的控件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10699619/

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