From 87d4b72a7924d543e7b6800816537befea913915 Mon Sep 17 00:00:00 2001 From: Ben Brown Date: Tue, 10 Apr 2012 09:28:42 -0700 Subject: [PATCH] Created gh-pages branch via GitHub --- index.html | 146 ++++++++++++++++++++ javascripts/scale.fix.js | 17 +++ params.json | 1 + stylesheets/pygment_trac.css | 69 ++++++++++ stylesheets/styles.css | 255 +++++++++++++++++++++++++++++++++++ 5 files changed, 488 insertions(+) create mode 100644 index.html create mode 100644 javascripts/scale.fix.js create mode 100644 params.json create mode 100644 stylesheets/pygment_trac.css create mode 100644 stylesheets/styles.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..2c05ca2 --- /dev/null +++ b/index.html @@ -0,0 +1,146 @@ + + + + + + Jquery-tags-input by xoxco + + + + + + + +
+
+

Jquery-tags-input

+

Magically convert a simple text input into a cool tag list with this jQuery plugin.

+

View the Project on GitHub xoxco/jQuery-Tags-Input

+ +
+
+

jQuery Tags Input Plugin

+ +

Do you use tags to organize content on your site? +This plugin will turn your boring tag list into a +magical input that turns each tag into a style-able +object with its own delete link. The plugin handles +all the data - your form just sees a comma-delimited +list of tags!

+ +

Get it from Github

+ +

View Demo

+ +

Created by XOXCO

+ +

Instructions

+ +

First, add the Javascript and CSS files to your

tag: + +
<script src="jquery.tagsinput.js"></script>
+<link rel="stylesheet" type="text/css" href="jquery.tagsinput.css" />
+
+ +

Create a real input in your form that will contain a comma-separated list of +tags. You can put any default or existing tags in the value attribute, and +they'll be handled properly.

+ +
<input name="tags" id="tags" value="foo,bar,baz" />
+
+ +

Then, simply call the tagsInput function on any field that should be treated as +a list of tags.

+ +
$('#tags').tagsInput();
+
+ +

If you want to use jQuery.autocomplete, you can pass in a parameter with the +autocomplete url.

+ +
$('#tags').tagsInput({
+  autocomplete_url:'http://myserver.com/api/autocomplete'
+});
+
+ +

If you're using the bassistance jQuery.autocomplete, which takes extra +parameters, you can also send in options to the autocomplete plugin, as +described here.

+ +
$('#tags').tagsInput({    
+  autocomplete_url:'http://myserver.com/api/autocomplete',
+  autocomplete:{selectFirst:true,width:'100px',autoFill:true}
+});
+
+ +

You can add and remove tags by calling the addTag() and removeTag() functions.

+ +
$('#tags').addTag('foo');
+$('#tags').removeTag('bar');
+
+ +

You can import a list of tags using the importTags() function...

+ +
$('#tags').importTags('foo,bar,baz');
+
+ +

You can also use importTags() to reset the tag list...

+ +
$('#tags').importTags('');
+
+ +

And you can check if a tag exists using tagExist()...

+ +
if ($('#tags').tagExist('foo')) { ... }
+
+ +

If additional functionality is required when a tag is added or removed, you may +specify callback functions via the onAddTag and onRemoveTag parameters. Both +functions should accept a single tag as the parameter.

+ +

If you do not want to provide a way to add tags, or you would prefer to provide +an alternate interface for adding tags to the box, you may pass an false into +the optional 'interactive' parameter. The tags will still be rendered as per +usual, and the addTag and removeTag functions will operate as expected.

+ +

If you want a function to be called every time a tag is updated/deleted, set it +as the 'onChange' option.

+ +

By default, if the cursor is immediately after a tag, hitting backspace will +delete that tag. If you want to override this, set the 'removeWithBackspace' +option to false.

+ +

Options

+ +
$(selector).tagsInput({
+   'autocomplete_url': url_to_autocomplete_api,
+   'autocomplete': { option: value, option: value},
+   'height':'100px',
+   'width':'300px',
+   'interactive':true,
+   'defaultText':'add a tag',
+   'onAddTag':callback_function,
+   'onRemoveTag':callback_function,
+   'onChange' : callback_function,
+   'removeWithBackspace' : true,
+   'minChars' : 0,
+   'maxChars' : 0 //if not provided there is no limit,
+   'placeholderColor' : '#666666'
+});
+
+
+
+

This project is maintained by xoxco

+

Hosted on GitHub Pages — Theme by orderedlist

+
+
+ + + + \ No newline at end of file diff --git a/javascripts/scale.fix.js b/javascripts/scale.fix.js new file mode 100644 index 0000000..87a40ca --- /dev/null +++ b/javascripts/scale.fix.js @@ -0,0 +1,17 @@ +var metas = document.getElementsByTagName('meta'); +var i; +if (navigator.userAgent.match(/iPhone/i)) { + for (i=0; i tag:\r\n\r\n\t\r\n\t\r\n\r\nCreate a real input in your form that will contain a comma-separated list of \r\ntags. You can put any default or existing tags in the value attribute, and \r\nthey'll be handled properly.\r\n\r\n\t\r\n\r\nThen, simply call the tagsInput function on any field that should be treated as\r\na list of tags.\r\n\r\n\t$('#tags').tagsInput();\r\n\r\nIf you want to use jQuery.autocomplete, you can pass in a parameter with the \r\nautocomplete url.\r\n\r\n\t$('#tags').tagsInput({\r\n\t autocomplete_url:'http://myserver.com/api/autocomplete'\r\n\t});\r\n\r\nIf you're using the bassistance jQuery.autocomplete, which takes extra \r\nparameters, you can also send in options to the autocomplete plugin, as \r\ndescribed here.\r\n\r\n\t$('#tags').tagsInput({ \r\n\t autocomplete_url:'http://myserver.com/api/autocomplete',\r\n\t autocomplete:{selectFirst:true,width:'100px',autoFill:true}\r\n\t});\r\n\r\nYou can add and remove tags by calling the addTag() and removeTag() functions.\r\n\r\n\t$('#tags').addTag('foo');\r\n\t$('#tags').removeTag('bar');\r\n\r\nYou can import a list of tags using the importTags() function...\r\n\r\n\t$('#tags').importTags('foo,bar,baz');\r\n\r\nYou can also use importTags() to reset the tag list...\r\n\r\n\t$('#tags').importTags('');\r\n\r\nAnd you can check if a tag exists using tagExist()...\r\n\r\n\tif ($('#tags').tagExist('foo')) { ... }\r\n\r\nIf additional functionality is required when a tag is added or removed, you may\r\nspecify callback functions via the onAddTag and onRemoveTag parameters. Both \r\nfunctions should accept a single tag as the parameter.\r\n\r\nIf you do not want to provide a way to add tags, or you would prefer to provide \r\nan alternate interface for adding tags to the box, you may pass an false into \r\nthe optional 'interactive' parameter. The tags will still be rendered as per \r\nusual, and the addTag and removeTag functions will operate as expected. \r\n\r\nIf you want a function to be called every time a tag is updated/deleted, set it\r\nas the 'onChange' option.\r\n\r\nBy default, if the cursor is immediately after a tag, hitting backspace will \r\ndelete that tag. If you want to override this, set the 'removeWithBackspace' \r\noption to false.\r\n\r\n## Options\r\n\r\n\t$(selector).tagsInput({\r\n\t 'autocomplete_url': url_to_autocomplete_api,\r\n\t 'autocomplete': { option: value, option: value},\r\n\t 'height':'100px',\r\n\t 'width':'300px',\r\n\t 'interactive':true,\r\n\t 'defaultText':'add a tag',\r\n\t 'onAddTag':callback_function,\r\n\t 'onRemoveTag':callback_function,\r\n\t 'onChange' : callback_function,\r\n\t 'removeWithBackspace' : true,\r\n\t 'minChars' : 0,\r\n\t 'maxChars' : 0 //if not provided there is no limit,\r\n\t 'placeholderColor' : '#666666'\r\n\t});","tagline":"Magically convert a simple text input into a cool tag list with this jQuery plugin.","google":"","note":"Don't delete this file! It's used internally to help with page regeneration."} \ No newline at end of file diff --git a/stylesheets/pygment_trac.css b/stylesheets/pygment_trac.css new file mode 100644 index 0000000..c6a6452 --- /dev/null +++ b/stylesheets/pygment_trac.css @@ -0,0 +1,69 @@ +.highlight { background: #ffffff; } +.highlight .c { color: #999988; font-style: italic } /* Comment */ +.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */ +.highlight .k { font-weight: bold } /* Keyword */ +.highlight .o { font-weight: bold } /* Operator */ +.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */ +.highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */ +.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */ +.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */ +.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */ +.highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */ +.highlight .ge { font-style: italic } /* Generic.Emph */ +.highlight .gr { color: #aa0000 } /* Generic.Error */ +.highlight .gh { color: #999999 } /* Generic.Heading */ +.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */ +.highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */ +.highlight .go { color: #888888 } /* Generic.Output */ +.highlight .gp { color: #555555 } /* Generic.Prompt */ +.highlight .gs { font-weight: bold } /* Generic.Strong */ +.highlight .gu { color: #800080; font-weight: bold; } /* Generic.Subheading */ +.highlight .gt { color: #aa0000 } /* Generic.Traceback */ +.highlight .kc { font-weight: bold } /* Keyword.Constant */ +.highlight .kd { font-weight: bold } /* Keyword.Declaration */ +.highlight .kn { font-weight: bold } /* Keyword.Namespace */ +.highlight .kp { font-weight: bold } /* Keyword.Pseudo */ +.highlight .kr { font-weight: bold } /* Keyword.Reserved */ +.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */ +.highlight .m { color: #009999 } /* Literal.Number */ +.highlight .s { color: #d14 } /* Literal.String */ +.highlight .na { color: #008080 } /* Name.Attribute */ +.highlight .nb { color: #0086B3 } /* Name.Builtin */ +.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */ +.highlight .no { color: #008080 } /* Name.Constant */ +.highlight .ni { color: #800080 } /* Name.Entity */ +.highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */ +.highlight .nf { color: #990000; font-weight: bold } /* Name.Function */ +.highlight .nn { color: #555555 } /* Name.Namespace */ +.highlight .nt { color: #000080 } /* Name.Tag */ +.highlight .nv { color: #008080 } /* Name.Variable */ +.highlight .ow { font-weight: bold } /* Operator.Word */ +.highlight .w { color: #bbbbbb } /* Text.Whitespace */ +.highlight .mf { color: #009999 } /* Literal.Number.Float */ +.highlight .mh { color: #009999 } /* Literal.Number.Hex */ +.highlight .mi { color: #009999 } /* Literal.Number.Integer */ +.highlight .mo { color: #009999 } /* Literal.Number.Oct */ +.highlight .sb { color: #d14 } /* Literal.String.Backtick */ +.highlight .sc { color: #d14 } /* Literal.String.Char */ +.highlight .sd { color: #d14 } /* Literal.String.Doc */ +.highlight .s2 { color: #d14 } /* Literal.String.Double */ +.highlight .se { color: #d14 } /* Literal.String.Escape */ +.highlight .sh { color: #d14 } /* Literal.String.Heredoc */ +.highlight .si { color: #d14 } /* Literal.String.Interpol */ +.highlight .sx { color: #d14 } /* Literal.String.Other */ +.highlight .sr { color: #009926 } /* Literal.String.Regex */ +.highlight .s1 { color: #d14 } /* Literal.String.Single */ +.highlight .ss { color: #990073 } /* Literal.String.Symbol */ +.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */ +.highlight .vc { color: #008080 } /* Name.Variable.Class */ +.highlight .vg { color: #008080 } /* Name.Variable.Global */ +.highlight .vi { color: #008080 } /* Name.Variable.Instance */ +.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */ + +.type-csharp .highlight .k { color: #0000FF } +.type-csharp .highlight .kt { color: #0000FF } +.type-csharp .highlight .nf { color: #000000; font-weight: normal } +.type-csharp .highlight .nc { color: #2B91AF } +.type-csharp .highlight .nn { color: #000000 } +.type-csharp .highlight .s { color: #A31515 } +.type-csharp .highlight .sc { color: #A31515 } diff --git a/stylesheets/styles.css b/stylesheets/styles.css new file mode 100644 index 0000000..dacf2e1 --- /dev/null +++ b/stylesheets/styles.css @@ -0,0 +1,255 @@ +@import url(https://fonts.googleapis.com/css?family=Lato:300italic,700italic,300,700); + +body { + padding:50px; + font:14px/1.5 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; + color:#777; + font-weight:300; +} + +h1, h2, h3, h4, h5, h6 { + color:#222; + margin:0 0 20px; +} + +p, ul, ol, table, pre, dl { + margin:0 0 20px; +} + +h1, h2, h3 { + line-height:1.1; +} + +h1 { + font-size:28px; +} + +h2 { + color:#393939; +} + +h3, h4, h5, h6 { + color:#494949; +} + +a { + color:#39c; + font-weight:400; + text-decoration:none; +} + +a small { + font-size:11px; + color:#777; + margin-top:-0.6em; + display:block; +} + +.wrapper { + width:860px; + margin:0 auto; +} + +blockquote { + border-left:1px solid #e5e5e5; + margin:0; + padding:0 0 0 20px; + font-style:italic; +} + +code, pre { + font-family:Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal; + color:#333; + font-size:12px; +} + +pre { + padding:8px 15px; + background: #f8f8f8; + border-radius:5px; + border:1px solid #e5e5e5; + overflow-x: auto; +} + +table { + width:100%; + border-collapse:collapse; +} + +th, td { + text-align:left; + padding:5px 10px; + border-bottom:1px solid #e5e5e5; +} + +dt { + color:#444; + font-weight:700; +} + +th { + color:#444; +} + +img { + max-width:100%; +} + +header { + width:270px; + float:left; + position:fixed; +} + +header ul { + list-style:none; + height:40px; + + padding:0; + + background: #eee; + background: -moz-linear-gradient(top, #f8f8f8 0%, #dddddd 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#dddddd)); + background: -webkit-linear-gradient(top, #f8f8f8 0%,#dddddd 100%); + background: -o-linear-gradient(top, #f8f8f8 0%,#dddddd 100%); + background: -ms-linear-gradient(top, #f8f8f8 0%,#dddddd 100%); + background: linear-gradient(top, #f8f8f8 0%,#dddddd 100%); + + border-radius:5px; + border:1px solid #d2d2d2; + box-shadow:inset #fff 0 1px 0, inset rgba(0,0,0,0.03) 0 -1px 0; + width:270px; +} + +header li { + width:89px; + float:left; + border-right:1px solid #d2d2d2; + height:40px; +} + +header ul a { + line-height:1; + font-size:11px; + color:#999; + display:block; + text-align:center; + padding-top:6px; + height:40px; +} + +strong { + color:#222; + font-weight:700; +} + +header ul li + li { + width:88px; + border-left:1px solid #fff; +} + +header ul li + li + li { + border-right:none; + width:89px; +} + +header ul a strong { + font-size:14px; + display:block; + color:#222; +} + +section { + width:500px; + float:right; + padding-bottom:50px; +} + +small { + font-size:11px; +} + +hr { + border:0; + background:#e5e5e5; + height:1px; + margin:0 0 20px; +} + +footer { + width:270px; + float:left; + position:fixed; + bottom:50px; +} + +@media print, screen and (max-width: 960px) { + + div.wrapper { + width:auto; + margin:0; + } + + header, section, footer { + float:none; + position:static; + width:auto; + } + + header { + padding-right:320px; + } + + section { + border:1px solid #e5e5e5; + border-width:1px 0; + padding:20px 0; + margin:0 0 20px; + } + + header a small { + display:inline; + } + + header ul { + position:absolute; + right:50px; + top:52px; + } +} + +@media print, screen and (max-width: 720px) { + body { + word-wrap:break-word; + } + + header { + padding:0; + } + + header ul, header p.view { + position:static; + } + + pre, code { + word-wrap:normal; + } +} + +@media print, screen and (max-width: 480px) { + body { + padding:15px; + } + + header ul { + display:none; + } +} + +@media print { + body { + padding:0.4in; + font-size:12pt; + color:#444; + } +}