I am looking to test Widgets -> Dialog -> Modal Confirmation.
jquery-ui.js is heavy to load just for a specific use. From JQ UI site I downloaded a folder containing lots of small .js files
I guess they are part of the main js. I've tested to only load jquery.ui.widget.js and jquery.ui.dialog.js but I get this console error:
Uncaught TypeError: Object function ( selector, context ) { // The jQuery object is actually just the init constructor 'enhanced' return new jQuery.fn.init( selector, context, rootjQuery ); } has no method 'widget'
Next codes are copy of the jQ UI sample from http://jqueryui.com/dialog/#modal-confirmation
Sample displays and works as expected loading the heavy query-ui.js file only
src="/js/jquery.ui.dialog.js"
src="/js/jquery.ui.widget.js"
$(function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
width:350,
modal: true,
buttons: {
"Accept": function() {
$( this ).dialog( "close" );
},
"Refuse": function() {
$( this ).dialog( "close" );
}
}
});
});
HTML
<div id="dialog-confirm" title="Confirmation">
<p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>Select your option</p>
</div>
If you just want to use and download the files which are necessary for the dialog
widget visit the jQuery UI Download Builder
Uncheck the "Toggle all" checkbox and only check Widgets -> Dialog. Each other file which is necessary gets checked automatically. The according link is this one. Note that you can change the CSS
configuration at the bottom of the page above the download button.
The downloaded .zip
should contain 3 folders
js
development-bundle
css
The important one is the js
folder which includes a jQuery version (no UI without jQuery) and your customized jQuery UI .js
files. One in readable form, one minified.
If you open the jquery-ui-1.10.3.custom.js
file you can see what it includes. In your case this should be:
jquery.ui.core.js, jquery.ui.widget.js, jquery.ui.mouse.js, jquery.ui.position.js, jquery.ui.draggable.js, jquery.ui.resizable.js, jquery.ui.button.js, jquery.ui.dialog.js
I hope I got your question right and this is what you want.