Skip to content
Find file
Fetching contributors…
Cannot retrieve contributors at this time
112 lines (91 sloc) 4.06 KB
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet/less" type="text/css" href="/less/metro.less" />
<style>
body { width: 800px; margin: 0 auto; }
</style>
<script src="/scripts/less-1.2.1.min.js" type="text/javascript"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/scripts/jquery.metro.js"></script>
</head>
<body>
<h1 class="accent">jqMetro</h1>
<div class="metro-pivot">
<div class="pivot-item">
<h3>about</h3>
<p>You've probably seen or used a tab control in the past - the pivot control is a sexy descendant of the tab control.</p>
<p>This widget, adapted from the <a href="http://naghsheh.info/Pivot/Pivot.htm">jqMetro</a> project, allows developers to make their web content more interactive with a bit of markup and some Javascript</p>
</div>
<div class="pivot-item">
<h3>usage</h3>
<br />
To get started, reference the two JS files
<pre>&lt;script type="text/javascript" src="/ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.2.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="/scripts/jquery.metro.js"&gt;&lt;/script&gt;</pre>
Then define the the DOM for the tabs. The <code>metro-pivot</code> represents the container for the control, and the <code>pivot-item</code> represents each item in the collection.
<pre>&lt;div class="metro-pivot"&gt;
&lt;div class="pivot-item"&gt;
&lt;h3&gt;tab 1&lt;/h3&gt;
&lt;p&gt;content&lt;/p&gt;
&lt;/div&gt;
&lt;div class="pivot-item"&gt;
&lt;h3&gt;tab 2&lt;/h3&gt;
&lt;p&gt;content&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;</pre>
Then add this script to the bottom of the page:
$(function () {
$("div.metro-pivot").metroPivot();
});
And that's it.
</div>
<div class="pivot-item">
<h3>configuration</h3>
<br />
There's many configuration options available - so you don't have to follow the markup style on the previous tab.
<pre>var defaults = {
animationDuration: 350,
headerOpacity: 0.25,
fixedHeaders: false,
headerSelector: function (item) { return item.children("h3").first(); },
itemSelector: function (item) { return item.children(".pivot-item"); },
headerItemTemplate: function () { return $("&lt;span class='header' />"); },
pivotItemTemplate: function () { return $("&lt;div class='pivotItem' />"); },
itemsTemplate: function () { return $("&lt;div class='items' />"); },
headersTemplate: function () { return $("&lt;div class='headers' />"); },
controlInitialized: undefined,
selectedItemChanged: undefined
};
$(function () {
$("div.metro-pivot").metroPivot(defaults);
});
</pre>
</div>
<div class="pivot-item">
<h3>tab3</h3>
<p>
Topping bear claw lemon drops. Cake powder gingerbread. Powder halvah powder danish. Cookie gingerbread muffin wypas cake marzipan dessert. Pastry jelly beans tootsie roll dessert wypas gingerbread pastry candy toffee. Sweet roll cupcake halvah. Gingerbread cotton candy tiramisu muffin carrot cake chocolate sweet roll donut. Applicake toffee halvah toffee dragée toffee candy canes sesame snaps cheesecake. Sweet powder lollipop apple pie candy halvah chupa chups croissant. Jelly beans bear claw soufflé apple pie. Gummies ice cream marzipan tootsie roll wypas carrot cake. Bonbon lemon drops candy gummi bears lemon drops lollipop. Powder caramels jelly.
</p>
</div>
</div>
<script>
var defaults = {
animationDuration: 350,
headerOpacity: 0.25,
fixedHeaders: false,
headerSelector: function (item) { return item.children("h3").first(); },
itemSelector: function (item) { return item.children(".pivot-item"); },
headerItemTemplate: function () { return $("<span class='header' />"); },
pivotItemTemplate: function () { return $("<div class='pivotItem' />"); },
itemsTemplate: function () { return $("<div class='items' />"); },
headersTemplate: function () { return $("<div class='headers' />"); },
controlInitialized: undefined,
selectedItemChanged: undefined
};
$(function () {
$("div.metro-pivot").metroPivot(defaults);
});
</script>
</body>
</html>
Something went wrong with that request. Please try again.