Permalink
Browse files

update create example pages

  • Loading branch information...
1 parent f07c3ba commit d5d8148a7891bc6f4b326a092c45cee080e4e4bf @koenpunt committed Jul 14, 2013
Showing with 85 additions and 19 deletions.
  1. +43 −12 public/create-example.jquery.html
  2. +42 −7 public/create-example.proto.html
@@ -2,10 +2,9 @@
<html lang="en">
<head>
<link rel="stylesheet" href="docsupport/style.css">
- <link rel="stylesheet" href="chosen.css" />
+ <link rel="stylesheet" href="chosen.css">
<style type="text/css" media="all">
/* fix rtl for demo */
- .chzn-rtl .chzn-search { left: -9000px; }
.chzn-rtl .chzn-drop { left: -9000px; }
</style>
</head>
@@ -14,9 +13,15 @@
<div id="container">
<div id="content">
<header>
- <h1>Chosen - jQuery Example</h1>
+ <h1>Chosen</h1>
</header>
- <p>Chosen is a JavaScript plugin for Prototype and jQuery that makes long, unwieldy select boxes much more user-friendly. For more information (including usage, explanation and faqs), check out the <a href="http://harvesthq.github.com/chosen/">online documentation</a>.</p>
+ <p>Chosen is a jQuery plugin that makes long, unwieldy select boxes much more user-friendly.</p>
+
+ <p>
+ <a class="button button-blue" href="https://github.com/harvesthq/chosen/releases">Downloads</a>
+ <a class="button" href="https://github.com/harvesthq/chosen">Project Source</a>
+ <a class="button" href="https://github.com/harvesthq/chosen/blob/master/contributing.md">Contribute</a>
+ </p>
<h2>Standard Select</h2>
<div class="side-by-side clearfix">
@@ -1333,15 +1338,11 @@
<h3>Form Field Change</h3>
<p>When working with form fields, you often want to perform some behavior after a value has been selected or deselected. Whenever a user selects a field in Chosen, it triggers a "change" event* on the original form field. That let's you do something like this:</p>
<p><code>$("#form_field").chosen().change( &hellip; );</code></p>
- <p><strong>Note:</strong> Prototype doesn't offer support for triggering standard browser events. <a href="https://github.com/kangax/protolicious/blob/5b56fdafcd7d7662c9d648534225039b2e78e371/event.simulate.js">Event.simulate</a> is required to trigger the change event when using the Prototype version.</p>
</li>
<li>
<h3>Updating Chosen Dynamically</h3>
<p>If you need to update the options in your select field and want Chosen to pick up the changes, you'll need to trigger the "liszt:updated" event on the field. Chosen will re-build itself based on the updated content.</p>
- <ul>
- <li><strong>jQuery Version:</strong> <code>$("#form_field").trigger("liszt:updated");</code></li>
- <li><strong>Prototype Version:</strong> <code>Event.fire($("form_field"), "liszt:updated");</code></li>
- </ul>
+ <p><code>$("#form_field").trigger("liszt:updated");</code></p>
</li>
</ul>
</div>
@@ -1417,18 +1418,48 @@
</div>
</div>
- <h2>Setup (for jQuery)</h2>
+ <h2>Setup</h2>
<p>Using Chosen is easy as can be.</p>
<ol>
- <li>Download the plugin and copy the chosen files to your app.</li>
+ <li><a href="https://github.com/harvesthq/chosen/releases">Download</a> the plugin and copy the chosen files to your app.</li>
<li>Activate the plugin on the select boxes of your choice: <code>$(".chzn-select").chosen()</code></li>
<li><a href="http://www.youtube.com/watch?feature=player_detailpage&v=UkSPUDpe0U8#t=11s">Disco</a>.</li>
</ol>
+
+ <h2>FAQs</h2>
+ <ul class="faqs">
+ <li>
+ <h3>Something doesn't work. Can you fix it?</h3>
+ <p>Yes! Please report all issues using the <a href="http://github.com/harvesthq/chosen/issues">GitHub issue tracking tool</a>. Please include the plugin version (jQuery or Prototype), browser and OS. The more information provided, the easier it is to fix a problem.</p>
+ </li>
+ <li>
+ <h3>What browsers are supported?</h3>
+ <p>All modern browsers are supported (Firefox, Chrome, Safari and IE9). Legacy support for IE8 is also enabled.</p>
+ </li>
+ <li>
+ <h3>Didn't there used to be a Prototype version of Chosen?</h3>
+ <p><a href="index.proto.html">There still is!</a></p>
+ </li>
+ </ul>
+
+ <h2>Credits</h2>
+
+ <ul class="credits">
+ <li>Concept and development by <a href="http://patrickfiller.com">Patrick Filler</a> for <a href="https://getharvest.com">Harvest</a>.</li>
+ <li>Design and CSS by <a href="http://matthewlettini.com">Matthew Lettini</a>.</li>
+ <li>Repository maintained by <a href="https://github.com/pfiller">@pfiller</a>, <a href="https://github.com/kenearley">@kenearley</a>, and <a href="https://github.com/stof">@stof</a>.</li>
+ <li>Chosen includes <a href="https://github.com/harvesthq/chosen/contributors">contributions by many fine folks</a>.</li>
+ </ul>
+
+ <footer>
+ &copy; 2011 <a href="http://www.getharvest.com/">Harvest</a> - Chosen is licensed under the <a href="http://en.wikipedia.org/wiki/MIT_License">MIT license</a>.
+ </footer>
+
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="chosen.jquery.js" type="text/javascript"></script>
- <script type="text/javascript">
+ <script type="text/javascript">
var config = {
'.chzn-select' : {create_option: true, skip_no_results: true},
'.chzn-select-deselect' : {allow_single_deselect:true},
@@ -5,18 +5,25 @@
<link rel="stylesheet" href="chosen.css" />
<style type="text/css" media="all">
/* fix rtl for demo */
- .chzn-rtl .chzn-search { left: -9000px; }
.chzn-rtl .chzn-drop { left: -9000px; }
</style>
</head>
<body>
<div id="container">
<div id="content">
<header>
- <h1>Chosen - Prototype Example</h1>
+ <h1>Chosen - Prototype Version</h1>
</header>
- <p>Chosen is a JavaScript plugin for jQuery and Prototype that makes long, unwieldy select boxes much more user-friendly. For more information (including usage, explanation and faqs), check out the <a href="http://harvesthq.github.com/chosen/">online documentation</a>.</p>
+ <p>Chosen is a Prototype plugin that makes long, unwieldy select boxes much more user-friendly.</p>
+ <p>
+ <a class="button button-blue" href="https://github.com/harvesthq/chosen/releases">Downloads</a>
+ <a class="button" href="https://github.com/harvesthq/chosen">Project Source</a>
+ <a class="button" href="https://github.com/harvesthq/chosen/blob/master/contributing.md">Contribute</a>
+ </p>
+
+ <p style="margin-top: 40px; font-style: italic;">Looking for the <a href="index.html">jQuery version?</a></p>
+
<h2>Standard Select</h2>
<div class="side-by-side clearfix">
<div>
@@ -1340,8 +1347,7 @@
<h3>Updating Chosen Dynamically</h3>
<p>If you need to update the options in your select field and want Chosen to pick up the changes, you'll need to trigger the "liszt:updated" event on the field. Chosen will re-build itself based on the updated content.</p>
<ul>
- <li><strong>jQuery Version:</strong> <code>$("#form_field").trigger("liszt:updated");</code></li>
- <li><strong>Prototype Version:</strong> <code>Event.fire($("form_field"), "liszt:updated");</code></li>
+ <p><code>Event.fire($("form_field"), "liszt:updated");</code></p>
</ul>
</li>
</ul>
@@ -1418,13 +1424,42 @@
</div>
</div>
- <h2>Setup (for Prototype)</h2>
+ <h2>Setup</h2>
<p>Using Chosen is easy as can be.</p>
<ol>
- <li>Download the plugin and copy the chosen files to your app.</li>
+ <li><a href="https://github.com/harvesthq/chosen/releases">Download</a> the plugin and copy the chosen files to your app.</li>
<li>Activate the plugin by creating a new instance of Chosen: New Chosen(<em>some_form_field</em>,<em>some_options</em>);</li>
<li><a href="http://www.youtube.com/watch?feature=player_detailpage&v=UkSPUDpe0U8#t=11s">Disco</a>.</li>
</ol>
+
+ <h2>FAQs</h2>
+ <ul class="faqs">
+ <li>
+ <h3>Something doesn't work. Can you fix it?</h3>
+ <p>Yes! Please report all issues using the <a href="http://github.com/harvesthq/chosen/issues">GitHub issue tracking tool</a>. Please include the plugin version (jQuery or Prototype), browser and OS. The more information provided, the easier it is to fix a problem.</p>
+ </li>
+ <li>
+ <h3>What browsers are supported?</h3>
+ <p>All modern browsers are supported (Firefox, Chrome, Safari and IE9). Legacy support for IE8 is also enabled.</p>
+ </li>
+ <ul>
+
+ <h2>Credits</h2>
+
+ <ul class="credits">
+ <li>Concept and development by <a href="http://patrickfiller.com">Patrick Filler</a> for <a href="https://getharvest.com">Harvest</a>.</li>
+ <li>Design and CSS by <a href="http://matthewlettini.com">Matthew Lettini</a>.</li>
+ <li>Repository maintained by <a href="https://github.com/pfiller">@pfiller</a>, <a href="https://github.com/kenearley">@kenearley</a>, and <a href="https://github.com/stof">@stof</a>.</li>
+ <li>Chosen includes <a href="https://github.com/harvesthq/chosen/contributors">contributions by many fine folks</a>.</li>
+ </ul>
+
+ <footer>
+ &copy; 2011 <a href="http://www.getharvest.com/">Harvest</a> - Chosen is licensed under the <a href="http://en.wikipedia.org/wiki/MIT_License">MIT license</a>.
+ </footer>
+
+
+
+
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js" type="text/javascript"></script>

0 comments on commit d5d8148

Please sign in to comment.