FN01 Finder Interface

Include:

Developer EOL

v0 Default Page
- x1 Default Page w/ titled menus & form submit
- x2 Default Page w/ titled goto menus & link button
v1 Returned Results
- x1 Returned Results sans Menus

Definition

Outer container for a finder interface for sorting and searching product or service results.

Usage

Used as the container for both the fn02 and fn03 components. This component must be proceeded by a pn01 or a d07 and can be optionally followed with a d07v9 that contains more content such has several l02 components inside pc01 components to create a white container for each l02.

This component makes use of javascipt "hijax" to hijack links to normal pages and extract only the needed content to refresh the contents of this component. This method allows for a complete experience for non-javascript users while providing a less jarring experience for users with javascript. In order to decrease backend file transfer sizes the hijaxTrue class can be added to the productFinder DIV (<div id="productFinder" class="hijaxTrue">). This will append "?hijax=true" to any hijacked link's URL which will allow the backend to deliver a page devoid of unneeded HTML such as masthead and footers.

NOTE:Contact the web design team before using this component.

Show all Templates

All Templates Referencing this Component

Availability Finder view tagged view untagged

Used when a default page with no listing is needed. This component should be followed by a d07v9 with more content so that tha page does not appear to sparse.

What are you looking for today?

Use the criteria below to find [cat] that meets your needs.

Select a Category

Storage

No Templates Reference this

v0 x1 Default Page w/ titled menus & form submit

Sample
Code
Templates (0)

Used when a default page uses a form with several select options that are itentified with a title.

What are you looking for today?

Use the criteria below to find [cat] that meets your needs.

Copy the code below and paste into your text editor.

<div id="productFinder">
<div class="fn1 fn1v0">
	<div class="fn1w1"><div class="fn1w2"><div class="fn1w3">
		<div class="fn1w4">

<h2>What are you looking for today?</h2>

<p>Use the criteria below to find [cat] that meets your needs.</p>

<div class="fn1w5">
			<label for="input1">Operating System</label>
			<select name="input1" id="input1">
				<option value="foo">All</option>
				<option value="foo1">Foo 1</option>
				<option value="foo2">Foo 2</option>
				<option value="foo3">Foo 3</option>
				<option value="foo4">Foo 4</option>
				<option value="">----------------------------------------------</option>
				<option value="foo5">Foo 5</option>
				<option value="foo6">Foo 6</option>
				<option value="foo7">Foo 7</option>
				<option value="foo8">Foo 8</option>
			</select>
			</div>

<div class="fn1w5">
			<label for="input2">Processor</label>
			<select name="input2" id="input2">
				<option value="foo">All</option>
				<option value="foo1">Foo 1</option>
				<option value="foo2">Foo 2</option>
				<option value="foo3">Foo 3</option>
				<option value="">----------------------------------------------</option>
				<option value="foo4">Foo 4</option>
				<option value="foo5">Foo 5</option>
				<option value="foo6">Foo 6</option>
				<option value="foo7">Foo 7</option>
				<option value="foo8">Foo 8</option>
			</select>
			</div>

<div class="fn1w5">
			<label for="input3">Category</label>
			<select name="input3" id="input3">
				<option value="foo">All</option>
				<option value="foo1">Foo 1</option>
				<option value="foo2">Foo 2</option>
				<option value="">----------------------------------------------</option>
				<option value="foo3">Foo 3</option>
				<option value="foo4">Foo 4</option>
				<option value="foo5">Foo 5</option>
				<option value="foo6">Foo 6</option>
				<option value="foo7">Foo 7</option>
				<option value="foo8">Foo 8</option>
			</select>
			</div>
			<div class="fn1w6">
				<input type="submit" class="hotbutton" value="Find" />
			</div>
			</form>
		</div>
	</div></div></div>
</div>
</div>

No Templates Reference this

v0 x2 Default Page w/ titled goto menus & link button

Sample
Code
Templates (0)

Used when a default page uses a form with several select options that are itentified with a title.

Link to this page

What are you looking for today?

Use the criteria below to find [cat] that meets your needs.

Operating System

Processor

No Templates Reference this

v1 Returned Results

Sample
Code
Templates (1)

This variation shows the returned results container, this may or may not contain more menus for futher result filtering.

There are four instertion points in this component for various sub components. The first and last instertion points are for the g08 pagination component and the second and third instertion points are for the fn02 and fn03 respectively.

Link to this page

What are you looking for today?

Use the criteria below to find [cat] that meets your needs.

Select a Category

Select a Sub-Category

insert content here

Copy the code below and paste into your text editor.

<div id="productFinder">
<div class="fn1 fn1v1">
	<div class="fn1w1"><div class="fn1w2"><div class="fn1w3">
		<div class="fn1w4">
		<a href="#" id="linkToPage"><span>Link to this page</span></a>

<h2>What are you looking for today?</h2>
			<p>Use the criteria below to find [cat] that meets your needs.</p>

<h3 class="listTitle">Select a Category</h3>
			<ul class="goto hijax-productFinder">
				<li class="selected"><a href="phase1_results1.html">Storage</a></li>

<li><a href="phase1_results1.html">Storage</a></li>
				<li><a href="phase1_results1.html">Storage</a></li>
			</ul>

<h3 class="listTitle">Select a Sub-Category</h3>
			<ul class="goto hijax-productFinder">
				<li><a href="phase1_results2.html">x4400</a></li>
				<li><a href="phase1_results2.html">x4600</a></li>
				<li><a href="phase1_results2.html">x4700</a></li>
			</ul>
		</div>

<p>insert content here</p>

</div></div></div>

<table cellspacing="0" width="100%">
		<tbody>

<p>insert content here</p>

</td>

<td class="fn1resultsTable">
		<p>insert content here</p>

</td>
			</tr>
		</tbody>
	</table>

<p>insert content here</p>

</div></div></div>

</div>
</div>

Templates:

Availability Finder view tagged view untagged

v1 x1 Returned Results sans Menus

Sample
Code
Templates (0)

In some cases the top portion of the FN1 does not need filtering or search mechanisms, in those cases this space can be used for descriptive elements such as a title and paragraph or added links.

Link to this page

Product Name

At procul ex celso miratus uertice montis aduentum sociasque rates occurrit Acestes, horridus in iaculis et pelle Libystidis ursae, Troia Criniso conceptum flumine mater quem genuit. ueterum non immemor ille parentum gratatur reduces et gaza laetus.

See Pricing & Course Details

insert content here

Copy the code below and paste into your text editor.

<h2>Product Name</h2>
			<p>At procul ex celso miratus uertice montis aduentum sociasque rates occurrit Acestes, horridus in iaculis et pelle Libystidis ursae, Troia Criniso conceptum flumine mater quem genuit. ueterum non immemor ille parentum gratatur reduces et gaza laetus.</p>

<ul class="bluearrows">
			<li><a href="{linkplaceholder}">See Pricing &amp; Course Details</a></li>
			</ul>

</div>

<p>insert content here</p>

</div></div></div>

<table cellspacing="0" width="100%">
		<tbody>

<p>insert content here</p>

</td>

<td class="fn1resultsTable">
		<p>insert content here</p>

</td>
			</tr>
		</tbody>
	</table>

<p>insert content here</p>

</div></div></div>

</div>
</div>