Is it possible to create a jQueryUI Button with a custom icon, ie: an icon that is not part of the sprite icons that are provided with jQueryUI???
I am using the ButtonSet functionality for a group of 3 checkboxes but need a more stylised icon than what is provided out of the box...
Worked it out with a CSS hack.
Setup the button as per normal and give the primary icon the "Error" class defined below
.Error
{
background-image: url('Images/Icons/16/Error.png') !important;
}
The !important overrides the ui-icon definition for background-image.
I took this approach for one of my buttons and I discovered some interesting things:
I didn't need to use the "!important" override
I needed to set background-position for my button (otherwise I think the background was being displayed well outside the button)
It looks like you can also put anything you like in the jQueryUI primary icon name - it just needs something as a placeholder.
For my uses I ended up with:
Javascript:
jQuery(function() {
jQuery('#share-button').button({
icons: { primary: "icons/share" }
});
});
CSS:
#share-button > span.ui-icon {
background-image: url(icons/share.png);
background-position:0px 3px;}
HTML:
<button id='share-button'>Share</button>
Related
I have two components that using mat menu. I just want to add some extra styling for one mat menu in one component. I have used this css inside the component css
::ng-deep.mat-menu-panel
{
position: fixed !important;
right : 2%;
}
Now the issue is the css is applying to the other component mat menu also.
How can i resolve this?
Add your panel styling to your global style sheet:
.fixed-menu-panel
{
position: fixed !important;
right : 2%;
}
Add the panel style to the mat-menu:
<mat-menu class="fixed-menu-panel">
StackBlitz: https://stackblitz.com/edit/angular-9bheaf?file=index.html
The challenge is that the menu is rendered in an overlay container attached to the parent document and not the button itself... with this in mind, you will need to think about how to grab a reference to that mat-menu-panel and append a class to it to make it unique on menu open.
For example, you could do something like the following to accomplish this.
Create a component method that will receive the templateRef as an argument. It will get the mat-menu-panel using Renderer2 and append a class to it of styled
styleMenu(el) {
const menuPanel = this.ren.parentNode(this.ren.parentNode(el.items.first['_elementRef'].nativeElement));
this.ren.addClass(menuPanel, 'styled')
}
Then in your view, use the (menuOpened) event emitter to call the styleMenu method when the menu opens, and pass the #styledMenu templateRef as an argument.
<button mat-button [matMenuTriggerFor]="styledMenu" (menuOpened)="styleMenu(styledMenu)">styled</button>
<mat-menu #styledMenu="matMenu">
Then your CSS will look like this
::ng-deep .mat-menu-panel.styled
{
position: fixed !important;
right : 2%;
}
This is one approach, you could also roll all of this into a directive and then just apply the directive selector where you need it.
Stackblitz
https://stackblitz.com/edit/angular-5nixtl?embed=1&file=app/menu-overview-example.ts
I have a link button with jQuery mobile.
I want to be able to set it to be constantly pressed or unpressed.
I tried this code for pressed:
$(this).css('background-color', '#e0e0e0');
and this code for unpressed:
$(this).css('background-color', '#f6f6f6');
But when hovering over the unpressed button it does not highlight anymore.
So I tried:
$(this).addClass('ui-button-active');
But the button gets a blue color and I want dark gray color.
Any suggestions?
In jQuery Mobile 1.4.2 CSS you can see that there are button styles for normal/hover/active states (for each theme), and an active style that changes the color of the button (to blue, in your case).
To simulate a "constantly pressed" button you have to add a class for each theme (a and b) based on the button :active class, and override background color:
.button-pressed-a { background-color: #e8e8e8 !important; }
.button-pressed-b { background-color: #404040 !important; }
Then, in your script, you can toggle the "pressed" state with:
$("#button").toggleClass('button-pressed-a');
Have you been to themeroller? There you can try out different styles.
Adding a Custom Theme
Another good way to customize a jQuery Mobile button is adding a custom theme.
<a data-role="button" data-theme="my-site">Button</a>
That will give you more control over the different elements and states of the button. For instance, you can target different states of the button in CSS by writing the code for the class associated with your custom theme name (they are automatically added to the button):
.ui-btn-up-my-site { /* your code here */ }
.ui-btn-hover-my-site { /* your code here */ }
.ui-btn-down-my-site { /* your code here */ }
Keep in mind that the default buttons are made out of borders, shadows, and of course the background gradient. In addition to this, there are other HTML elements inside the button that are automatically generated by the framework. Depending on what exactly you want to customize you might need to target other classes within the button (i.e. ui-icon, ui-btn-text, ui-btn-inner, etc).
Otherwise I could recommend you this site
http://appcropolis.com/blog/advanced-customization-jquery-mobile-buttons/
I have buttons in my web app using jQuery Mobile.
When clicked the buttons have the ui-focus class added which displays a blue halo around buttons. The class stays there until another spot on the page is clicked. This happens in firefox, not iPad. I would like that this halo is not displayed.
What must I do for that focus halo not to be displayed at all ?
You can override the default css instead of hacking up the source. Just make sure your css file is after the JQM one.
.ui-focus,
.ui-btn:focus {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none ;
}
I have found that the best way to do this is to give focus back to the page after your buttons are clicked.
$('yourButtons').click(function(){
//Do some important stuff
// ....
$.mobile.activePage.focus();
});
Well thats easy, just open your xxx-mobile-theme.css file and find the class ui-focus
and remove the box-shadow property manually
None of the solutions worked for me as I had a custom submit button and used data-role="none" on the button. The :focus event still had the blue glow so this worked for me. I wrapped my form in a div called myform.
.myform button:focus {
outline: 0;
}
How do I change the <a data-role="button"> button's background to my image? Also how can I add my custom icons on top of a button at left side?
Give the link a class and use CSS to change the background image.
<a data-role="button" class="my-button">
...
.my-button {
background-image: url('images/my-button.png') !important;
}
I would say that the recommended way to customize a jQuery Mobile button is adding a custom theme.
<a data-role="button" data-theme="my-site">Button</a>
That will give you more control over the different elements and states of the button. For instance, you can target different states of the button in CSS by writing the code for the class associated with your custom theme name (they are automatically added to the button):
.ui-btn-up-my-site { /* your code here */ }
.ui-btn-hover-my-site { /* your code here */ }
.ui-btn-down-my-site { /* your code here */ }
Keep in mind that the default buttons are made out of borders, shadows, and of course the background gradient. There also additional HTML elements inside the button that are automatically generated by the framework. Depending on what exactly you want to customize you might need to target other classes within the button (ui-icon, ui-btn-text, ui-btn-inner, etc).
Here is a tutorial that explains how to do advanced customization of the jQuery Mobile buttons. The articles shows how to do some basic customization, how to reset the jQuery Mobile theme, and how to turn the default button into anything you want:
http://appcropolis.com/blog/advanced-customization-jquery-mobile-buttons/
I'm using the Accordion widget from jQuery UI.
Whenever I click a header to expand a section, that header (actually, the link inside the h3 element) is highlighted. In Chrome it has a blue highlight as if it were the currently selected field in a form.
I need to get rid of the blue highlight, so I hacked together the code below, and it seems to work so far.
However, I'm wondering if there's a better/cleaner way to do this in jQuery. Is this right??
$(function() {
$( "#mainnav" ).accordion().blur($('#mainnav'));
});
I didn't need jQuery to fix the problem after all (.blur() didn't seem to work).
jQuery was adding a class = "ui-state-focus" to the html, so I used CSS to indicate that this class shouldn't be outlined/highlighted, like so...
#mainnav .ui-state-focus {
outline: none;
}
For me works this for JQuery UI 1.9.2, Tabs widget:
#mainnav .ui-tabs-anchor {
outline: none;
}