本文整理匯總了TypeScript中@ephox/sugar.SelectorFind.first方法的典型用法代碼示例。如果您正苦於以下問題：TypeScript SelectorFind.first方法的具體用法？TypeScript SelectorFind.first怎麽用？TypeScript SelectorFind.first使用的例子？那麽, 這裏精選的方法代碼示例或許可以為您提供幫助。您也可以進一步了解該方法所在類@ephox/sugar.SelectorFind的用法示例。
在下文中一共展示了SelectorFind.first方法的4個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的TypeScript代碼示例。
示例1: function
const tag = function () {
const head = SelectorFind.first('head').getOrDie();
const nu = function () {
const meta = Element.fromTag('meta');
Attr.set(meta, 'name', 'viewport');
Insert.append(head, meta);
return meta;
};
const element = SelectorFind.first('meta[name="viewport"]').getOrThunk(nu);
const backup = Attr.get(element, 'content');
const maximize = function () {
Attr.set(element, 'content', 'width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0');
};
const restore = function () {
if (backup !== undefined && backup !== null && backup.length > 0) {
Attr.set(element, 'content', backup);
} else {
// According to apple docs the default is:
// width=980
// height=<calculated>
// initial-scale=<calculated>
// minimum-scale=0.25
// maximum-scale=5.0
// user-scalable yes
// However just setting user-scalable seems to fix pinch zoom and who knows these defaults might change
Attr.set(element, 'content', 'user-scalable=yes');
}
};
return {
maximize,
restore
};
};示例2: function
export default function () {
const ephoxUi = SelectorFind.first('#ephox-ui').getOrDie();
const fontSlider = Container.sketch({
dom: UiDomFactory.dom('<div class="${prefix}-toolbar ${prefix}-context-toolbar"></div>'),
components: [
{
dom: UiDomFactory.dom('<div class="${prefix}-toolbar-group"></div>'),
components: FontSizeSlider.makeItems({
onChange: Fun.noop,
getInitialValue: Fun.constant(2)
})
}
]
});
const colorSlider = Container.sketch({
dom: UiDomFactory.dom('<div class="${prefix}-toolbar ${prefix}-context-toolbar"></div>'),
components: [
{
dom: UiDomFactory.dom('<div class="${prefix}-toolbar-group"></div>'),
components: ColorSlider.makeItems({
onChange: Fun.noop,
getInitialValue: Fun.constant(-1)
})
}
]
});
const gui = Gui.create();
Attachment.attachSystem(ephoxUi, gui);
const container = GuiFactory.build({
dom: UiDomFactory.dom('<div class="{prefix}-outer-container ${prefix}-fullscreen-maximized"></div>'),
components: [
{
dom: UiDomFactory.dom('<div class="${prefix}-toolstrip"></div>'),
components: [ fontSlider ]
},
{
dom: UiDomFactory.dom('<div class="${prefix}-toolstrip"></div>'),
components: [ colorSlider ]
}
]
});
gui.add(container);
}示例3: function
export default function () {
const ephoxUi = SelectorFind.first('#ephox-ui').getOrDie();
const form = SerialisedDialog.sketch({
onExecute () { },
getInitialValue () {
return Option.some({
alpha: 'Alpha',
beta: '',
gamma: '',
delta: ''
});
},
fields: [
Inputs.field('alpha', 'placeholder-alpha'),
Inputs.field('beta', 'placeholder-beta'),
Inputs.field('gamma', 'placeholder-gamma'),
Inputs.field('delta', 'placeholder-delta')
]
});
const gui = Gui.create();
Attachment.attachSystem(ephoxUi, gui);
const container = GuiFactory.build({
dom: UiDomFactory.dom('<div class="${prefix}-outer-container ${prefix}-fullscreen-maximized"></div>'),
components: [
{
dom: UiDomFactory.dom('<div class="${prefix}-toolstrip"></div>'),
components: [
{
dom: UiDomFactory.dom('<div class="${prefix}-toolbar ${prefix}-context-toolbar"></div>'),
components: [
{
dom: UiDomFactory.dom('<div class="${prefix}-toolbar-group"></div>'),
components: [
form
]
}
]
}
]
}
]
});
gui.add(container);
}示例4: function
export default function () {
const ephoxUi = SelectorFind.first('#ephox-ui').getOrDie();
const menu = StylesMenu.sketch({
formats: {
menus: {
Beta: [
{ title: 'Beta-1', isSelected: Fun.constant(false), getPreview: Fun.constant('') },
{ title: 'Beta-2', isSelected: Fun.constant(false), getPreview: Fun.constant('') },
{ title: 'Beta-3', isSelected: Fun.constant(false), getPreview: Fun.constant('') }
]
},
expansions: {
Beta: 'Beta'
},
items: [
{ title: 'Alpha', isSelected: Fun.constant(false), getPreview: Fun.constant('') },
{ title: 'Beta', isSelected: Fun.constant(false), getPreview: Fun.constant('') },
{ title: 'Gamma', isSelected: Fun.constant(true), getPreview: Fun.constant('') }
]
},
handle (format) {
// tslint:disable-next-line:no-console
console.log('firing', format);
}
});
const gui = Gui.create();
Attachment.attachSystem(ephoxUi, gui);
const container = GuiFactory.build({
dom: UiDomFactory.dom('<div class="${prefix}-outer-container ${prefix}-fullscreen-maximized"></div>'),
components: [
{
dom: UiDomFactory.dom('<div class="${prefix}-dropup" style="height: 500px;"></div>'),
components: [
menu
]
}
]
});
gui.add(container);
}