How do I go about adding styles to jquery buttons on a dialog? I want to color some one color and others another color.
I've tried using the class: but i didnt seem to get too much effect. am i doing something wrong? do i need to use something else? do i need to place something somewhere else?
code:
function DisplayCommonDialog(url, title, height, width) {
HideDialogs();
var dialogButtons = [{
text: "Save",
click: function () {
...
}
}
},
width: '70px'
}, {
text: "Cancel",
click: function () {
$(this).dialog("close");
}
}];
if (title.indexOf("Delete") >= 0) {
dialogButtons = [{
text: "OK",
click: function () {
...
},
width: '70px'
}, {
text: "Cancel",
click: function () {
$(this).dialog("close");
}
}];
}
if (popUpDialog != null) {
$("#").dialog("option", {
width: width,
height: height,
title: title,
open: function () {
...
},
close: function () {
...
},
buttons: dialogButtons
});
...
}
else {
popUpDialog = $("#").dialog({
width: width,
height: height,
autoResize: true,
modal: true,
title: title,
open: function () {
...
},
close: function () {
...
},
overlay:
{
opacity: 0.5,
background: "black"
},
position: ['center', 'center'],
buttons: dialogButtons
});
}
}
to add css class in dialog buttons, just use the button button property "class" :
$("#").dialog({
buttons: [{
"text":'your button name',
"click": $.noop,
"class": 'your-css-class1 your-css-class2'
}]
})
the property "class" in each declared button will be inserted when creating dialog.
Hope this help.
similare question about button style in dialog available here
http://jqueryui.com/themeroller/
or
How to style different hover colors for jquery dialog buttons
or how to change jquery dialog buttons
findout the CSS class being applied to the button using firebug and then override it in your css
Related
I would like to know if there is a way I can open the dialog box with the buttons disabled (grayed out).
$("#battleWindow").dialog({//open battling window
title: "Battle!",
closeOnEscape: false,
modal: true,
width: 500,
buttons:[{
text: "Cast", //creates the button
click: function(){
$('#battleLog').text("You cast cure!");
}
},
{
text: "Item",//creates the botton
click: function(){
$('#battleLog').text("You use a potion!");
}
},
{
text: "Flee",//creates the botton
click: function(){
$(this).dialog("close");
}
}]
});
Yes you can disable buttons by adding disabled:true, to the button(s) properties as you can see from the example below.
$(function() {
$("#battleWindow").dialog({ //open battling window
title: "Battle!",
closeOnEscape: false,
modal: true,
width: 500,
buttons: [{
text: "Cast", //creates the button
disabled: true,
click: function() {
$('#battleLog').text("You cast cure!");
}
},
{
text: "Item", //creates the botton
click: function() {
$('#battleLog').text("You use a potion!");
}
},
{
text: "Flee", //creates the botton
click: function() {
$(this).dialog("close");
}
}
]
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="battleWindow"></div>
<hr/>
<div id="battleLog">Log</div>
If you have any questions about the source code above please leave a comment below and I will get back to you as soon as possible.
I hope this helps. Happy coding!
I have JQuery dialog box and I have a problem to position the box on the center. Here is my code:
$.extend({
alert: function (message, title) {
$("<div></div>").dialog( {
buttons: { "Ok": function () { $(this).dialog("close"); } },
close: function (event, ui) { $(this).remove(); },
resizable: false,
title: title,
modal: true,
width:'auto',
.position({
my: "center",
at: "center",
of: window
})
}).html(message);
}
});
And here is how I call my jquery dialog box:
$.alert('<div>My Dialog Box test.</div>', 'My File');
Here is my working example: https://jsfiddle.net/dmilos89/wn1fy15f/1/
Also I use jquery-ui-1.12.1 Jquery version. If anyone can help please let me know.
which version of jquery used? if you used after 1.12 , u don't need to use position in dialog properties
$.extend({
alert: function (message, title) {
$("<div></div>").dialog( {
buttons: { "Ok": function () { $(this).dialog("close"); } },
close: function (event, ui) { $(this).remove(); },
resizable: false,
title: title,
modal: true,
width: '600px',
position : {
my: "center",
at: "center",
of: window
}
}).html(message);
}
});
You have an error where you are declaring the position. Also when you declared width:'auto' you need to set that to a fixed width.
I have a jquery dialog box that I wish to add an additional button to dynamically when a condition is met.
I set the dialog box on page load as follows
$("#confirmT").dialog({
autoOpen: false,
open: function() {
pullResources(cat, id);
},
autoResize:true,
width: 800,
modal: true,
title: 'Select Resources',
buttons: {
Cancel: function() {$(this).dialog( "close" );}},
close: function() {
}
});
Then when a condition is true I want it to add another button to allow the user to add something to the database. This is what I have so far (from the jQuery ui website but nothing happens. No errors are produced, just nothing.
if ($sub == 1)
{
?>
<script type = 'javascript'>
function addbuttons()
{
// Setter
$( "#confirmT" ).dialog( "option", "buttons",
[
{
text: "Ok",
click: function() {
//do something
}
}
]
);
}
addbuttons();</script>
<?php
}
Any help would be greatly appreciated.
Thanks
Try this out:- http://jsfiddle.net/uvep1fnc/
Add the button initially and based on the condition just call out the javascript function to hide the button.
JS:-
$(function () {
$("#dialog-confirm").dialog({
resizable: false,
height: 200,
width: 500,
modal: true,
buttons: [{
text: "Delete all items",
class: "aditya",
click: function () {
$(this).dialog("close");
}
}, {
text: "Cancel",
click: function () {
$(this).dialog("close");
}
}]
});
function foo() {
$("#dialog-confirm").closest(".ui-dialog").find(".aditya").hide();
}
foo();
});
I've created a custom dropdown in tinymce like this:
tinymce.init({
toolbar: "alignment",
setup: function(editor) {
editor.addButton('alignment', {
type: 'menubutton',
text: 'Alignment',
icon: false,
menu: [
{ text: 'left', onclick: function() {tinymce.activeEditor.formatter.toggle('alignleft');}},
{ text: 'center', onclick: function() {tinymce.activeEditor.formatter.toggle('aligncenter');}},
{ text: 'right', onclick: function() {tinymce.activeEditor.formatter.toggle('alignright');}},
{ text: 'justify', onclick: function() {tinymce.activeEditor.formatter.toggle('alignjustify');}},
]
});
}
});
which creates this:
However what I'd like is to just move the alignment buttons from the main toolbar in the dropdown menu.
How do I got about putting these actual buttons from the toolbar, into a dropdown menu? Is it like the code above or is a a totally different way?
So basically put these buttons in the dropdown above with the toggle states for on and off too.
Try this setup - Plunker
tinymce.init({
selector: "textarea",
toolbar: "styleselect | bold italic | alignment | alignmentv2",
setup: function(editor) {
editor.addButton('alignment', {
type: 'listbox',
text: 'Alignment',
icon: false,
onselect: function(e) {
tinyMCE.execCommand(this.value());
},
values: [
{icon: 'alignleft', value: 'JustifyLeft'},
{icon: 'alignright', value: 'JustifyRight'},
{icon: 'aligncenter', value: 'JustifyCenter'},
{icon: 'alignjustify', value: 'JustifyFull'},
],
onPostRender: function() {
// Select the firts item by default
this.value('JustifyLeft');
}
});
editor.addButton('alignmentv2', {
type: 'menubutton',
text: 'Alignment v2',
icon: false,
menu: [
{icon: 'alignleft', onclick: function() { console.log(editor); tinyMCE.execCommand('JustifyLeft'); }},
{icon: 'alignright', onclick: function() { tinyMCE.execCommand('JustifyRight'); }}
]
});
}
});
#NoBugs, you can enhance the onselect method to perform the alignment icon update.
At first, by examining structure of this object in the onselect method we'll see that this.settings.values property stores an array with early defined values.
By using one of many find utility functions we get the selected value item and update the icon as needed:
onselect: function() {
selectedItem = find(this.settings.values, {value: this.value()})
this.icon(selectedItem.icon)
tinyMCE.execCommand(this.value());
}
Hope, this helps. Cheers!
This is probably best solved using a custom split button. That way we can assign the last selected option to the main button.
See the result here - CodePen
tinymce.init({
selector: '#editor',
menubar: false,
toolbar: 'bold italic underline | alignmentsplit | bullist numlist outdent indent',
setup: function (editor) {
editor.on('init', function() {
this.getDoc().body.style.fontSize = '16px';
this.getDoc().body.style.fontFamily = 'Georgia';
});
editor.addButton('alignmentsplit', {
type: 'splitbutton',
text: '',
icon: 'alignleft',
onclick: function(e) {
tinyMCE.execCommand(this.value);
},
menu: [{
icon: 'alignleft',
text: 'Align Left',
onclick: function() {
tinyMCE.execCommand('JustifyLeft');
this.parent().parent().icon('alignleft');
this.parent().parent().value = 'JustifyLeft'
}
}, {
icon: 'alignright',
text: 'Align Right',
onclick: function() {
tinyMCE.execCommand('JustifyRight');
this.parent().parent().icon('alignright');
this.parent().parent().value = 'JustifyRight';
}
}, {
icon: 'aligncenter',
text: 'Align Center',
onclick: function() {
tinyMCE.execCommand('JustifyCenter');
this.parent().parent().icon('aligncenter');
this.parent().parent().value = 'JustifyCenter';
}
}, {
icon: 'alignjustify',
text: 'Justify',
onclick: function() {
tinyMCE.execCommand('JustifyFull');
this.parent().parent().icon('alignjustify');
this.parent().parent().value = 'JustifyFull';
}
}
],
onPostRender: function() {
// Select the first item by default
this.value ='JustifyLeft';
}
});
}
});
Note: If you re-select an alignment option on content that is already aligned that way, TinyMCE toggles the alignment formatting off. This is default TinyMCE behaviour, but you would need to indicate that the section already has that formatting via a toggle state on the button for this to make more sense to the user. This has not been implemented above.
I have made a JQuery Dialog, but for some reason the code which executes, when the 'ok' button is clicked is not functioning properly.
I would like there to be a “Confirm Dialog”, after a person clicks on the edit button which would fundamentally warn the user that they are going to edit something that perhaps they shouldn't be editing.
Furthermore, if the user clicks the “Ok” button, I want the edit input to be editable, whilst hiding the edit button.
Nevertheless, everything else is working the way it should. For example when users click on the close or cancel button, the dialog is closed correctly, and when users clicks on the ok button, the alert works, and the dialog is closed properly. So the only thing that isn't working correctly is the code between the alert and the dialog close.
function ShowDialogBox(title, content) {
$("#lblMessage").html(content);
$("#dialog").dialog({
resizable: false,
title: title,
modal: true,
width: '400px',
height: 'auto',
bgiframe: false,
hide: { effect: 'fade', duration: 400 },
buttons: [
{
text: 'OK',
"class": 'showcss',
click: function () {
alert('hello');
$("#edit_input").attr("readonly", false);
$("#edit_input").focus();
$('#edit_button').hide();
$("#dialog").dialog('close');
}
},
{
text: 'Cancel',
"class": 'showcss',
click: function () {
$("#dialog").dialog('close');
}
}
]
});
}
The problem is that the property name readOnly is case sentitive.
Code using prop instead of attr:
function ShowDialogBox(title, content) {
$("#lblMessage").html(content);
$("#dialog").dialog({
resizable: false,
title: title,
modal: true,
width: '400px',
height: 'auto',
bgiframe: false,
hide: {
effect: 'fade',
duration: 400
},
buttons: [{
text: 'OK',
"class": 'showcss',
click: function () {
alert('hello');
$("#edit_input").prop("readOnly", false);
$("#edit_input").focus();
$('#edit_button').hide();
$("#dialog").dialog('close');
}
}, {
text: 'Cancel',
"class": 'showcss',
click: function () {
$("#dialog").dialog('close');
}
}]
});
}
The problem was that I was making the actions before closing the dialog.
function ShowDialogBox(title, content) {
$("#lblMessage").html(content);
$("#dialog").dialog({
resizable: false,
title: title,
modal: true,
width: '400px',
height: 'auto',
bgiframe: false,
hide: { effect: 'fade', duration: 400 },
buttons: [
{
text: 'OK',
"class": 'showcss',
click: function () {
$("#dialog").dialog('close');
$("#edit_input").attr("readonly", false);
$("#edit_input").focus();
$('#edit_button').hide();
}
},
{
text: 'Cancel',
"class": 'showcss',
click: function () {
$("#dialog").dialog('close');
}
}
]
});
}