index.html

<html>

<head>
    <!-- Standard Meta -->
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta property="og:description" content="Easily input lists-of-things like emails, phone numbers, to-do entries, the ilk." />
    <meta property="og:image" content="http://chen-ye.github.io/Condor/thumbnail.png"/>

    <!-- Site Properities -->
    <title>Condor.js - JQuery plugin for dynamically enumerated inputs</title>

    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.0.1/semantic.min.css">
    <style type="text/css">
        input {
            transition: all .5s !important;
        }
    </style>

    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.0.1/semantic.min.js"></script>
    <script src="condor.js"></script>
</head>

<body>
    <div class="ui page grid">
        <div class="column">
            <div class="ui form segment">
                <h1 class="ui dividing header">Condor.js <span class="sub header">version 1.5</span></h1>
                <div class="ui grid">
                    <div class="ten wide column">
                        <h4 class="ui header">Demo</h4>
                        <p class="ui black">Type in the input to the right to see Condor in action!</p>
                        <h4 class="ui header">Using Condor.js:</h4>
                        <a href="https://github.com/chen-ye/Condor/archive/master.zip" class="ui labeled icon blue button">
                            <i class="download icon"></i>
                            Download Condor.js
                        </a>
                        <a href="https://github.com/chen-ye/Condor" class="ui labeled icon button">
                            <i class="github icon"></i>
                            View on GitHub
                        </a>
                        <h6 class="ui header">DEPENDENCIES</h6>
                        <ul>
                            <li><a href="http://semantic-ui.com/">Semantic UI</a>
                            </li>
                            <li><a href="http://jquery.com/">JQuery</a>
                            </li>
                        </ul>
                        <h6 class="ui header">HTML</h6>
                        <div class="ui segment">
                            <p>Place this div where you want to use Condor: (it should be within a form)</p>
                            <code>
                  &lt;div id=&quot;condor&quot;&gt; <br>
                    &nbsp;&lt;!--This is where the condor field will show up.--&gt; <br>
                  &lt;/div&gt;
                </code>
                            <br><br>
                            <p>At the end of your body, place this snippet of code:</p>
                            <code>
                  &lt;script type=&quot;text/javascript&quot;&gt; <br>
                    &nbsp;$(document).ready(function() { <br>
                      &nbsp;&nbsp;$(&quot;#condor&quot;).condor(); <br>
                    &nbsp;}); <br>
                  &lt;/script&gt; <br>
                </code>
                            <br>
                            <p>You can pass Condor options in a JSON object. Parameters are documented below</p>
                        </div>

                        <h6 class="ui header">OPTIONS</h6>
                        <table class="ui table">
                            <thead>
                                <tr>
                                    <th>Setting</th>
                                    <th>Type Signature</th>
                                    <th>Default</th>
                                    <th>Description</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><b>minInputs</b>
                                    </td>
                                    <td><i>int</i>
                                    </td>
                                    <td>1</td>
                                    <td>the min number of inputs we'll resize to</td>
                                </tr>
                                <tr>
                                    <td><b>maxInputs</b>
                                    </td>
                                    <td><i>int</i>
                                    </td>
                                    <td>10</td>
                                    <td>the max number of inputs we'll resize to</td>
                                </tr>
                                <tr>
                                    <td><b>namePrefix</b>
                                    </td>
                                    <td><i>string</i>
                                    </td>
                                    <td>'inputs'</td>
                                    <td>what gets prepended to the name of each Condor input</td>
                                </tr>
                                <tr>
                                    <td><b>uniqueNames</b>
                                    </td>
                                    <td><i>boolean</i>
                                    </td>
                                    <td>true</td>
                                    <td>whether we'll append unique ids to Condor input namePrefixes</td>
                                </tr>
                                <tr>
                                    <td><b>inactiveHint</b>
                                    </td>
                                    <td><i>string</i>
                                    </td>
                                    <td>'add input'</td>
                                    <td>placeholder text for inactive Condor input</td>
                                </tr>
                                <tr>
                                    <td><b>inactiveInputClass</b>
                                    </td>
                                    <td><i>string</i>
                                    </td>
                                    <td>'inverted'</td>
                                    <td><p>class which gets applied and removed to the input wrapper of inactive Condor inputs</p> <p><i>this is a quirky way to make inactive inputs borderless w/o introducing css.  If you're using your own styles, target <b>condor-add</b>, a class applied to inactive inputs at the field wrapper level.</i></p></td>
                                </tr>
                                <tr>
                                    <td><b>activeHint</b>
                                    </td>
                                    <td><i>string</i>
                                    </td>
                                    <td><i>none</i></td>
                                    <td>placeholder text for activated Condor inputs</td>
                                </tr>
                                <tr>
                                    <td><b>activeIcon</b>
                                    </td>
                                    <td><i>string</i>
                                    </td>
                                    <td>'linkify'</td>
                                    <td>the semantic-ui icon for activated Condor inputs</td>
                                </tr>
                                <tr>
                                    <td><b>addCallback</b>
                                    </td>
                                    <td><i>function ()</i>
                                    </td>
                                    <td>function () {}</td>
                                    <td>a zero-parameter function which gets called every time an input is added</td>
                                </tr>
                                <tr>
                                    <td><b>activateCallback</b>
                                    </td>
                                    <td><i>function ()</i>
                                    </td>
                                    <td>function () {}</td>
                                    <td>a zero-parameter function which gets called every time an input is activated</td>
                                </tr>
                                <tr>
                                    <td><b>inputType</b>
                                    </td>
                                    <td><i>string</i>
                                    </td>
                                    <td>'text'</td>
                                    <td><p>the input type of Condor inputs.</p> <p>don't try anything crazy like radio buttons!</p></td>
                                </tr>
                                <tr>
                                    <td><b>prepopulate</b>
                                    </td>
                                    <td><i>string []</i>
                                    </td>
                                    <td><i>none</i></td>
                                    <td><p>an array of strings to prepopulate Condor with.</p>  <p>useful for loading saved data</p></td>
                                </tr>
                            </tbody>
                        </table>
                        <h4 class="ui header">&copy; 2014 Chen Ye | MIT License |  <span style="font-weight: normal">Bugs?  File an issue <a href="https://github.com/chen-ye/Condor/issues">here!</a></span></h4>

                    </div>
                    <div class="six wide column">
                        <h4 class="ui header">Links</h4>
                        <div id="condor">
                            <!--                This is where the condor field will show up.-->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#condor").condor({
                inactiveHint: 'add another link',
                activeHint: 'Github, Dribbble, Behance, etc',
                activeIcon: 'linkify'
            });
        });
    </script>
    
    <script>
    //analytics
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
    
      ga('create', 'UA-58061951-1', 'auto');
      ga('send', 'pageview');
    
    </script>
</body>

</html>