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; }