Skip to content
Find file
Fetching contributors…
Cannot retrieve contributors at this time
267 lines (233 sloc) 9.7 KB
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <!-- Make IE play nice (needs to be first thing inside of head for IE apparently), use chrome frame if available -->
<title>Demos &amp; Examples - Interaction Framework</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- BEGIN IXF ASSETS -->
<link rel="stylesheet" type="text/css" media="all" href="../ixf/styles/screen.css" />
<!--[if IE 7]><link rel="stylesheet" type="text/css" media="screen" href="../ixf/styles/screen-ie.css" /><![endif]-->
<script type="text/javascript" src="../ixf/scripts/jquery.min.js"></script> <!-- Will pull from CDN -->
<script type="text/javascript" src="../ixf/scripts/jquery-ui.min.js"></script> <!-- Will pull from CDN -->
<script type="text/javascript" src="../ixf/scripts/ixf-plugins.js"></script> <!-- MIGHT pull from CDN -->
<script type="text/javascript" src="../ixf/scripts/ixf-utilities.js"></script>
<!-- END IXF ASSETS -->
<link rel="stylesheet" type="text/css" media="screen, projection" href="../css/project.css" />
<link rel="stylesheet" type="text/css" media="screen, projection" href="../css/syntaxHighlighter.css" />
<script type="text/javascript" src="../js/project.js" charset="utf-8"></script>
<script type="text/javascript" src="../js/lib/syntaxHighlighter.js" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
// setup the master/detail functionality. this makes the content from the rows clicked in the west pane load in the center pane
$('.ui-layout-west .ixf-table').masterDetail({
cacheResults:true, // cache things so they don't load multiple times
loadFirst:true, // should we load the first row if there isn't one defined by the url or "slected" class
onloaddetail:function(){
ixf.setup($("#detail"));
if(!$("#examples.grid-100").length && $("#examples").length){
var examples = $("#examples");
examples.addClass("grid-100")
.append('<div class="grid-75"><div class="ixf-container padding-sm margin-bottom-md example-container"></div></div><div class="grid-25 last"><ul class="ixf-list" id="example-list"></ul></div>');
examples.find(".example-container").append(examples.find(".example"))
examples.find(".example h2").each(function(){
$("#example-list").append('<li><a href="#'+$(this).closest(".example").attr("id")+'">'+$(this).text()+'</a></li>');
})
// select separate from click so we can load one up without changing the URL
$("#example-list a").bind("select",function(){
var cur = $(this).attr("href");
// console.debug(cur);
$(this).closest("li").addClass("selected").siblings().removeClass("selected");
$(cur).show().siblings().hide();
// $.bbq.pushState("#examples="+cur,opts.mergeMode);
}).bind("click",function(){
$(this).trigger("select");
var state = {};
// Set the state!
// console.debug($(this),$(this).parent().prevAll());
state[ "example-list" ] = $(this).parent().prevAll().length;
// console.debug(state);
$.bbq.pushState( state );
return false;
});
// console.debug("**"+$.bbq.getState( "example-list"));
if($.bbq.getState( "example-list") === undefined){
// console.debug("nothing in URL, so clicking first one");
$("#example-list a").eq(0).trigger("select");
} else {
$("#example-list a").eq($.bbq.getState( "example-list")).trigger("select");
}
}
}
});
$(window).bind( 'hashchange.exampleList', function(e) {
if($.bbq.getState( "example-list")){
// console.debug($.bbq.getState( "example-list"));
// console.debug($("#example-list a").eq($.bbq.getState( "example-list")));
var toClick = $("#example-list a").eq($.bbq.getState( "example-list"));
if(toClick.length){
// console.debug("clicking");
toClick.click();
}
} else {
$("#example-list a").eq(0).trigger("select");
}
}).trigger( 'hashchange.exampleList' );
});
</script>
</head>
<body class="master-detail">
<a href="#body" class="invisible">Skip to content</a>
<div class="ixf-header" role="navigation">
<div class="ixf-appname">
<a href="#appmenu" class="ixf-appname-link ixf-popup" data-pop-direction="left" title="IxF Layouts">Interaction Framework</a>
</div>
<!-- END ixf-appname -->
<div class="ixf-tools">
<a href="#x" class="ixf-tools-link">No Arrow</a>
<a href="#messages-menu" class="ixf-tools-link menu-arrow ixf-popup ixf-tools-link" data-pop-direction="right" title="6 Messages"><span class="messagecount">6</span> Messages</a>
<a href="#myoptions-menu" class="ixf-tools-link ixf-popup ixf-tools-link menu-arrow" data-pop-direction="right" title="Johanssen Lippincottlestein">Options</a>
</div>
<!-- END ixf-tools -->
<ul class="ixf-nav">
<li class="first"><a href="../index.html"><span>Introduction</span></a></li>
<li class="selected"><a href="../demo/list.html#detail=intro"><span>Demos &amp; Examples</span></a></li>
<li><a href="../layout/index.html"><span>Layouts</span></a></li>
<li class="last"><a href="../documentation/index.html"><span>Documentation</span></a></li>
</ul>
<!-- END ixf-nav -->
</div>
<!-- END ixf-header -->
<div class="ixf-panels">
<div class="ixf-panel ui-layout-west" data-layout-size="187" data-layout-minSize="150">
<table class="ixf-table ixf-fixed master">
<thead>
<tr>
<th><a href="#x">Name</a></th>
</tr>
</thead>
<tbody>
<tr id="intro">
<td><a href="intro.html">Introduction</a></td>
</tr>
<tr id="accordion">
<td><a href="accordion.html">Accordion</a></td>
</tr>
<tr id="autocomplete">
<td><a href="autocomplete.html">Autocomplete</a></td>
</tr>
<tr id="buttons">
<td><a href="buttons.html">Buttons</a></td>
</tr>
<tr id="contentstyles">
<td><a href="content.html">Content Styles</a></td>
</tr>
<tr id="datepicker">
<td><a href="datepicker.html">Date Picker</a></td>
</tr>
<tr id="datepickerdropdown">
<td><a href="datepickerdropdown.html">Date Picker Dropdown</a></td>
</tr>
<tr id="finder">
<td><a href="finder.html">Finder</a></td>
</tr>
<tr id="forms">
<td><a href="forms.html">Forms</a></td>
</tr>
<tr id="grid">
<td><a href="grid.html">Grid</a></td>
</tr>
<tr id="icons">
<td><a href="icons.html">Icons</a></td>
</tr>
<tr id="lists">
<td><a href="lists.html">Lists</a></td>
</tr>
<tr id="masterdetail">
<td><a href="masterdetail.html">Master/Detail</a></td>
</tr>
<tr id="modals">
<td><a href="modals.html">Modals</a></td>
</tr>
<tr id="multiselect">
<td><a href="multiselect.html">MultiSelect</a></td>
</tr>
<tr id="percentages">
<td><a href="percentages.html">Percentages</a></td>
</tr>
<tr id="placeholder">
<td><a href="placeholder.html">Placeholder</a></td>
</tr>
<tr id="popups">
<td><a href="popups.html">Popups</a></td>
</tr>
<tr id="systemfeedback">
<td><a href="feedback.html">System Feedback</a></td>
</tr>
<tr id="tables">
<td><a href="tables.html">Tables</a></td>
</tr>
<tr id="tabs">
<td><a href="tabs.html">Tabs</a></td>
</tr>
<tr id="timepicke">
<td><a href="timepicker.html">Time Picker</a></td>
</tr>
<tr id="widgets">
<td><a href="widgets.html">Widgets</a></td>
</tr>
</tbody>
</table><!-- /ixf-table -->
</div><!-- /ixf-panel -->
<div class="ixf-panel ui-layout-center padding-md" id="detail">
<p>Loading content...</p>
</div>
<!-- /ixf-panel -->
</div>
<!-- END ixf-panels -->
<!-- These menu lists do not need to show state, so they do not need to be in the menu system -->
<div id="myoptions-menu">
<dl class="ixf-form form-h1 smtext margin-sm float-left">
<dt>Text Size</dt>
<dd class="options-vertical">
<fieldset>
<legend class="invisible">Contact Type</legend>
<span class="ixf-option"><input type="radio" value="option1" id="option1" name="font" /> <label for="option1">Small</label></span>
<span class="ixf-option"><input type="radio" value="option2" id="option2" name="font" checked="checked" /> <label for="option2">Medium</label></span>
<span class="ixf-option"><input type="radio" value="option3" id="option3" name="font" /> <label for="option3">Large</label></span>
</fieldset>
</dd>
</dl>
<dl class="ixf-form form-h1 smtext margin-sm float-left">
<dt>Screen</dt>
<dd class="options-vertical">
<fieldset>
<legend class="invisible">Contact Type</legend>
<span class="ixf-option"><input type="radio" value="option4" id="option4" name="screen" checked="checked" /> <label for="option4">Normal</label></span>
<span class="ixf-option"><input type="radio" value="option5" id="option5" name="screen" /> <label for="option5">High Contrast</label></span>
<span class="ixf-option"><input type="radio" value="option6" id="option6" name="screen" /> <label for="option6">Projector</label></span>
</fieldset>
</dd>
</dl>
<hr class="margin-sm" />
<div class="ixf-popup-actions margin-sm">
<a href="#x" class="sprite person prefix right">My Account</a>
<a href="signin.html" class="sprite locked prefix left">Sign Out</a>
</div>
</div>
<div id="appmenu">
<ul class="ixf-list nolinks">
<li class="selected"><a href="../index.html">IxF - Main/Intro</a></li>
<li><a href="../layout/signin.html">IxF Sign In Page</a></li>
<li><a href="../demo/list.html#detail=widgets">IxF Widgets Page</a></li>
<li><a href="../layout/small.html">Small App Layout</a></li>
</ul>
</div>
<div id="messages-menu" class="padding-sm">
<ul>
<li><a href="#d">3 Reconciliation Reports Due</a></li>
<li><a href="#d">2 Minutes Require Approval</a></li>
<li><a href="#d">2 Overdue Expense Report</a></li>
</ul>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.