Creating Dynamic Context Menu
Here is Html Code for context menu
<div class="simple-context-menu">Right Click Me</div>
And the Javascript file is shown below
// setup:
// Install JQuery Plugin from here:
// https://github.com/swisnl/jQuery-contextMenu
// DOCS: http://swisnl.github.io/jQuery-contextMenu/
var menu1_item_names = ['item1', 'item2', 'item3'];
var menu2_item_names = ['item4', 'item5', 'item6'];
$.contextMenu({
selector: '.test-context-menu',
build: function($trigger, e) {
var options = {
callback: function(key, options) {
alert("Clicked on " + key + " on element " + options.$trigger.attr("id"));
// TODO:
// Display NAME of the menu item clicked(example: item1)
//alert("Clicked on item: " + JSON.stringify(options.items));
return false;
},
// start with an empty map
items: {
"fold1": {
"name": "menu 1",
"items": {}
},
"fold2": {}
}
};
$.each(menu1_item_names, function(k, v) {
options.items.fold1.items[k] = {
name: v
};
});
if (typeof menu2_item_names !== 'undefined' && menu2_item_names.length > 0) {
options.items.fold2 = {
"name": "menu 2",
"items": {}
}
$.each(menu2_item_names, function(k, v) {
options.items.fold2.items[k] = {
name: v
};
});
}
options.items.sep1 = "---------";
options.items.quit = {
name: "Quit"
};
return options;
}
});
Note:
When you run it and right click in the above text field a Context Menu appears
Click on any menu item, you will see(the alert box), the menu item index position eg. 0, 1 2...
Instead of the name of the item clicked in
I would like to see the name of the menu item
And the JSFiddle for the context menu.
Thanks in Advance
You can use this on the callback function :
options.$selected.text()
Related
I'm having the search column with checkbox along with folder names. when I click the checkbox of corresponding folder, it will show their items. As well as when I click on multiple checkbox it will show their corresponding items. But when I uncheck the folder, the corresponding items doesn't remove. So I need the hard reload or refresh when I check or uncheck the checkbox or need to clear the cache for every check or uncheck.
Here is my Code:
Checkbox: Core.component.Checkbox.extend({
click: function () {
var ret=null;
var nav = this.get("controller").get('selectedNavigator');
ret = this._super.apply(this, arguments);
var states=null;
Ember.run.schedule('sync', this, function () {
Ember.run.schedule('render', this, function () {
states = this.get('parentView.itemStates');
var values = Object.keys(states).filter(function (key) {
if(states[key]){
return states[key];}
else{return;}
});
if (values.length === 0) {
Core.Action('core:contentHome', {});
} else {
this.set('parentView.model.values',values);
nav.publish();
}
});
});
return ret;
}
}),
For the Publish:
publish: function () {
var currentResultSet = this.get('resultSet'),
ctl = this.get('controller'),
form = ctl.get('formModel'),
resultSet,
data = form.sleep(2000);
if (Object.keys(data).length === 0) {
Core.view.Menu.create({
anchor: $('*[data-class-name="Core.Tab.Content.Controller.NavigationRefresh"]'),
model: [
Core.model.Menu.Item.create({
label: "Please select something to search.",
icon: 'dialog_warning'
})
]
}).show();
return;
}
resultSet = form.send();
ctl.set('loadState', 'loading');
ctl.set('resultSet', Core.model.BlankResultSet.create({
loadState: 'loading',
tabContext: Ember.get(form, 'resultSet.tabContext')
}));
resultSet.fail(function (err) {
ctl.set('loadState', 'loaded');
console.log(currentResultSet);
ctl.set('resultSet', currentResultSet);
}).always(function () {
ctl.set('loadState', 'loaded');
});
},
I want to show conditional contextMenu Items via jQuery.
For Example :
I have cars in my account. And I wanted to show options on conditions.
If car is of my own then all menu items should be visible to me. And if it is shared with me then only View Menu should to visible to me.
if (type == 'vehicle') {
(function () {
var vehicle_id = node.data.vehicle_id;
var vehicle_status = '';
$.ajax({
url: baseUrl + '/check-vehicle-status/'+vehicle_id,
success: function(data) {
console.log(data);
if(data == 'shared'){
//what should I write here? to show only View option
}
}
});
items = {
"View": {
"label": "View Vehicle",
"action": function action() {
self.viewVehicle(vehicle_id);
}
},
"modify": {
"label": "Edit Vehicle",
"action": function action() {
self.editVehicle(vehicle_id);
}
},
"delete": {
"label": "Delete Vehicle",
"action": function action() {
dialogHandler.showDeleteVehicle(function () {
self.removeVehicle(vehicle_id);
});
}
},
You will have to check the data param in the context menu method like below (provided that the node.data of a tree node will have a value).
Check demo - Fiddle Demo
...
contextmenu: {
items: function (node) {
// remove default context menu items
var tmp = $.jstree.defaults.contextmenu.items();
delete tmp.rename;
delete tmp.remove;
delete tmp.ccp;
delete tmp.create;
for (menuItem in items) {
if( menuItem === 'View' || node.data !== 'shared') {
tmp[ menuItem ] = {
id: menuItem,
label: items[menuItem].label,
action: items[menuItem].action
}
}
}
return tmp;
}
},
I am wondering, if it is possible to implement in the existing jQuery context menu (link to jQuery custom context menu) a link item, where you can right click on the link to get the default browser context menu.
This is my code so far:
$('.cMenuCust').on('contextmenu', function(e){
$('ul li:nth-child(3)').text((c > 100) ? 'tooMuch' : 'thatsOK');
$('.context-menu-list').width(500);
});
$(function(){
$.contextMenu.types.label = function(item, opt, root) {
$('<span>HTML<span>')
.appendTo(this)
.on('contextmenu', 'a', function(e) {
return true;
});
this.addClass('labels').on('contextmenu:focus', function(e) {
}).on('contextmenu:blur', function(e) {
});
};
$.contextMenu({
selector: '.cMenuCust',
trigger: 'left',
callback: function(key, options) {
if (key === 'a') {
...
} else if (key === 'XLSX') {
...
} else if (key === 'CSV') {
...
}
},
items: {
"title": {name: '{!cmTitel}', disabled: true},
"sep1": "----------------",
"XLS": {name: 'XLS'},
label: {type: "label", customName: "Label", callback: function(){ return false; }, disabled: function(){ return (c > 10000); }},
"CSV": {name: 'CSV'}
}
});
});
Do you have any idea how to get the default browser context menu, if I make a right click on the link item in the jQuery custom context menu (link to jQuery custom context menu)?
Every hint is highly appreciated.
Thanks in advance.
Using AngularJS I want to show and hide the data related with particular id in the toggle way.
My JSON Data format is like:
$scope.things = [{
id: 1,
data: 'One',
shown: true
}, {
id: 2,
data: 'Two',
shown: false
}, {
id: 3,
data: 'Three',
shown: true
}, ];
What I want is when click on id-1 It will show text One and Hide the others, when click on id-2 will show text Two and hide others and so on.
Here is the fiddle what I tried : jsfiddle : Demo Link
i updated your code
$scope.flipMode = function (id) {
$scope.things.forEach(function (thing) {
if(id == thing.id){
thing.shown = true;
}
else{
thing.shown = false;
}
})
};
{{thing.id}}
here is the working fiddle
It should work
$scope.flipMode = function (id) {
$scope.things.forEach(function (thing) {
if(thing.id === id) {
thing.shown = true;
return;
}
thing.shown = false;
})
};
<div ng-repeat="thing in things">
{{thing.id}}
</div>
Forked working solution: http://jsfiddle.net/nypmmkrh/
Change your scope function:
$scope.flipMode = function (id) {
$scope.things.forEach(function(thing) {
if(thing.id == id) {
thing.shown = true;
} else {
thing.shown = false;
}
});
};
And pass the id in the view:
{{thing.id}}
There is a form on my page with textarea (CKEDITOR) and select field <select id="_photogalleries" multiple="multiple"></select>. I'd like options in RichCombo to depend on the options that are selected in select with id #_photogalleries. Is there any way to regenerate RichCombo dynamically?
Thanks in advance.
CKEDITOR.plugins.add('style_plugin', {
requires: ['richcombo'],
init: function(editor) {
var pluginName = 'style_plugin';
var config = editor.config,
lang = editor.lang.format;
editor.ui.addRichCombo('photogalleries', {
label: "Фоторепортаж",
title: "Фоторепортаж",
voiceLabel: "Фоторепортаж",
className: 'cke_format',
multiSelect: false,
icon: CKEDITOR.plugins.getPath('style_plugin') + 'photo-list-horizontal.png',
panel: {
css: [config.contentsCss, CKEDITOR.getUrl(editor.skinPath + 'editor.css')],
voiceLabel: lang.panelVoiceLabel
},
init: function () {
this.startGroup("Фоторепортаж");
var list=this;
$("#_photogalleries option:selected").each(function(index, value){
console.log(index, value);
list.add("#HORIZONTAL_GALLERY_"+ $(value).val()+"#", "(Г) " + $(value).text(), "(Г) " + $(value).text());
list.add("#VERTICAL_GALLERY_"+ $(value).val()+"#", "(В) " + $(value).text(), "(В) " + $(value).text());
});
},
onClick: function (value) {
editor.focus();
editor.fire('saveSnapshot');
editor.insertHtml(value);
editor.fire('saveSnapshot');
}
});
}
});
This works for me and you dont have to keep a global variable.
CKEDITOR.plugins.add('systemdata', {
init: function (editor) {
var fnData = editor.config.fnData;
if (!fnData || typeof (fnData) != 'function')
throw "You must provide a function to retrieve the list data.";
editor.ui.addRichCombo('systemDataCmb',
{
allowedContent: 'abbr[title]',
label: "System Data",
title: "System Data",
multiSelect: false,
init: function () {
var self = this;
var content = fnData();
$.each(content, function(index, value) {
// value, html, text
self.add(value.name, value.name, value.name)
});
}
}
Then to set the function to get the data put this somewhere where you setup the ckeditor
CKEDITOR.replaceAll(function(element, config) {
config.startupFocus = true;
config.fnData = function() {
var returnData = null;
$.ajax({
url: "/GetData",
async: false,
data: { id: 1 },
}).done(function(result) { returnData= result; });
return returnData;
};
});
It assumes you bring back a json response that has an array of items that have a value property, that can be easily changed though.
I guess I found a solution that worked for me. It was to keep a list object in a global variable and then modify it when onchange event fires in the external select.
I solved this trouble with a single line:
YOURCOMBO.createPanel(editor);
For example:
var comboTeam = editor.ui.get("team");
comboTeam.createPanel(editor);//This is important, if not, doesnt works
Now you can add items to the combo
comboTeam.add("name","name","name");
comboTeam.add("name2","name2","name2");
comboTeam.add("name3","name3","name3");