Top 23 Jqueryui Interview Questions You Must Prepare 27.Jul.2024

$('div#contentId').on('dialogclose', function(event)
{
     //console.log('closed event called');
 }
);

Yes, we can.
var jQ = jQuery.noConflict();
/** Now use jQ instead of $ **/
jQ( "div#pid" ).hide();

$(".datepickerClass").datepicker(
{
    yearRange: '1950:2013', 
   changeMonth: true,
   changeYear: true,
   showButtonPanel: true, 
}
);

1.11.4 / dated 11 March 2015

.ui-helper-hidden-accessible { display:none; }

//myObject is widget object.
myObject.draggable( 'disable' );

OR, you can set during the initalization 
$("#yourDialogId").dialog({
    draggable: false
});

JavaScript

// Make #draggable draggable
$(function ()
{
        $("#draggableDivId").draggable();
}
);

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

$('#divId').attr("disabled", true);

var date = $('#datepickerDivId').datepicker
(
{ dateFormat: 'dd-mm-yy'
}
).
val();

$('div:last').css({backgroundColor: 'green', fontWeight: 'bolder'});

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

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.

$(".datepickerClass").datepicker('setDate', new Date());

1. Accordion
2. Autocomplete
3. Button
4. Datepicker
5. Dialog
6. Menu
7. Progressbar
8. Selectmenu
9. Slider
10. Spinner
11. Tabs
12. Tooltip

<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.

$("#div2").dialog(
{
   closeOnEscape: false,
   open: function(event, ui)
{
$(".ui-dialog-titlebar-close", ui.dialog | ui).hide();
}
}
);

.ui-dialog-titlebar-close
{
  visibility: hidden;
}

Yes.

1. Add Class
2. Color Animation
3. Easing
4. Effect
5. Hide
6. Remove Class
7. Show
8. Switch Class
9. Toggle
10. Toggle Class

$("#divId").accordion
(
{
header: "h4", collapsible: true, active: false
}
);

var dialogOpts=[]
$("#divId").dialog(dialogOpts);
//Remove the title bar
$(".ui-dialog-titlebar").hide();