Navigation Menu

Skip to content

Commit

Permalink
update create example pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@koenpunt
koenpunt committed Nov 25, 2013
1 parent f07c3ba commit d5d8148
Show file tree
Hide file tree
Showing 2 changed files with 85 additions and 19 deletions.
55 changes: 43 additions & 12 deletions public/create-example.jquery.html
View file
Expand Up @@ -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>
Expand All @@ -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">
Expand Down Expand Up @@ -1333,15 +1338,11 @@ <h2>Change / Update Events</h2>
<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>
Expand Down Expand Up @@ -1417,18 +1418,48 @@ <h2>Labels work, too</h2>
</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},
Expand Down
49 changes: 42 additions & 7 deletions public/create-example.proto.html
View file
Expand Up @@ -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>
Expand Down Expand Up @@ -1340,8 +1347,7 @@ <h3>Form Field Change</h3>
<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>
Expand Down Expand Up @@ -1418,13 +1424,42 @@ <h2>Labels work, too</h2>
</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>
Expand Down

0 comments on commit d5d8148

Please sign in to comment.