Model-View-Controller, or MVC for short, is an software architecture pattern for user interfaces that creates a distinction between the display (or view), the data (or model), and the interaction (or controller). In this article, I’m going to focus specifically on how MVC applies to the client side of web applications. What I mean is that MVC in a web based ui translates to
This separation of concerns means that as long as the model stays consistent, you can
For a great example of 1 checkout css Zen Garden. Here, the same HTML (the model) can be seen with many different views.
Now checkout the jquery ui demos for a clear example of both 1 and 2. Again, the same HTML has many different views with the various CSS themes, and you can also see jquery ui controller code in action. The Javascript manipulates the model, affecting what you see and how you see it, independently of which theme (or view) you choose.
What this all means is that you can create semantically correct HTML optimized for search engines, CSS so your page looks good for humans, and Javascript to make your page interactive. In other words, content can be separated from presentation, which can be separated from the interaction behavior. The CSS and Javascript can be developed (mostly) independently and only be loosely coupled to the HTML.
Taking this a step further, it’s possible to create generic views and controllers using CSS and Javascript that work on a small generic model. jquery ThickBox is an example of this, since it can be used on any page where you have <a class='thickbox' ...>...</a>. As long as your HTML supports the generic model, you can reuse the CSS and Javascript across multiple pages.
It’s possible to combine jQuery UI elements with each other. For example, you can create tabs that contain accordions. And then you can make those tabs sortable. Of course, your html has to fit the expected pattern.
The accordion html is generally a <div> with pairs of child elements. The first element of the pair is the header and the second is the content. I usually use heading elements like <h3> for the headers because otherwise the accordions won’t stack nicely. If you’re not sure what I’m talking about, try making an accordion using just <a> tags for the headers.
<div>
<h3><a href='#'>Section1</a></h3>
<div><p>section 1 content</p></div>
<h3><a href='#'>Section2</a></h3>
<div><p>section 2 content</p></div>
<h3><a href='#'>Section3</a></h3>
<div><p>section 3 content</p></div>
</div>
The tabs html is generally a <div> with a <ul> containg a <li> for each tab header, followed by one content <div> for each tab. Each tab <li> should contain an <a> whose href refers to a content <div>.
<div>
<ul>
<li><a href='#tab1'>Tab 1</a></li>
<li><a href='#tab2'>Tab 2</a></li>
<li><a href='#tab3'>Tab 3</a></li>
</ul>
<div id='tab1'>tab1 content</div>
<div id='tab2'>tab2 content</div>
<div id='tab3'>tab3 content</div>
</div>
The sortable html is generally a simple list of elements.
<ul>
<li><a href='#'>Item 1</a></li>
<li><a href='#'>Item 2</a></li>
<li><a href='#'>Item 3</a></li>
</ul>
As you can see, the tabs html looks very similar to the sortable html, while the accordion html is quite different. The result is that it’s a bit tricky to create sortable accordions, but fairly easy to create sortable tabs. You can also combine tabs with accordions, and below I demonstrate how to put accordions within sortable tabs. For a working demo, checkout Sortable Tabs with Accordions. As for the question of why anyone would want to do this, I’ll leave that as an exercise for the reader 🙂
<html><head>
<link rel="stylesheet" type="text/css" href="smoothness.css"; />
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#tabs').tabs();
$('#sortable').sortable({
items: 'li'
});
$('.accordion').accordion({
autoHeight: false,
clearStyle: true,
header: 'h3'
});
});
</script>
</head>
<body>
<div id='tabs'>
<ul id='sortable'>
<li><a href='#tab1'>Tab 1</a></li>
<li><a href='#tab2'>Tab 2</a></li>
<li><a href='#tab3'>Tab 3</a></li>
</ul>
<div id='tab1'>
<div class='accordion'>
<h3><a href='#'>Section1</a></h3>
<div><p>section 1 content</p></div>
<h3><a href='#'>Section2</a></h3>
<div><p>section 2 content</p></div>
<h3><a href='#'>Section3</a></h3>
<div><p>section 3 content</p></div>
</div>
</div>
<div id='tab2'>
<div class='accordion'>
<h3><a href='#'>Section4</a></h3>
<div><p>section 4 content</p></div>
<h3><a href='#'>Section5</a></h3>
<div><p>section 5 content</p></div>
<h3><a href='#'>Section6</a></h3>
<div><p>section 6 content</p></div>
</div>
</div>
<div id='tab3'>
<div class='accordion'>
<h3><a href='#'>Section7</a></h3>
<div><p>section 7 content</p></div>
<h3><a href='#'>Section8</a></h3>
<div><p>section 8 content</p></div>
<h3><a href='#'>Section9</a></h3>
<div><p>section 9 content</p></div>
</div>
</div>
</div>
</body></html>