require(['knockout', 'ojs/ojcore', 'ojs/ojknockout', 'ojs/ojoffcanvas', 'ojs/ojselectcombobox' ], function(ko, oj, $) { 'use strict'; var ViewModel = function() { var self = this; //offcanvas options var toastOptions = { "displayMode": "overlay", "selector": "#toast" }; self.browser = ko.observable(['CH']); var closeToast = function() { return oj.OffcanvasUtils.close(toastOptions); }; self.browserChangedHandler = function (event, data) { if (data.option == "value") { oj.OffcanvasUtils.open(toastOptions); window.setTimeout(closeToast, 5*1000); } }; }; ko.applyBindings(new ViewModel()); }); //RequireJS configs (usually these come first in main.js, but they don't have to) 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": "//rawgit.com/jquery/jquery-ui/1-11-stable/ui", "promise": "//cdn.lukej.me/es6-promise/1.0.0/promise.min", "hammerjs": "//cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.4/hammer.min", "ojdnd": "//rawgit.com/oracle/oraclejet/2.0.1/dist/js/libs/dnd-polyfill/dnd-polyfill-1.0.0.min", "ojs": "//rawgit.com/oracle/oraclejet/2.0.1/dist/js/libs/oj/debug", "ojL10n": "//rawgit.com/oracle/oraclejet/2.0.1/dist/js/libs/oj/ojL10n", "ojtranslations": "//rawgit.com/oracle/oraclejet/2.0.1/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' } } } });
<div class="oj-offcanvas-outer-wrapper"> <div id="wrapper" class="oj-offcanvas-inner-wrapper"> <!-- toast offcanvas --> <div id="toast" class="oj-offcanvas-top oj-panel oj-panel-alt2"> <div>Confirmation: You chose browser <strong data-bind="text: browser"></strong>. </div> </div> <!-- this content will be overlayed by the toast notification --> <div class="oj-panel oj-margin"> <label for="basicSelect">Select a browser</label> <select id="basicSelect" data-bind="ojComponent: {component: 'ojSelect', value: browser, optionChange: browserChangedHandler, rootAttributes: {style:'max-width:20em'}}"> <option value="IE">Internet Explorer</option> <option value="FF">Firefox</option> <option value="CH">Chrome</option> <option value="OP">Opera</option> <option value="SA">Safari</option> </select> </div> </div> <!-- /end inner-wrapper --> </div><!-- /end outer-wrapper -->
@import url('//rawgit.com/oracle/oraclejet/2.0.1/dist/css/alta/oj-alta-min.css'); #toast { /* Make the message look pretty */ border: 1px solid #0572ce; box-shadow: 0 1px 3px #777; /* set the location of the toast message */ left: auto; right: 10px; width: 200px; /* z-index required to overlay oj form controls */ z-index: 1; }