I created an action sheet containing some options
when I select an option I want it to be highlighted.
I took the code from here
https://ionicframework.com/docs/components/#action-sheets
can someone help me please
You can use some (S)CSS to style it with a pseudo-class like :active or :hover. To include your own CSS classes to the action sheet you could use its cssClass property when creating it. Like so:
let actionSheet = this.actionSheetCtrl.create({
title: 'Ionic Action Sheet',
cssClass: 'your-custom-class',
buttons: [
{
text: 'Button 1',
cssClass: 'custom-button-1-class',
handler: () => {
console.log("Button 1 picked!");
}
}
]
});
By doing that, you can use custom CSS classes to style each button (option) of your action sheet, as well as the action sheet itself. If you wanted to, say, make Button 1 have a black background whenever a user "activated" it, you could write:
.custom-button-1-class:active {
background-color: black;
}
Related
I use wordpress and currently writing a plugin for the tinymce-editor. I use the windowmanager.open() function to show a modal, but I dont know how to hide the ok button in this modal. The official documentation is very slim: https://www.tinymce.com/docs/api/tinymce/tinymce.windowmanager/#open
I assume you are creating the modal as per the documentation link you provide, if so, then the buttons parameter let you specify the buttons to add to the modal and the actions of said buttons, like this:
tinymce.activeEditor.windowManager.open({
url: 'file.htm',
buttons: [{
text: 'Accept',
subtype: 'primary',
onclick: 'submit'
},
{
text: 'Custom',
onclick: function(){
//Add custom action here
}
},
{
text: 'Close',
onclick: 'close'
}
],
width: 320,
height: 240
}, {
custom_param: 1
});
passing an empty buttons parameter gives no buttons in the modal, the 'submit' and 'close' strings in onclick button's parameter make the buttons perform those actions, you can add custom logic by defining an anonymous function instead, you can also add custom logic to the 'submit' action by adding the onsubmit parameter, like this:
onsubmit: function() {
//custom logic
}
Tinymce documentation is not much help, I've been researching something similar this past days, these links might be useful for you:
https://www.tinymce.com/docs/api/tinymce/tinymce.plugin/
https://docs.contenido.org/display/CONDEVE/TinyMCE+4#TinyMCE4-Writingownplugins
I am on my first big ionic project and am stuck. Would someone have an idea how to dynamically hide and show buttons in an ionic popup? I need the buttons to initially be hidden, but then after something happens the buttons should show up. Any idea how to get that done?
Trying to explain further, what is required here is provide angular directives inside of the $ionicPopup buttons. eg
buttons: [{
text: 'Cancel'
}, {
text: '<b ng-disabled="user.length<1">Delete</b>',
type: 'button-crimson'
}]
But ng-disabled="user.length<1" gets trimmed when the pop-up is rendered.
If you're still looking for an answer to this...
I created a variable for my buttons array
var buttons = [{...}, {...}]
Then would assign that to the object in the popup
$ionicPopup.show({
templateUrl: 'templates/pop-up.html',
title: 'My Popup',
subTitle: 'stuff,
scope: $scope,
**buttons: buttons,**
And then would alter that array
buttons.splice(0, 1, {/*new button*/})
I haven't tested it but it might also work if you wanted to edit a title or class
buttons[0].type = 'newCssClass';
My work-around has been to put the dynamic buttons in the template of the popup rather than the buttons array. It's not ideal but it will work.
eg:
addPopup = $ionicPopup.show({
templateUrl: 'templates/pop-up.html',
title: 'My Popup',
subTitle: 'stuff,
scope: $scope,
buttons: [{
text: 'Cancel',
And then in pop-up.html you can do your usual angular ng-if/ng-hide/ng-disabled/etc stuff like normal. The downside is that those buttons wont show up along the bottom where the ones in the array go, but with some styling work you can make it still look nice.
It should be easy using $scope variables and ng-hide/ng-show
function something_happens(){
$scope.it_happened = true;
}
<button ng-show="it_happened">Qlik Me</button>
The button will only display if $scope.it_happened == true
I'd like it to simply be labeled "Font" as this is more useful to my non technical users. I can't seem to find a way to do this. Using version 4.x
you can change it in the tinymce.min.js file. just search for the text "Font Family" and you will see where you can change it.
You can do this by changing the default value in tinymce.min.js file. Just search for the code part beginning with:
{type:"listbox",text:"Font Family",tooltip:"Font Family",values:i,
...
Then put your desired label (for example "Font") inside the text:"". After change it should be look like :
{type:"listbox",text:"Font",tooltip:"Font Family",values:i,.
Result:
If you want to do this programmatically, for example create a button that will change label on click you can add this code when initializing tinyMCE:
<script type="text/javascript">
tinymce.init({
selector: 'textarea',
toolbar1: 'fontselect fontsizeselect mybutton',
//...
// extra coding can go here
//...
setup: function(editor) {
editor.addButton('mybutton', {
text: 'My button',
icon: false,
onclick: function() {
var fontlabel = "Font";
document.getElementsByTagName("button")[4].firstChild.innerText = fontlabel;
// getElementsByTagName is an array, so the index changes belonging to
// position of your "FontFamily" dropdown. In my example it' 6th.
}
});
}
});
</script>
Before:
After:
In most of my grids, if I want to perform a "custom operation" that displays some data in a jqGrid modal form and allow the users to click "submit" to do something, I am able to simply leverage the existing "Edit" operation and tweak it to my needs.
However, I am working on a grid where the Add, Edit, and Delete operations are all in use, and I need an additional "custom operation" that opens a jqGrid modal form to display a couple of the columns along with a submit button to send the key ID to the target URL.
Normally this is very easy to simply re-task the Edit function, but since Edit is in use, I'm not sure how to do this. Does jqGrid have a proper method for creating new custom operations that display modal forms just like Edit does?
In the end, I was not able to find a way to do this through "core" jqGrid features and ended up simply adding a new button to the grid which opens my own custom modal box.
The multi-select features of jqGrid were also used to allow the user to select multiple records to be passed off to this custom function when the new button is clicked.
Here was the code for adding the button to jqGrid. The AJAX call retrieves the HTML content for the modal that is being populated (in JSON format):
.navButtonAdd('#listAllSupplierPurchasesGridPager', {
caption: "Mark Paid",
buttonicon: "ui-icon-add",
onClickButton: function () {
var s;
s = $("#listAllSupplierPurchasesGrid").jqGrid('getGridParam', 'selarrrow');
if (s.length > 0) {
// Make AJAX call to get the dynamic form content
$.ajax({
cache: false,
async: true,
type: 'POST',
url: "/TargetItems/MarkPurchasesPaidRequest",
data: {
PurchaseIds: JSON.stringify(s)
},
success: function (content) {
// Add the content to the div
$('#MarkPurchasePaidModal').html(content);
// Display the modal
$("#MarkPurchasePaidModal").dialog("open");
},
error: function (res, status, exception) {
alert(status + ": " + exception);
},
modal: true
});
}
},
position: "first"
})
The jQuery for setting up the basic modal box:
$("#MarkPurchasePaidModal").dialog({
autoOpen: false,
width: 768,
autoheight: true,
show: {
effect: "blind",
duration: 250
},
modal: true
});
And the div HTML to hold the modal:
<div id="MarkPurchasePaidModal" role="dialog" title="Mark Purchases Paid" class="container"></div>
My project has a navigation view with tabs at the bottom I want when a specific tab is clicked an action sheet pops up. I tried launching a function when the controller is instantiated but that only launches the action sheet once obviously
I did a few things to make this work - not sure it is the best. First, I removed the href from a tab and the inner nav child:
I also added a ng-click action. My showActionSheet needs to defined in rootScope, not a controller, since it needs to be available no matter what controller is active. So in app.js, I added the sample code for it.
.run(function($ionicPlatform,$rootScope,$ionicActionSheet) {
$rootScope.showActionSheet = function() {
console.log("showAS");
var hideSheet = $ionicActionSheet.show({
buttons: [
{ text: '<b>Share</b> This' },
{ text: 'Move' }
],
destructiveText: 'Delete',
titleText: 'Modify your album',
cancelText: 'Cancel',
cancel: function() {
// add cancel code..
},
buttonClicked: function(index) {
return true;
}
});
};