requirejs.config({
// Path mappings for the logical module names
paths: {
'knockout': '//cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min',
'jquery': '//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min',
"jqueryui": "//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui",
"jqueryui-amd": "//cdn.rawgit.com/jquery/jquery-ui/1-11-stable/ui",
"promise": "//cdn.rawgit.com/components/es6-promise/c95149ffaa2e8162601c57d4282362eac84f929b/promise.min",
"hammerjs": "//cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.4/hammer.min",
"ojdnd": "//cdn.rawgit.com/oracle/oraclejet/49fcbbde7c8e178a3a21625d44485536e3ad1aaf/dist/js/libs/dnd-polyfill/dnd-polyfill-1.0.0.min",
"ojs": "//cdn.rawgit.com/oracle/oraclejet/49fcbbde7c8e178a3a21625d44485536e3ad1aaf/dist/js/libs/oj/debug",
"ojL10n": "//cdn.rawgit.com/oracle/oraclejet/49fcbbde7c8e178a3a21625d44485536e3ad1aaf/dist/js/libs/oj/ojL10n",
"ojtranslations": "//cdn.rawgit.com/oracle/oraclejet/49fcbbde7c8e178a3a21625d44485536e3ad1aaf/dist/js/libs/oj/resources",
"text": "//cdnjs.cloudflare.com/ajax/libs/require-text/2.0.12/text.min",
"signals": "//cdnjs.cloudflare.com/ajax/libs/js-signals/1.0.0/js-signals.min",
},
// Shim configurations for modules that do not expose AMD
shim: {
'jqueryui-amd': {
exports: "$",
deps: ['jquery']
},
'jquery': {
exports: ['jQuery', '$']
}
},
config: {
ojL10n: {
merge: {
//'ojtranslations/nls/ojtranslations': 'resources/nls/menu'
// The following addes en-US to the r.js bundle
//'ojtranslations/nls/ojtranslations': '../../oj/resources/nls/en-US/localeElements'
}
}
}
});
require(['knockout',
'ojs/ojcore',
'ojs/ojknockout',
'ojs/ojbutton',
'ojs/ojmenu'
], function(ko, oj) {
'use strict';
var ViewModel = function() {
var self = this;
};
ko.applyBindings(new ViewModel());
});
<div class="content-container">
<h2>Button</h2>
<button data-bind="ojComponent: {
component:'ojButton',
display: 'icons',
icons: {start:'fa fa-jsfiddle'},
label: 'jsFiddle'
}">
</button>
<h2>Menu</h2>
<div id='menubutton-container'>
<button id="menuButton"
data-bind="ojComponent: {component: 'ojButton', label: 'Actions',
menu: '#myMenu'}">
</button>
<!-- To handle menu item selection, use a select listener as shown, not a click listener. -->
<ul id="myMenu" style="display:none"
data-bind="ojComponent: {component: 'ojMenu'}">
<li id="zoomin">
<a href="#"><span class="oj-menu-item-icon fa fa-search-plus"></span>Zoom In</a>
</li>
<li id="zoomout">
<a href="#"><span class="oj-menu-item-icon fa fa-search-minus"></span>Zoom Out</a>
</li>
<li id="divider"></li>
<li id="save">
<a href="#"><span class="oj-menu-item-icon fa fa-save"></span>Save</a>
</li>
<li id="print" class="oj-disabled">
<a href="#"><span class="oj-menu-item-icon fa fa-print"></span>Print...</a>
</li>
</ul>
</div>
</div>
@import url('//cdn.rawgit.com/oracle/oraclejet/49fcbbde7c8e178a3a21625d44485536e3ad1aaf/dist/css/alta/oj-alta.css');
@import url('//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css');
.content-container {
margin: 10px;
}