1. What is jQuery UI?
It is JavaScript
Library which is collection of jQuery widgets like datepicker, tabs, autocomplete etc. We can also add
effects, interactions (drag, drop, resize) on widgets.
2. What widets are available
in jQuery UI?
·
Accordion
·
Autocomplete
·
Button
·
Datepicker
·
Dialog
·
Menu
·
Progressbar
·
Selectmenu
·
Slider
·
Spinner
·
Tabs
·
Tooltip
3. What are different effects available in jQuery UI
·
Add
Class
·
Color Animation
·
Easing
·
Effect
·
Hide
·
Remove
Class
·
Show
·
Switch
Class
·
Toggle
·
Toggle
Class
4. In which language, JQuery
UI is written?
JavaScript
5. Is JQuery UI opensource?
Yes.
6. What is current stable version of JQuery UI?
1.11.4 / dated 11 March 2015
7. From where we can download the jQuery UI
https://jqueryui.com/
8. Can we download custom widgets from jQuery UI
Yes, We can.
https://jqueryui.com/download/
9. How to add CSS property on last div?
$('div:last').css({backgroundColor: 'green', fontWeight: 'bolder'});
10. What is $.noConflict()?
<script src="https://code.jquery.com/jquery-1.6.2.js"
type="text/javascript"></script>
<script
type="text/javascript">
$.noConflict()
</script>
When we call to $.noConflict(). Old references
of $ are saved during jQuery initialization, noConflict()
simply restores them.
11. Can we use another variable instead of $
in jQuery? If yes, How?
Yes, we can.
var jQ = jQuery.noConflict();
/** Now use jQ instead of $ **/
jQ( "div#pid"
).hide();
12. How to remove close button on the jQuery UI dialog using CSS?
.ui-dialog-titlebar-close {
visibility: hidden;
}
13. How to remove close button on the jQuery UI dialog using JavaScript?
$("#div2").dialog({
closeOnEscape: false,
open: function(event, ui) {
$(".ui-dialog-titlebar-close",
ui.dialog | ui).hide(); }
});
14. How to initialize a dialog without a
title bar?
var dialogOpts=[]
$("#divId").dialog(dialogOpts);
//Remove the
title bar
$(".ui-dialog-titlebar").hide();
15. How to call Hook into dialog close event
in jQuery UI?
$('div#contentId').on('dialogclose', function(event) {
//console.log('closed event called');
});
16. How to Download jQuery UI CSS from Google's CDN?
Uncompressed: http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js
Compressed: http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js
17. How to "Change button text" in JQuery?
jQuery Version < 1.6
$("#elementId").attr('value', 'Save'); //versions older than 1.6
jQuery Version > 1.6
$("#elementId").prop('value',
'Save'); //versions newer than 1.6
18. How can I disable a button in a jQuery ?
$('#divId').attr("disabled", true);
19. How do I keep jQuery
UI Accordion collapsed by default?
$("#divId").accordion({ header:
"h4", collapsible: true, active: false });
20. How to call a dragable
widget?
// Make #draggable draggable
$(function ()
{
$("#draggableDivId").draggable();
});
21. How do I disable a jquery-ui
draggable of widget?
//myObject is widget object.
myObject.draggable( 'disable' );
OR, you can set during the initalization
$("#yourDialogId").dialog({
draggable: false
});
22. How to remove JQuery
UI Autocomplete Helper text?
.ui-helper-hidden-accessible { display:none; }
23. How to set year in DatePicker?
$(".datepickerClass").datepicker({
yearRange: '1950:2013',
changeMonth: true,
changeYear: true,
showButtonPanel: true,
});
24. How to set current Date in Date Picker?
$(".datepickerClass").datepicker('setDate', new Date());
25. How to Change Date Format in jQuery UI
DatePicker?
var date = $('#datepickerDivId').datepicker({ dateFormat: 'dd-mm-yy' }).val();