Adding A New jQuery Theme To MVC3
Today we will add a new jQuery theme to a new MVC3 project. I know I am still new to this, but I felt this one needed its own posting.
The first thing you need to do is obtain a jQuery theme. You don’t have to make a custom one, but if you do the same procedure applies. So head over to jQuery UI ThemeRoller and get yourself a theme. For me, I am going to get Eggplant. At the time of this writing the version I am downloading is 1.8.20. Also to keep things easy I am just pulling down the whole thing.
Downloading Eggplant version 1.8.20
The file downloaded for me was named jquery-ui-1.8.20.custom.zip. When you extract it you will find three folders and an index.html file. That index.html file is just a demo of the theme you pulled down.
Contents of the extracted folder.
Now create your new empty MVC3 project. Just like in my previous post, Just Starting, MVC3 and jQuery UI, you will want to update your packages. I will update my previous post, but I noticed on my personal machine I had to use “Manage NuGet Packages”. You will want to update everything that says jQuery and the Modernizr, I’ll include a snip of that too.
Mange NuGet Packages
Update all jQuery packages and the Modernizr.
Next we need to add our files to our project. First and easiest is the CSS for the theme. In one window browse to your project’s Content/themes folder. In another window browse to your extracted theme’s css folder. Inside that css folder you will see a folder, in my case it is named eggplant. I am just going to copy that folder (eggplant) into my project’s themes folder.
Copy the folder inside the extracted folder’s css folder into your project’s themes folder.
Inside my eggplant folder is a folder called images and a file named “jquery-ui-1.8.20.custom.css”. Which is sort of what you would expect in a theme. Now we only have two more files to copy over, some javascript files. In one window go to your project’s Scripts folder, in the other go to the js folder inside your extracted folder. Inside that js folder you will see two javascript files, copy them over to your Scripts folder. You may be prompted to replace a file, go ahead and let it overwrite it. In my case the two files I copied were jquery-1.7.2.min.js (this one prompted to overwrite), and jquery-ui-1.8.20.custom.min.js.
That is it for copying the files, now we need to add them to the project. In Visual Studio you will want to click on Show All Files in the Solution Explorer. This will reveal files and folders in the project’s folder that are not included in the project. We want to include the theme we copied over (for me that is eggplant), and the script that did not prompt for an overwrite (for me that was jquery-ui-1.8.20.custom.min.js). Simply right click on them and select Include In Project. When you have that done you can click on Show All Files again to hide the stuff that is not part of the project.
Show all files is located in the Solution Explorer.
Files and folders not in the project appear white.
Now the easy part, we will create an empty controller named Home, and from that controller a view named Index. Of course we need to modify our project’s Views/Shared/_Layout.cshtml.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/themes/eggplant/jquery-ui-1.8.20.custom.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.7.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.20.custom.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/modernizr-2.5.3.min.js")" type="text/javascript"></script>
</head>
<body>
@RenderBody()
</body>
</html>
Here is the HTML for our Views/Home/Index.cshtml.
@{
ViewBag.Title = "Index";
}
<script type="text/javascript">
$(document).ready(function() {
$("#divTabs").tabs();
$("#date").datepicker({ showButtonPanel: true });
$("#btnTest").button();
});
</script>
<style type="text/css">
.ui-datepicker { font-size:8pt !important}
.ui-button { font-size:10pt !important}
.ui-tabs { font-size:10pt !important}
</style>
<h2>Index</h2>
<div id="divTabs" style="width: 400px;">
<ul>
<li><a href="#tabTest">Test 1</a></li>
<li><a href="#tabTest2">Test 2</a></li>
<li><a href="#tabTest3">Test 3</a></li>
</ul>
<div id="tabTest">
<input id="date" style="width: 100px;" />
<br />
<input type="button" id="btnTest" value="A Testbutton" />
</div>
<div id="tabTest2">
This is the second tab.
</div>
<div id="tabTest3">
<p>This is the third tab.</p>
</div>
</div>
And finally here is what it looks like.
Posted on May 11, 2012, in jQuery, Learning, MVC and tagged jQuery, MVC. Bookmark the permalink. 1 Comment.
Thank you…. you saved me a lot of time searching on the web