Streams/streams
Streams/streams
1
0
Fork 0
mirror of https://codeberg.org/streams/streams.git synced 2024-09-19 15:55:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
streams/library/bootstrap-tagsinput/README.md
Stefan Parviainen b8081624c5 Add bootstrap-tagsinput library
2014-12-21 12:44:57 +01:00

42 KiB
Raw Permalink Blame History

<html lang="en" class=""> <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# object: http://ogp.me/ns/object# article: http://ogp.me/ns/article# profile: http://ogp.me/ns/profile#"> 
<title>bootstrap-tagsinput/README.md at master · TimSchlechter/bootstrap-tagsinput · GitHub</title>
<link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="GitHub">
<link rel="fluid-icon" href="https://github.com/fluidicon.png" title="GitHub">
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-114.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-144.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144.png">
<meta property="fb:app_id" content="1401488693436528">

  <meta content="@github" name="twitter:site" /><meta content="summary" name="twitter:card" /><meta content="TimSchlechter/bootstrap-tagsinput" name="twitter:title" /><meta content="bootstrap-tagsinput - jQuery tags input plugin based on Twitter Bootstrap." name="twitter:description" /><meta content="https://avatars1.githubusercontent.com/u/2721613?v=3&amp;s=400" name="twitter:image:src" />

  <meta name="browser-stats-url" content="/_stats">
<link rel="assets" href="https://assets-cdn.github.com/">
<link rel="conduit-xhr" href="https://ghconduit.com:25035">

<meta name="pjax-timeout" content="1000">


<meta name="msapplication-TileImage" content="/windows-tile.png">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="selected-link" value="repo_source" data-pjax-transient>
  <meta name="google-analytics" content="UA-3769691-2">

<meta content="collector.githubapp.com" name="octolytics-host" /><meta content="collector-cdn.github.com" name="octolytics-script-host" /><meta content="github" name="octolytics-app-id" /><meta content="05C412F3:5EFA:620CC:54968B9C" name="octolytics-dimension-request_id" />

<meta content="Rails, view, blob#show" name="analytics-event" />



<link rel="icon" type="image/x-icon" href="https://assets-cdn.github.com/favicon.ico">


<meta content="authenticity_token" name="csrf-param" />

<link href="https://assets-cdn.github.com/assets/github-9bcf5def7eb44e2a101b20aaecf3707f4b0a10ab8f4d6eebec29371f821c4b29.css" media="all" rel="stylesheet" type="text/css" />
<link href="https://assets-cdn.github.com/assets/github2-47bc67324d463c7cecb5ee4c009628c91db85b0e9288a9e663f2d06ff9e03088.css" media="all" rel="stylesheet" type="text/css" />




<meta http-equiv="x-pjax-version" content="cffc32e08a29062b908cc3ddb47285af">
</head> Skip to content 
  <div class="header header-logged-out" role="banner">

<a class="header-logo-wordmark" href="https://github.com/" ga-data-click="(Logged out) Header, go to homepage, icon:logo-wordmark">
  <span class="mega-octicon octicon-logo-github"></span>
</a>

<div class="header-actions" role="navigation">
    <a class="button primary" href="/join" data-ga-click="(Logged out) Header, clicked Sign up, text:sign-up">Sign up</a>
  <a class="button" href="/login?return_to=%2FTimSchlechter%2Fbootstrap-tagsinput%2Fblob%2Fmaster%2FREADME.md" data-ga-click="(Logged out) Header, clicked Sign in, text:sign-in">Sign in</a>
</div>

<div class="site-search repo-scope js-site-search" role="search">
  <form accept-charset="UTF-8" action="/TimSchlechter/bootstrap-tagsinput/search" class="js-site-search-form" data-global-search-url="/search" data-repo-search-url="/TimSchlechter/bootstrap-tagsinput/search" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div>

This repository
  <ul class="header-nav left" role="navigation">
      <li class="header-nav-item">
        <a class="header-nav-link" href="/explore" data-ga-click="(Logged out) Header, go to explore, text:explore">Explore</a>
      </li>
      <li class="header-nav-item">
        <a class="header-nav-link" href="/features" data-ga-click="(Logged out) Header, go to features, text:features">Features</a>
      </li>
      <li class="header-nav-item">
        <a class="header-nav-link" href="https://enterprise.github.com/" data-ga-click="(Logged out) Header, go to enterprise, text:enterprise">Enterprise</a>
      </li>
      <li class="header-nav-item">
        <a class="header-nav-link" href="/blog" data-ga-click="(Logged out) Header, go to blog, text:blog">Blog</a>
      </li>
  </ul>

  <div id="start-of-content" class="accessibility-aid"></div>
      <div class="site" itemscope itemtype="http://schema.org/WebPage">
<div id="js-flash-container">
  
</div>
<div class="pagehead repohead instapaper_ignore readability-menu">
  <div class="container">
  • Star 
    <a class="social-count js-social-count" href="/TimSchlechter/bootstrap-tagsinput/stargazers">
  755
</a>

    • <li>
  <a href="/login?return_to=%2FTimSchlechter%2Fbootstrap-tagsinput"
    class="minibutton with-count js-toggler-target fork-button tooltipped tooltipped-n"
    aria-label="You must be signed in to fork a repository" rel="nofollow">
    <span class="octicon octicon-repo-forked"></span>
    Fork
  </a>
  <a href="/TimSchlechter/bootstrap-tagsinput/network" class="social-count">
    307
  </a>
</li>

    <h1 itemscope itemtype="http://data-vocabulary.org/Breadcrumb" class="entry-title public">
      <span class="mega-octicon octicon-repo"></span>
      <span class="author"><a href="/TimSchlechter" class="url fn" itemprop="url" rel="author"><span itemprop="title">TimSchlechter</span></a></span><!--
   --><span class="path-divider">/</span><!--
   --><strong><a href="/TimSchlechter/bootstrap-tagsinput" class="js-current-repository" data-pjax="#js-repo-pjax-container">bootstrap-tagsinput</a></strong>

      <span class="page-context-loader">
        <img alt="" height="16" src="https://assets-cdn.github.com/images/spinners/octocat-spinner-32.gif" width="16" />
      </span>

    </h1>
  </div><!-- /.container -->
</div><!-- /.repohead -->

<div class="container">
  <div class="repository-with-sidebar repo-container new-discussion-timeline  ">
    <div class="repository-sidebar clearfix">
  • Code 
    •   <li class="tooltipped tooltipped-w" aria-label="Issues">
    <a href="/TimSchlechter/bootstrap-tagsinput/issues" aria-label="Issues" class="js-selected-navigation-item sunken-menu-item" data-hotkey="g i" data-selected-links="repo_issues repo_labels repo_milestones /TimSchlechter/bootstrap-tagsinput/issues">
      <span class="octicon octicon-issue-opened"></span> <span class="full-word">Issues</span>
      <span class="js-issue-replace-counter"></span>
      <img alt="" class="mini-loader" height="16" src="https://assets-cdn.github.com/images/spinners/octocat-spinner-32.gif" width="16" />


    <li class="tooltipped tooltipped-w" aria-label="Pull Requests">
  <a href="/TimSchlechter/bootstrap-tagsinput/pulls" aria-label="Pull Requests" class="js-selected-navigation-item sunken-menu-item" data-hotkey="g p" data-selected-links="repo_pulls /TimSchlechter/bootstrap-tagsinput/pulls">
      <span class="octicon octicon-git-pull-request"></span> <span class="full-word">Pull Requests</span>
      <span class="js-pull-replace-counter"></span>
      <img alt="" class="mini-loader" height="16" src="https://assets-cdn.github.com/images/spinners/octocat-spinner-32.gif" width="16" />


    <li class="tooltipped tooltipped-w" aria-label="Pulse">
  <a href="/TimSchlechter/bootstrap-tagsinput/pulse" aria-label="Pulse" class="js-selected-navigation-item sunken-menu-item" data-selected-links="pulse /TimSchlechter/bootstrap-tagsinput/pulse">
    <span class="octicon octicon-pulse"></span> <span class="full-word">Pulse</span>
    <img alt="" class="mini-loader" height="16" src="https://assets-cdn.github.com/images/spinners/octocat-spinner-32.gif" width="16" />


    <li class="tooltipped tooltipped-w" aria-label="Graphs">
  <a href="/TimSchlechter/bootstrap-tagsinput/graphs" aria-label="Graphs" class="js-selected-navigation-item sunken-menu-item" data-selected-links="repo_graphs repo_contributors /TimSchlechter/bootstrap-tagsinput/graphs">
    <span class="octicon octicon-graph"></span> <span class="full-word">Graphs</span>
    <img alt="" class="mini-loader" height="16" src="https://assets-cdn.github.com/images/spinners/octocat-spinner-32.gif" width="16" />


          <div class="only-with-full-nav">

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion. 

            <a href="/TimSchlechter/bootstrap-tagsinput/archive/master.zip"
               class="minibutton sidebar-button"
               aria-label="Download the contents of TimSchlechter/bootstrap-tagsinput as a zip file"
               title="Download the contents of TimSchlechter/bootstrap-tagsinput as a zip file"
               rel="nofollow">
              <span class="octicon octicon-cloud-download"></span>
              Download ZIP
            </a>
          </div>
    </div><!-- /.repository-sidebar -->

    <div id="js-repo-pjax-container" class="repository-content context-loader-container" data-pjax-container>

Permalink

branch: master 
<div class="participation">
  <p class="quickstat">
    <a href="#blob_contributors_box" rel="facebox">
      <strong>1</strong>
       contributor
    </a>
  </p>
  
</div>
<div id="blob_contributors_box" style="display:none">
  <h2 class="facebox-header">Users who have contributed to this file</h2>
  <ul class="facebox-user-list">
      <li class="facebox-user-list-item">
        <img alt="Tim Schlechter" data-user="2721613" height="24" src="https://avatars3.githubusercontent.com/u/2721613?v=3&amp;s=48" width="24" />
        <a href="/TimSchlechter">TimSchlechter</a>
      </li>
  </ul>
</div>
70 lines (61 sloc) 3.157 kb 
        <a class="octicon-button disabled tooltipped tooltipped-w" href="#"
           aria-label="You must be signed in to make or propose changes"><span class="octicon octicon-pencil"></span></a>

      <a class="octicon-button danger disabled tooltipped tooltipped-w" href="#"
         aria-label="You must be signed in to make or propose changes">
      <span class="octicon octicon-trashcan"></span>
    </a>
  </div><!-- /.actions -->
</div>

Bootstrap Tags Input Build Status

Bootstrap Tags Input is a jQuery plugin providing a Twitter Bootstrap user interface for managing tags.

Usage

Examples can be found here.

Features

  • Objects as tags
  • True multi value
  • Typeahead
  • Designed for Bootstrap 2.3.2 and 3

Objects as tags

Not just support for using strings! This means you can use different values for a tag's label and value. Each tag also holds a reference to the object by which it was created, so by calling tagsinput('items') an array of the original items is returned.

True multi value support

Other implementations just concatenate the values to a comma separated string. This results in val() returning just this string, and when submitting the form, only one big, concatenated value is sent in the request.

Bootstrap Tags Input provides true multivalue support. Just use a <select multiple /> as your input element, and val() will return an array of the tag values. When submitting the form, an array of values will be sent with the request.

Typeahead support

Integrates with Twitter Bootstraps' 2.3.2 typeahead, or use custom typeahead when using Bootstrap 3.

Development

Install dependencies:

npm install
bower install

Test:

grunt test

Build:

grunt build

History

License

This project is licensed under MIT.

Jump to Line

    </div>

  </div><!-- /.repo-container -->
  <div class="modal-backdrop"></div>
</div><!-- /.container -->

</div><!-- /.wrapper -->

  <div class="container">
  • Status
  • API
  • Training
  • Shop
  • Blog
  • About
    • </ul>

<a href="/" aria-label="Homepage">
  <span class="mega-octicon octicon-mark-github" title="GitHub"></span>
</a>

<ul class="site-footer-links">
  <li>&copy; 2014 <span title="0.02664s from github-fe122-cp1-prd.iad.github.net">GitHub</span>, Inc.</li>
    <li><a href="/site/terms">Terms</a></li>
    <li><a href="/site/privacy">Privacy</a></li>
    <li><a href="/security">Security</a></li>
    <li><a href="/contact">Contact</a></li>
</ul>

<div class="fullscreen-overlay js-fullscreen-overlay" id="fullscreen_overlay">

<div id="ajax-error-message" class="flash flash-error">
  <span class="octicon octicon-alert"></span>
  <a href="#" class="octicon octicon-x flash-close js-ajax-error-dismiss" aria-label="Dismiss error"></a>
  Something went wrong with that request. Please try again.
</div>


  <script crossorigin="anonymous" src="https://assets-cdn.github.com/assets/frameworks-fc447938e306b7b2c26a33cfee9dfda9052aeb1aa6ad84b72f1b35fd008efe9e.js" type="text/javascript"></script>
  <script async="async" crossorigin="anonymous" src="https://assets-cdn.github.com/assets/github-56c56f7fe2ed90ca50b9eefebccd56f3b9729a85d7ba17f0f9c9ebd02f20a7e3.js" type="text/javascript"></script>
</html>