By Carmel Shvartzman
In this tutorial we'll learn how to create an MVC site using JQuery UI Widgets and Themes in 10 minutes. jQuery UI is a set of user interface widgets, interactions, and themes built on top of the jQuery JavaScript Library.
We'll want to create an outstanding MVC site using jQuery Themes and Widgets , showing as follows:
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 Accordion widget to the Index View. Create a new View:
To get the code of the Accordion , browse to the Development tab at JQUERYUI site, and select Accordion:
Then go to the source:
Notice that all the scripts the Accordion needs are jquery-{version}.js , jquery-ui-{version}.js , and jquery-ui.css stylesheet:
Copy the <script> contents:
Paste the <script> inside our Index file:
Copy the Accordion markup:
And paste it somewhere inside our Index file:
Run the application to see the Accordion:
Now we'll add the Tabs widget. Browse to the Tabs in the JQueryUI site:
Copy the <script> contents and the markup:
Paste the <script> and the markup inside the Index file:
If you wish, place the Accordion inside one of the Tabs:
Next, we'll add a Sortable widget:
This time we have <script>, <style> and markup to copy-paste:
Paste the script in the Index file:
Place the <style> in the Index file:
And place the Sortable in some Tab:
Refresh the browser to see the widgets in action: this is the Tabs with the Accordion inside:
And this is the Sortable widget:
You can drag and drop and sort the widget:
Finally, we'll add the Portlets widget:
Copy all the <script>:
And the markup:
And paste it inside the Index file:
Refresh again the web page to see the Portlets in action:
You can reorder them:
And this is the final cut of our app with all widgets in action:
Happy programming.....
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 Accordion widget to the Index View. Create a new View:
To get the code of the Accordion , browse to the Development tab at JQUERYUI site, and select Accordion:
Then go to the source:
Notice that all the scripts the Accordion needs are jquery-{version}.js , jquery-ui-{version}.js , and jquery-ui.css stylesheet:
Copy the <script> contents:
Paste the <script> inside our Index file:
Copy the Accordion markup:
And paste it somewhere inside our Index file:
Run the application to see the Accordion:
Now we'll add the Tabs widget. Browse to the Tabs in the JQueryUI site:
Copy the <script> contents and the markup:
Paste the <script> and the markup inside the Index file:
If you wish, place the Accordion inside one of the Tabs:
Next, we'll add a Sortable widget:
This time we have <script>, <style> and markup to copy-paste:
Paste the script in the Index file:
Place the <style> in the Index file:
And place the Sortable in some Tab:
Refresh the browser to see the widgets in action: this is the Tabs with the Accordion inside:
And this is the Sortable widget:
You can drag and drop and sort the widget:
Finally, we'll add the Portlets widget:
Copy all the <script>:
And the markup:
And paste it inside the Index file:
Refresh again the web page to see the Portlets in action:
You can reorder them:
And this is the final cut of our app with all widgets in action:
That's all!!
In this tutorial we've learn how to create an MVC site using JQuery UI Widgets and Themes in 10 minutes. Happy programming.....
כתב: כרמל שוורצמן
No comments:
Post a Comment