can you please tell me how to change images of button on focus and unfocused in jquery mobile.
I need to change images when it is button is focus and when button is unfocus .so that user identify which button is selected than which is not..?
Thanks
you can use on focus event and on focus you can change css of image or image background
<input id="myButton" type="text" onfocus="
myFunction()">
function myFunction(){
$('#myButton').css('background-image',new image)
}
using this you can change the pic of image. Hope it help
Related
Antd Button
The following code comes from the antd document
import { Button } from 'antd';
ReactDOM.render(
<div>
<Button>Default</Button>
<Button type="dashed">Dashed</Button>
<Button type="danger">Danger</Button>
</div>,
mountNode,
);
Like the default Button, Dashed Button, when you click, you'll have a highlight and border shadow effect.But I want Button to revert to the default state after clicking, rather than clicking elsewhere before it becomes the default state.
This is what happens when I set up the Uploade's click button, which keeps me clicking (highlighted and bordered) when I upload the file successfully or fails, which makes people look a little unusual.Although this detail is acceptable to most people, it still feels a little strange.
I have thought about using the Dragger component of Upload, which can meet my needs on the display. But I want to automatically hide the upload button when the upload content meets the requirements, and Dragger seems to be unsatisfied. So I chose to use the Upload component. After the condition is met, the content in the Upload is made blank, and the hidden effect is achieved. The above situation will occur in the middle of the Button.
I looked at Button's API
and didn't find an action like reset.
Here is my example code. When you click on the Button component, the highlight will not disappear. When you click on the Button upload component, the highlight will not disappear after uploading the file. After clicking on the Dragger component and uploading the file, the highlighting disappears automatically.
Whether there is a good action to reset the Button style.
If you know thank you for answering.Thank you.
You need to customise ant-btn class like so:
.ant-btn:focus {
color: inherit !important;
border: 1px solid rgb(217, 217, 217);
}
Here is the codepen
Can you please tell me how to add focus and unfocused image in jQuery Mobile. I add one button. I need to change images in think? onfocus or at unfocus so that it user can easily identify .Which button is selected or which button is unselected .If i have two button I think I need to check which button is selected or which button is unselected?
Can you please tell how to do this task?
I use like this
<div class="ui-block-c" style="margin-left: 5px;">
Next
</div>
<div class="ui-block-d" style="margin-left: 30px;">
Previous
</div>
You can simple use :hover to animate hover.
Or add a class as shown below for focusin and focusout events;
Using CSS and jQuery;
$("a").focusin(function(){
$(this).addClass("selected");
});
$("a").focusout(function(){
$(this).removeClass("selected");
});
And define a new CSS rule;
.selected {
(add your selected picture as a background or another effect)
}
If you want separate background pictures;
.selected .next_h {
(add your selected picture as a background or another effect)
}
.selected .prev_h {
(add your selected picture as a background or another effect)
}
I am writing a script using jQueryUI's button http://jqueryui.com/dialog/#modal-form.
The button is pretty fancy looking.
Now, when I tried to use jQuery to change the display name of the button:
$('#signin').text("new name");
The Button revert to the original style of the browser, with no padding and etc. I don't know why change of style happens when I just change the display name of the button. Please suggest me a way to fix it.
To change button text use this :
$('#btnId').val('new-text');
I figured out how. I used a span tag around the display name and just change text of that span tag.
In a page i am displaying image,desc,etc fileds.whenever click on that small image need to display large size image and close icon also and need to show the blur of the background screen(for no user interaction in background fileds).whenever click on close icon need to show actual data.
How to achieve this?
One way is to have this on your page:
<Grid Name="datagrid">
// your small image and other fields
</Grid>
<Grid Name="imagegrid" Visibility="Collapsed">
// larger image and a button to "close"
</Grid>
On TAP event of the SMALL picture, change the datagrid visibility to collapsed and imagegrid visibility to visible.
On click event of the close button in imagegrid, change datagrid visibility to visible and imagegrid visibility to collapsed.
The second way to do this is to use another page with just a large picture and a close button. When the user taps on the small picture, navigate to that second page, and when the user taps close or back button, navigate back to the first page with small picture and all the fields.
I have been trying to figure out this problem for a while now and no avail. I have a program I inherited and it uses a a white background image for the buttons. You can change what image you want easily from UI editor. When the user presses down on that button the white background image is switched out for a different image, showing a blue highlight instead. For the life of me I can't find where that is being referenced at. I even tried adding a new button and it is the stock highlight color.
Where is that onPress reference probably at? Or where can I re-reference this new button to have a new onPress image background?
Thank you!
Select the button in Interface Builder. Open the attributes inspector for that button. Under Button you can choose the "State Config". Change that to "Highlighted". Now you can change the Image config for the highlighted state.