Add the URL hash to the HTML-tag, so we can use CSS more effectively. Allows you to avoid complex routing systems for some single-page applications.
Characters after "?" are ignored, so that a secondary parameter hash system can be integrated into your application.
Here are a few URLs in a sample page:
- http://localhost.meow/todomvc/#/
- http://localhost.meow/todomvc/#/active
- http://localhost.meow/todomvc/#/completed
- http://localhost.meow/todomvc/#/ignore//non\alpha*numeric/
- http://localhost.meow/todomvc/#/serious?cat=true&dog=false
And this is the resultant html-tag in those cases:
<html hash=""><html hash="active"><html hash="completed"><html hash="ignore/nonalphanumeric"><html hash="serious">
This can be useful for (one example) showing/hiding elements. Note that a "/" symbol appears in the final hash. All leading, following, and duplicate "/" symbols are removed.
Here is a snippet of CSS that I have used with the above code:
html[hash="active"] .todoapp .todo-list li.completed {
display: none;
}
html[hash="completed"] .todoapp .todo-list li {
display: none;
}
html[hash="completed"] .todoapp .todo-list li.completed {
display: block;
}
Include somewhere on your page, we ain't fancy here:
<script src="http://rawgit.com/gavinengel/rehash/master/rehash.js" type="text/javascript"></script>