I've made some menus, but can't figure out how to set the actual page content for these menu items once clicked. Cheers.
function doGet() {
var app = UiApp.createApplication();
var menu = app.createMenuBar();
var handler = app.createServerHandler();
var menuUsers = menu.addItem('Users', handler).addSeparator().setId('users');
var menuPending = menu.addItem('Pending Submissions', handler).addSeparator().setId('pending');
app.add(menu);
return app;
}
In general, you would have some main panel that is your main display. Let's call it main-display".
The handler for each menu item executes a function when the menu item is clicked. This function can do anything (say, highlight some text, or pull up a toolbar, or save the file). It doesn't necessarily have to change the whole display. A menu bar is like the File menu or Edit or whatever you'd like.
You would have to define a ServerHandler that handles each different menu item being clicked.
function doGet() {
var app = UiApp.createApplication();
var menu = app.createMenuBar();
var handlerUsers = app.createServerHandler("showUsers");
var handlerPending = app.createServerHandler("showPending");
var menuUsers = menu.addItem('Users', handlerUsers).addSeparator().setId('users');
var menuPending = menu.addItem('Pending Submissions', handlerPending).addSeparator().setId('pending');
app.add(app.createVerticalPanel().add(menu).add(app.createSimplePanel().setId("main-display")));
return app;
}
Then have some functions
function showUsers() {
var app = UiApp.getActiveApplication();
var main = app.getElementById("main-display");
//do whatever you need to display your main panel
return app;
}
Similar function for showPending.
Instead, if you'd like a bunch of different content panels, look into using TabPanel. I feel like this is more of what you're looking for.
Related
I'm trying to implement a form with a dropdown menu that has element from a database and every time i pick an element from that menu another one appears. I'm trying to do this with ajax but i have no idea how to
i know that i have to use this function to start, but i don't know how to implement the rest of it
function ajaxRequest() {var request=false;
try { request = new XMLHttpRequest()}catch(e1){
try{request = new ActiveXObject("Msxml2.XMLHTTP")}catch(e2){
try{ request = new ActiveXObject("Microsoft.XMLHTTP")
}catch(e3){request = false} }
}
return request }
If you are getting json data of menu elements in array then you can iterate and create a menu like this:
let menuHtml = "<ul>";
menuItems.forEach(item => {
menuHtml += `<li>${item.text}</l1>`;
}
menuItem += "</ul>;
// Now your menu HTML is ready. It's time to inject menuHtml on DOM
document.querySelector("#whereToInjectMenuHtml").innerHTML = menuHtml;
If you are getting HTML from api then you can use
document.querySelector("#whereToInjectMenuHtml").innerHTML = yourApiHtml;
I have this Dropdown class in which I want to create new element that ,well you guessed it,works exactly like a drop down menu:
class Dropdown{
constructor(name,element,classNa){
this.classN = classNa;
var x = new CElement(name,"div",dropdownHeaderStyle,"classN");
x.display(element);
}
dropdown(mes){
var z = new CElement(mes,"div",dropDownStyle,this.classN);
z.display(".classN");
}
}
(I have another class CElement that creates elements, using this parameters:value,elementType,elementStyle,classPara = "",and appends it with display funcion, there is no problem with it tho)
the styling:
var dropDownStyle = "display:none;";
var show = "display:block;";
and the showFunction:
function showFunction(selector) {
document.querySelector(selector).classList.toggle("show");
}
The problem happens when I add this bad boy:
x.addEventListener('click',showFunction(".drpDown"));
or this:
x.onclick = showFunction(".drpDown");
It litteraly crashes,If I add that in the constructor, boom after that line nothing works...
The ridiculous thing about this is that I am using another addEventListener('click' ... and that works.What am I doing wrong?
I am using onsen-ui Tab Bar component, When trying to access HTML element of any tab other than the displayed one before rendering it, I always get undefined.
I have made this workaround method which is called after displaying the tab bar on the screen:
var test = function () {
var tabbar = $scope.tabbar;
if (typeof tabbar != 'undefined') {
var len = tabbar._tabItems.length;
for (var i = 0; i < len; i++) {
var tabItem = tabbar._tabItems[i];
tabItem.setActive(true);
tabItem.setActive(false);
}
tabbar._tabItems[len - 1].setActive(true);
};
};
But after executing this method the selected tab is displayed empty, I must click its tab again to show its content.
Any help?
I am working with jQuery and have built a small plugin.
jQuery(document).ready(function(){
jQuery('.section').Section();
});
jQuery.fn.Section = function(func, options){
if(typeof(func)==='undefined') func = 'new';
if(typeof(options)==='undefined') options = new Object();
//var settings = $.extend({}, options);
var DOM = jQuery(this);
var p = DOM.parent();
var collapsed = false;
var slide_area = DOM.find('.slide_area');
var toggle_btn = DOM.find('.toggle_btn');
return this.each( function() {
switch(func){
case 'new':
toggle_btn.on('click', function(){console.log('click');
if (collapsed){
slide_area.slideDown();
toggle_btn.text('-');
collapsed = false;
}else{
slide_area.slideUp();
toggle_btn.text('+');
collapsed = true;
}
});
break;
}
});
}
You can see, I am using a class selector to attach the Section plugin to all DIV's with the class 'section'.
In the Section plugin, there is a listener for a toggle button in the section.
The problem is that when I click on the toggle button, the event is fired 4 times.(There are 4 DIV's with a 'section' class.
I thought I had this plugin set-up correctly so it plays well with jQuery. I have looked around, but could not find what I've done incorrectly.
How can I change this so it does not trigger the click function once for each instance of a 'section' DIV?
Here is the HTML to help understand the structure:
<div class="section"><!-- paypal settings -->
<h3>Paypal Settings</h3>
<div class="section_controls">
<div class="toggle_btn">-</div>
<div class="hr" style="background-color: <?php echo $settings->secondary_color; ?>;"></div>
</div>
</div>
You're doing work outside your this.each(...) that should be inside it. For instance, your lines:
var slide_area = DOM.find('.slide_area');
var toggle_btn = DOM.find('.toggle_btn');
Those are outside the this.each(...) part of your plugin, and you've set DOM to (effectively) the set of elements your plugin was called on. That means that slide_area refers to all .slide_area elements in all of the sections you were called with, and that toggle_btn refers to all .toggle_btn elements in all of the sections you were called with. Later in your this.each(...), you hook up a handler using toggle_btn.on(...), and so you hook it up to all four toggle buttons four separate times.
At first glance, everything you're doing outside your this.each(...) should be inside it.
Just put your variables in the return this.each like this:
return this.each( function() {
var DOM = jQuery(this);
var p = DOM.parent();
var collapsed = false;
var slide_area = DOM.find('.slide_area');
var toggle_btn = DOM.find('.toggle_btn');
switch(func){
case 'new':
toggle_btn.on('click', function(){
console.log('click');
if (collapsed){
slide_area.slideDown();
toggle_btn.text('-');
collapsed = false;
}else{
slide_area.slideUp();
toggle_btn.text('+');
collapsed = true;
}
});
break;
}
});
}
I need to create a ContextMenu that will only show when you right click on a label. MenuManager is where I have the list of menu on my context menu and it is on another file so what I did is initialize the MenuManager.
.MyLayerEdit.Add is the Element I created. I'm not really sure if I did the right ContextMenu function, I just copied this from the other files.
//**initialization of class MyLayerEdit
var MyLayerManager = new MyLayerEdit();
var menuManager = MenuManager.MyLayerEdit.Add;
//***Creating a class 'MyLayerEdit'
var MyLayerEdit = Class.create(){
MyLayerEdit.prototype {
initialize : function () {
this.define();
},
//**Creating ContextMenu
var ContextMenu = Class.create()
ContextMenu.prototype(element, layerNo, layerName {
this.define(element, layerNo, layerName)
},
function MyLayer(){
this.conMenu = new ContextMenu(this);
this.conMenu.call(this.conMenu, menuManager);
//***errorhandler callback
var errorHandler = function(callback){
KKC.Error.checkError(msg, ex)
}
},
Now I don't know what the next thing to do to show the context menu. Anyone know how to create a simple context menu? Using right click button?
On my Specs, its says Create a Class
var MyLayerEdit = Class.create()
and then define is as:
var MyLayerManager = new MyLayerEdit()
before I initialize MyLayerEdit to the other file and call the error method where I did.
I made an element MyLayerEdit under MenuManager in the other file.
Next is to call the show method of context menu to display it, i need to create the context menu:
var ContextMenu = Class.create()