Project DescriptionAn Orchard module that exposes the jQuery Tagit plugin written by Hailwood as a script resource.
The jQuery Tagit plugin is written by Hailwood. The javascript source can be found at
https://github.com/hailwood/jQuery-TagitTo use the DarkSky Tagit module, follow these steps:
- Enable the DarkSky Tagit feature
- In your view file, add the following code
@{
Style.Require("DarkSky.Tagit.SimpleGreen");
Script.Require("DarkSky.Tagit").AtFoot();
}
Now that the required files are included, you can use the Tagit API. For example:
@using(Script.Foot()) {
<script type="text/javascript">
$(function () {
$(".tagit").tagit({
tagSource: ["tag 1", "tag 2", "tag 3"]
});
})
</script>
}
<ul class="tagit"></ul>
The following resources are exposed:
// Classic styles
manifest.DefineStyle("DarkSky.Tagit.AwesomeBlue").SetUrl("tagit-awesome-blue.css");
manifest.DefineStyle("DarkSky.Tagit.AwesomeOrange").SetUrl("tagit-awesome-orange.css");
manifest.DefineStyle("DarkSky.Tagit.DarkGrey").SetUrl("tagit-dark-grey.css");
manifest.DefineStyle("DarkSky.Tagit.SimpleBlue").SetUrl("tagit-simple-blue.css");
manifest.DefineStyle("DarkSky.Tagit.SimpleGreen").SetUrl("tagit-simple-green.css");
manifest.DefineStyle("DarkSky.Tagit.SimpleGrey").SetUrl("tagit-simple-grey.css");
manifest.DefineStyle("DarkSky.Tagit.StylishYellow").SetUrl("tagit-stylish-yellow.css");
// jQuery UI Themeroller
manifest.DefineStyle("DarkSky.Tagit.Themeroller.Core").SetUrl("themeroller/tagit.css");
manifest.DefineStyle("DarkSky.Tagit.Themeroller.Aristo").SetUrl("themeroller/aristo/aristo.css").SetDependencies("DarkSky.Tagit.Themeroller.Core");
manifest.DefineStyle("DarkSky.Tagit.Themeroller.Bootstrap").SetUrl("themeroller/bootstrap/bootstrap.css").SetDependencies("DarkSky.Tagit.Themeroller.Core");
// Scripts
manifest.DefineScript("DarkSky.Tagit.Themeroller").SetUrl("tagit-themeroller.js").SetDependencies("jQuery");
manifest.DefineScript("DarkSky.Tagit").SetUrl("tagit.js").SetDependencies("jQuery", "jQueryUI
Core", "jQueryUIWidget", "jQueryUI_Autocomplete");