Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Tagging system based on StackOverflows system
JavaScript PHP CSS
branch: master

Merge pull request #21 from bitdeli-chef/master

Add a Bitdeli Badge to README
latest commit 47de482be9
@iog3 authored
Failed to load latest commit information.
css CSSCombed Files
js Edited to pass JSHint/Lint (and directives for JShint/Lint)
.csscomb.json Use CSSComb to standardize the CSS
.gitignore .gitignore to ignore build files, build system files and junk Windows…
.travis.yml Setup TravisCI Integration
Gruntfile.js updated build aliases
LICENSE Initial commit
README.md Add a Bitdeli badge to README
SOTag.php
SO_Tag.jquery.json Added jquery json
index.php Better docs, default tag support
package.json dev-dependency package cleanup: not using all of the copy and pasted …
result.php Almost perfect multi support and better example

README.md

Build StatusBuilt with GruntjQuery.SO_Tag

Tagging system based on StackOverflows tags with descriptions.

I found myself in need of a tagging system, so I searched far and wide on the internet for a decent one, and I couldn't find one! The style I was going for was the tagging system used on StackOverflow (hence the name SOTag). And searching StackOverflow there are hundreds of questions asking for tagging systems like it!

So I created SOTag, a simple tagging system that only allows a set of tags hat are stored in a database.

First a little description about what this plugin is for. This plugin is designed to be used with a backend database full of tags, not to be able to tag whatever you or the user wants to. I may add that feature if people want to but you cannot currently let your users add custom tags using this plugin

Screenshot

Screenshot

Please note the sample data is taken directly off the StackOverflow website and remains their property.

Basic Example

It's easy to get started, first include the JavaScript files and the CSS

<link rel="stylesheet" type="text/css" href="css/so_tag.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/so_tag.js"></script>

And then assign sotag(). You'll notice the default tags are written like this: 24_tagname, this is becasue the tags are stored in the database and the first number is relative to the ID of that tag.

<input type="text" value="1_some, 2_example, 3_tags" id="basic_example" />
<script type="text/javascript">
$('#basic_example').sotag({
    description : true
});
</script>

To actually get it to post to the server side just wrap it in a form and add a submit button!

<form action="result.php" method="post">
    <input type="text" value="3_php" name="single_example" id="single_example" />
    <input type="submit" value="Submit" />
</form>

<script type="text/javascript">
$('#single_example').sotag({
    description : true
});
</script>

Development

SOTag is set up as a grunt project to automate build tasks (such as creating minified css/js files). It is not required but it will make your life easier if you use it. You need:

  • Node.js (It is quite easy to install)
  • Grunt - even easier to install: just enter this into your command line: npm install -g grunt-cli
  • Next you just have to (from the project dir) run npm install
  • Then run build task(s) as desired (with the command line syntax of grunt [buildtask])

The grunt tasks that are currently defined:

  • Normal usage:
    • build_release: release build, css/js in minified form only.
    • build_dev: dev build, css/js in original form only.
    • build_dual: dual mode build with both minified and original css/js.
    • default: runs both the build_dev and build_release tasks.
  • Cleanup:
    • clean_full: totally cleans the whole build folder.
    • clean_dev: cleans the dev build folder.
    • clean_dual: cleans the dual build folder.
    • clean_release: cleans the release build folder.
  • Extras (all of these are run if needed by the build tasks)
    • lint: runs all linting tasks.
    • prebuild: runs csscomb.
    • minify: minifies bother JavaScript and CSS files to .min

TODO

  • Load with options
  • Everything with SO_ prefix
  • Max Tags
  • Better styled close button

Bitdeli Badge

Something went wrong with that request. Please try again.