By Carmel Shvartzman
In this tutorial we'll learn how to create a Modal JQuery UI Dialog widget in 10 minutes. The jQuery UI is a set of user interface widgets, interactions, and themes built on top of the jQuery JavaScript Library.
We'll want to add to our MVC site a Modal jQuery Dialog , showing as follows:
For the sake of using JQuery UI Widgets, like Accordion, Tabs, Portlets, Dialogs, and so on, we'll need to import a JQuery UI Theme, the jquery-ui.js and jquery-ui.css files. (and of course you'll need also a reference to the basic jquery.js file).
The present section is a sub-tutorial about importing the JQuery UI to our app: you can delay it if you already have done it, or you can see the complete step by step in a former tutorial.
This is the BEGIN of the sub-tutorial section: -----------------------------------------------------
---------------------------------------------------------------------------------------------------
First of all, we need to download the Theme from the JQuery UI site, so browse to the site and go to the "Themes" tab:
Select from the "Gallery" the theme you like the most, and download it. I choose the "Le-Frog":
After you download it, extract all from the .ZIP file :
We'll use some of these files. But first , we need to update the javascript jQuery files in our project, because the files which comes with Visual Studio will be obsolete. Open the NuGet utility:
Make a search for the JQuery package and install it:
Do the same for the JQuery UI package:
Now open the Theme's folder we downloaded and copy the entire theme which is inside the "development-bundle" folder:
Paste the folder inside the "themes" folder inside your project:
It will show as follows:
We'll make use of the .CSS file jquery-ui.css. Open the BundleConfig file:
Take a look at these ScriptBundles, because we'll use them inside our app:
Replace the "base" folder by the "le-frog" folder, and add the jquery-ui.css file to the script:
Next, we'll call the bundles from the _Layout file:
Locate the Render "jquery" section and cut it:
Locate the render at the <head> section:
Paste there the "jquery" section , and add the "jqueryui" bundle:
We're done with the javascript and the style we'll need.
Now we'll add the Dialog widget to the Index View. Create a new View:
This is the END of the sub-tutorial section --------------------------------------------------------
---------------------------------------------------------------------------------------------------
To get the code of the Dialog, browse to the "Development" tab at the JQUERY UI site, and select the "Dialog" Widget, and the "Animation" example:
Then go to the "View source", because we'll customize the STYLE, SCRIPT and DIV sections of the Widget to make our own Dialog:
Copy the <SCRIPT> tag from the JQuery UI site:
Put an <script> tag inside your Index file, and customize the Dialog with the following code:
Here we have the following code:
1) "modal" = true: to make MODAL the Dialog;
2) "buttons" : when the button is pressed, will close the Dialog;
3) a #btnOpenDialog : when the "Open..." button is clicked, show the Dialog using the dialog("open ") function;
Copy the Dialog <div> markup:
And paste it somewhere inside our Index file, with the following customization:
Also, add a button to open the dialog from the Client side:
Last but not least, we need to customize the style of the button:
Finally, let's run the application to see the Dialog in action. The Button when clicked will open the Dialog:
The Dialog remains opened in a Modal way:
...and when closed it "explodes" :
If you don't want the Dialog to be Modal, just write "modal = false" in the script:
Happy programming.....
For the sake of using JQuery UI Widgets, like Accordion, Tabs, Portlets, Dialogs, and so on, we'll need to import a JQuery UI Theme, the jquery-ui.js and jquery-ui.css files. (and of course you'll need also a reference to the basic jquery.js file).
The present section is a sub-tutorial about importing the JQuery UI to our app: you can delay it if you already have done it, or you can see the complete step by step in a former tutorial.
This is the BEGIN of the sub-tutorial section: -----------------------------------------------------
---------------------------------------------------------------------------------------------------
First of all, we need to download the Theme from the JQuery UI site, so browse to the site and go to the "Themes" tab:
Select from the "Gallery" the theme you like the most, and download it. I choose the "Le-Frog":
After you download it, extract all from the .ZIP file :
We'll use some of these files. But first , we need to update the javascript jQuery files in our project, because the files which comes with Visual Studio will be obsolete. Open the NuGet utility:
Make a search for the JQuery package and install it:
Do the same for the JQuery UI package:
Now open the Theme's folder we downloaded and copy the entire theme which is inside the "development-bundle" folder:
Paste the folder inside the "themes" folder inside your project:
It will show as follows:
We'll make use of the .CSS file jquery-ui.css. Open the BundleConfig file:
Take a look at these ScriptBundles, because we'll use them inside our app:
Replace the "base" folder by the "le-frog" folder, and add the jquery-ui.css file to the script:
Next, we'll call the bundles from the _Layout file:
Locate the Render "jquery" section and cut it:
Locate the render at the <head> section:
Paste there the "jquery" section , and add the "jqueryui" bundle:
We're done with the javascript and the style we'll need.
Now we'll add the Dialog widget to the Index View. Create a new View:
This is the END of the sub-tutorial section --------------------------------------------------------
---------------------------------------------------------------------------------------------------
To get the code of the Dialog, browse to the "Development" tab at the JQUERY UI site, and select the "Dialog" Widget, and the "Animation" example:
Then go to the "View source", because we'll customize the STYLE, SCRIPT and DIV sections of the Widget to make our own Dialog:
Copy the <SCRIPT> tag from the JQuery UI site:
Put an <script> tag inside your Index file, and customize the Dialog with the following code:
Here we have the following code:
1) "modal" = true: to make MODAL the Dialog;
2) "buttons" : when the button is pressed, will close the Dialog;
3) a #btnOpenDialog : when the "Open..." button is clicked, show the Dialog using the dialog("open ") function;
<script>
$(function () {
$("#btnOpenDialog").click(function () {
$("#dialog-message").dialog("open");
});
$("#dialog-message").dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
},
modal: true,
buttons: {
Ok: function () {
$(this).dialog("close");
}
}
});
});
</script>
Copy the Dialog <div> markup:
And paste it somewhere inside our Index file, with the following customization:
<div id="dialog-message" title="Settings for the Modal Dialog">
<p>
<span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 50px 0;"></span>
"autoOpen" must be set to "false"
<br />
"modal" must be set to "true"
</p>
<p>
<span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 50px 0;"></span>
To modify the Show and the Hide effects :
<br />
<cite>show: {
effect: "blind",
duration: 1000
}<br />
hide: {
effect: "explode",
duration: 1000
}
</cite>
</p>
</div>
<a id="btnOpenDialog" href="#" class="ui-state-default ui-corner-all">
Open the Modal Dialog
</a>
Last but not least, we need to customize the style of the button:
<style>
#btnOpenDialog {
position: fixed;
left: 50%;
width: 150px;
margin-left: -75px;
padding: 5px 5px;
text-decoration: none;
font: 900 12px georgia;
color: #FFF;
}
</style>
Finally, let's run the application to see the Dialog in action. The Button when clicked will open the Dialog:
The Dialog remains opened in a Modal way:
...and when closed it "explodes" :
If you don't want the Dialog to be Modal, just write "modal = false" in the script:
That's all!!
In this tutorial we've learn how to create a Modal JQuery UI Dialog widget in 10 minutes. Happy programming.....
כתב: כרמל שוורצמן
No comments:
Post a Comment