I`m using CKEditor on my website.
I need adding select input for follow attribute in link plugin
i.e.
< a href="link_target" rel="nofollow">Hyper link< /a>
Customize from left to right
I try many time. but not implemented yet.
How to customize the select options?
It is my customize code of link.js
/ckeditor/plugins/link/dialogs/link.js
{
id: "followOptions",
type: "select",
label: b.followOptions,
"default": "doFollow",
items: [
[b.doFollow, "doFollow"],
[b.noFollow, "noFollow"]
], setup: function (a) {
this.setValue(a.followOptions || "")
}, commit: function (a) {
a.followOptions = this.getValue()
}
}
Related
I have a DataTable displaying data for Branches with two custom buttons defined: Add and Update. They are initialized at the top of the Javascript section
var buttons;
var tblBranch;
$.fn.dataTable.ext.buttons.add = {
className: 'button-add',
text: "Add Branch",
action: function (dt) {
onBtnAddClicked()
}
};
$.fn.dataTable.ext.buttons.update = {
className: 'button-update',
text: "Update",
action: function (dt) {
onBtnUpdateClicked()
}
};
I'd like to disable the Edit button on page load and only enable it to be clickable when a row has been selected. Problem is, I'm using custom buttons and I can't find anything on datatables.net about how to enable/disable them depending on conditions. So far what I've tried is this:
tblBranch = $("#tblBranches").DataTable({
dom: 'Blfrtip',
buttons: {
buttons :[
'add', 'update'
]
}
select: true;
})
$("#tblBranches tbody").on('click', 'tr', function () {
if (tblBranch.row(this).hasClass('selected')) {
$('button-update').removeClass("DTTT_disabled");
}
else {
table.$('tr.selected').removeClass('selected');
$('button-update').addClass("DTTT_disabled");
}
});
But I don't know what the code to disable the Edit button when the page loads should be like, and I've looked here, here, here and here.
Thanks for any guidance.
The last link you are referring to hold the solution you are looking for. But the documentation is a little bit vague, guess it need a solid example. It is not clear how you create the buttons (you show both methods) but below is an inline example, it would work with constructor as well. Simply give the button a class, like .edit and set it to disabled from start :
var table = $('#example').DataTable( {
dom: 'Bfrtip',
select: true,
buttons: [
{
text: 'Edit',
className: 'edit',
enabled: false,
action: function (e, dt, node, config) {
//do something
}
},
{
text: 'Add',
action: function (e, dt, node, config) {
//do something
}
}
]
})
Then use the Select plugins select and deselect events to update the enabled status of the .edit button :
$('#example').on('select.dt deselect.dt', function() {
table.buttons( ['.edit'] ).enable(
table.rows( { selected: true } ).indexes().length === 0 ? false : true
)
})
demo -> https://jsfiddle.net/pmee6w2L/
I have created a toolbar in my windows app which contains a few buttons.
What I want is a select dropdown list along side these buttons but no idea how to create it or append it to the toolbar via Javascript (as the elements of the list will change depending on the dataset I use).
I create my toolbar like so :
//JS
var viewsDataArray = [
new WinJS.UI.Command(null, { id: 'cmdDelete', label: 'delete', section: 'primary', type: 'button', icon: 'delete', tooltip: 'View 1', onclick: clickbuttonprintout() }),
new WinJS.UI.Command(null, { id: 'cmdFavorite', label: 'favorite', section: 'primary', type: 'toggle', icon: 'favorite', tooltip: 'View 2', onclick: clickbuttonprintout() }),
];
window.createImperativeToolBar2 = function () {
var tb = new WinJS.UI.ToolBar(document.querySelector("#toolbarContainer2"), {
data: new WinJS.Binding.List(viewsDataArray)
});
}
createImperativeToolBar2();
//html
<div id="toolbarContainer2" style="direction: rtl" ></div>
Try using "content" command type. As per the documentation # https://msdn.microsoft.com/en-in/library/windows/apps/dn904220.aspx
its supposed to support <input> tag.
This creates an Command that can host other HTML markup inside of it, including text, <input> tags, and even a subset of WinJS controls. Only a <div> element can host a content Command.
UPDATE
https://jsfiddle.net/vnathalye/yg0rs4xc/
You need to create a <div> tag and pass it as first param to new WinJS.UI.Command.
Once that is done you can add select drop down or any other control to that div and that should appear in the toolbar. In the above jsfiddle link I've hardcoded select tag in the div.
I'm using the video.js 4.12 library and I want replace control bar items. For example, move one of my custom buttons to the 2nd slot of the control bar.
How do I change the order of items on the taskbar? I had no luck on Google.
Videojs place good class on elements. By this way you can identify control bar's elements.
To handle the item's order I used Jquery :
var createPrevButton = function() {
var props = {
className: 'vjs-control player-prev-button', //We use this class in Jquery
innerHTML: '<div class="vjs-control-content"></div>',
role: 'button',
'aria-live': 'polite',
tabIndex: 0
};
return videojs.Component.prototype.createEl(null, props);
};
var myPlayer = me.player = videojs(me.idVideo, {
plugins : { chapters : {} },
children: {
controlBar: {
children: [
{
name: 'playToggle'
},
{
name: 'currentTimeDisplay'
},
{
name: 'timeDivider'
},
{
name: 'durationDisplay'
}
/*
...........
*/
]
}
}
});
$(".player-prev-button").insertAfter(".vjs-play-control");
$(".player-next-button").insertAfter(".player-prev-button");
After the instanciation of my player just handle item by Jquery.
I think it's better than use CSS.
But the best way should be by videojs's option or somethink like that
I have a Kendo UI grid in which the first column contains a menu where the user can select an Action to perform on the item.
I am using a Kendo UI toolbar, with only the overflow icon (I could not find a better option, there seems to be no standalone drop down menu in the suite).
HTML:
<div ng-controller="myController">
<div kendo-grid="lineGrid" k-options="lineGridOptions"></div>
</div>
MyController.js, column definitions:
columns: [{
field: "Action",
template: "<div id='lineToolbarDiv' kendo-toolbar='lineToolbar' k-options='lineToolbarOptions' class='button-group-toolbar'></div>",
width: "80px",
attributes: { lineNo: "#= lineNo #" }
}, {
field: "itemNo", title: "Item #"
}
],
MyController.js, toolbar definition:
$scope.lineToolbarOptions = {
items: [{
type: "button", id: "menuItemA", text: "Do A", overflow: "always"
}, {
type: "button", id: "menuItemB", text: "Do B", overflow: "always"
}],
click: function (e) {
console.log("click", e.target.text());
if (e.id.indexOf("menuItemA") === 0) {
alert(e.id);
} else if (e.id.indexOf("menuItemB") === 0) {
alert(e.id);
}
}
};
Plunker: http://plnkr.co/edit/FJJmoKyAh3JoOVicUGKB?p=preview
Question: In the above click handler for the toolbar, how do I know what row they used the menu on?
Also, if there is a cleaner standalone Kendo menu or similar (that matches the blueopal theme), that could be of interest (and might make this easier).
For solving your question you need to know that in click event handler this refer to the toolbar and this.element is the HTML element.
If you do:
click: function(e) {
// Get the HTML row (tr) that contains the toolbar
var row = this.element.closest("tr");
// Get its index in the table
console.log("row", row.index());
...
}
If you need to get access to the data item in the Grid DataSource you should use dataItem method in KendoUI grid. This is something like:
click: function(e) {
// Get the HTML row (tr) that contains the toolbar
var row = this.element.closest("tr");
// Get its index in the table
console.log("row", row.index());
// Get the item from the Grid DataSource
var item = $scope.lineGrid.dataItem(row);
// Show it in the console
console.log("item", item);
...
}
How to add a context menu in aurigma uploader. I want to add select all and deselect all option.
I have read this documentation ( http://www.aurigma.com/docs/us8/JA_AllMembers_T_J_$au_contextMenu.htm ) and I have tried this below coding. But, nothing appear in aurigma uploader plugin?
<script type="text/javascript">
var uploader = $au.uploader({
id: 'Uploader1',
width: '950px',
height: '500px',
licenseKey: 'XXXXX-XXXXX-XXXXX-XXXXX-XXXXX-XXXXXX',
enableDescriptionEditor: false,
enableRotation: false,
activeXControl: {
codeBase: 'Scripts/Uploader8.cab',
codeBase64: 'Scripts/Uploader8_x64.cab'
},
javaControl: {
codeBase: 'Scripts/Uploader8.jar'
},
uploadSettings: {
actionUrl: 'upload.php',
//redirectUrl: 'gallery.php',
filesPerPackage: 1
},
converters: [
{ mode: '*.*=SourceFile' }
],
folderPane: {
height: 370
},
uploadPane: {
viewMode: 'List'
},
contextMenu: {
addFilesText: "Add files",
uncheckAllText: "Uncheck all"
},
detailsViewColumns: {
infoText: ''
},
paneItem: {
showFileNameInThumbnailsView: true
},
imageEditor: {
enableCrop: false
}
});
var ip = $au.installationProgress(uploader);
ip.progressImageUrl('Images/installation_progress.gif');
ip.progressCssClass('ip-progress');
ip.instructionsCssClass('ip-instructions');
uploader.writeHtml();
</script>
Disclaimer: I work for Aurigma.
The “check all” feature is enabled by default. If you open a folder in the folder view and expand the context menu, you will see this option there. It allows you to add all files in the folder to the upload list. The property ContextMenu.CheckAllText is used to change caption for the menu item.
Are you expecting some other behavior for this menu item or you don’t see it in the context menu?