index.html 8.19 KB
Newer Older
nabil el mahiri committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191
<!DOCTYPE html>
<html lang="en" ng-app="ui.select.pages">
<head>
  <meta charset="utf-8">
  <title>AngularJS ui-select</title>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-sanitize.js"></script>

  <script src="./assets/app.js" type="text/javascript"></script>
  <script src="./assets/plunkr.js" type="text/javascript"></script>

  <!-- themes -->
  <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css">
  <link rel="stylesheet" href="./assets/docs.css" />

</head>

<body>
  <header class="navbar navbar-default navbar-fixed-top navbar-inner">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-3" ng-click="isCollapsed = !isCollapsed">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand visible-xs" href="#">UI Select</a>
      </div>
      <nav class="hidden-xs">
        <ul class="nav navbar-nav">
          <a href="#top" role="button" class="navbar-brand">
            UI Select
          </a>
          <li><a href="#getting_started">Getting started</a></li>
          <li><a href="#documenation">Documentation</a></li>
          <li><a href="#examples">Examples</a></li>
          <!--<li class="dropdown" uib-dropdown>
              <a role="button" class="dropdown-toggle" uib-dropdown-toggle>
                  Previous docs <b class="caret"></b>
              </a>
              <ul class="dropdown-menu">
                  <li ng-repeat="version in oldDocs">
                      <a ng-href="{{version.url}}">{{version.version}}</a>
                  </li>
              </ul>
          </li>-->
        </ul>
      </nav>
      <nav class="visible-xs" uib-collapse="!isCollapsed">
        <ul class="nav navbar-nav">
          <li><a href="#getting_started" ng-click="isCollapsed = !isCollapsed">Getting started</a></li>
          <li><a href="#directives_small" ng-click="isCollapsed = !isCollapsed">Directives</a></li>
        </ul>
      </nav>
    </div>
  </header>
  <div class="header-placeholder"></div>
  <div role="main">
    <header class="bs-header text-center" id="overview">
      <div class="container">

        <h1>UI Select</h1>
        <p>
          A native <a href="http://angularjs.org">AngularJS</a> implementation of Select2/Selectize by the
          <a href="http://angular-ui.github.io">AngularUI Team</a>
        </p>

        <p>
          <a class="btn btn-outline-inverse btn-lg" href="https://github.com/angular-ui/ui-select"><i class="icon-github"></i>Code on Github</a>
          <!--<button type="button" class="btn btn-outline-inverse btn-lg" ng-click="showDownloadModal()">
              <i class="glyphicon glyphicon-download-alt"></i> Download <small>(<%= pkg.version%>)</small>
          </button>-->
        </p>
      </div>
      <div class="bs-social container">
        <ul class="bs-social-buttons">
            <li>
                <iframe src="//ghbtns.com/github-btn.html?user=angular-ui&repo=ui-select&type=watch&count=true"
                        allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
            </li>
            <li>
                <iframe src="//ghbtns.com/github-btn.html?user=angular-ui&repo=ui-select&type=fork&count=true"
                        allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
            </li>
            <li>
                <a href="https://twitter.com/share" class="twitter-share-button"
                   data-hashtags="angularjs">Tweet</a>
                <script>
                !function (d, s, id) {
                    var js, fjs = d.getElementsByTagName(s)[0];
                    if (!d.getElementById(id)) {
                        js = d.createElement(s);
                        js.id = id;
                        js.src = "//platform.twitter.com/widgets.js";
                        fjs.parentNode.insertBefore(js, fjs);
                    }
                }(document, "script", "twitter-wjs");</script>
            </li>
            <li>
                <!-- Place this tag where you want the +1 button to render. -->
                <div class="g-plusone" data-size="medium"></div>

                <!-- Place this tag after the last +1 button tag. -->
                <script type="text/javascript">
                    (function () {
                        var po = document.createElement('script');
                        po.type = 'text/javascript';
                        po.async = true;
                        po.src = 'https://apis.google.com/js/plusone.js';
                        var s = document.getElementsByTagName('script')[0];
                        s.parentNode.insertBefore(po, s);
                    })();
                </script>
            </li>
        </ul>
      </div>
    </header>
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <section id="getting_started">
            <div class="page-header">
              <h1>Getting started</h1>
            </div>
            <h3>Dependencies</h3>
            <p>
              This repository contains a <strong>native AngularJS</strong> select directive based on
              Bootstrap/Select2/Selectize's CSS. As a result no dependency on jQuery or 3rd-Party 
              JavaScript is required. The only <strong>required</strong> dependencies are:
            </p>
            <ul>
              <li>
                <a href="http://angularjs.org" target="_blank">AngularJS</a> (requires AngularJS 1.2.x or higher, tested with 1.5.3).
              </li>
              <li>
                <a href="http://angularjs.org" target="_blank">Angular-Sanitize</a> (the version should match your version of angular.js).
              </li>
              <li>
                The matching CSS for your the theme you wish to use:
                <ul>
                  <li>Bootstrap</li>
                  <li>Select2</li>
                  <li>Selectize</li>
                </ul>
              </li>
            </ul>

            <h3>Installation</h3>
            <h4>Install via npm</h4>
            <pre>$ npm install ui-select</pre>
            <h4>Install via bower</h4>
            <pre>$ bower install angular-ui-select</pre>
            <p>
              As soon as you've got all the files downloaded and included in your page you just need to declare
              a dependency on the <code>ui.select</code> <a href="http://docs.angularjs.org/guide/module">module</a>:<br>
              <pre><code>angular.module('myModule', ['ui.select', 'ngSanitize']);</code></pre>
            </p>

          </section>
          <section id="documenation">
            <div class="page-header">
              <h1>Documentation</h1>
            </div>
            <h3>Wiki</h3>
            For up to date information please refer to the <a href="https://github.com/angular-ui/ui-select/wiki" target="_blank">Wiki</a>
            <h3>FAQ</h3>
            <p>Please check <a href="https://github.com/angular-ui/ui-select/wiki/FAQs" target="_blank">our FAQ section</a> for common problems / solutions.</p>
          </section>
          <section id="examples">
            <div class="page-header">
              <h1>Examples</h1>
            </div>
            <p>You can fork one of the plunkers from this page to see a working example of what is described here.</p>
            
            <!-- INSERT EXAMPLES HERE -->
          </section>
        </div>
      </div>
    </div><!-- /.container -->
  </div><!-- /.main -->
  <footer class="footer">
    <div class="container">
      <p>Designed and built by all ui-select <a href="https://github.com/angular-ui/ui-select/graphs/contributors" target="_blank">contributors</a>.</p>
      <p>Code licensed under <a href="https://github.com/angular-ui/ui-select/blob/master/LICENSE">MIT License</a>.</p>
      <p><a href="https://github.com/angular-ui/ui-select/issues?state=open">Issues</a></p>
    </div>
  </footer>
</body>
</html>