This is the MultiLink 3 Demo...
Daniel Smith - JavaJoint@gmail.com - 1 March 2012
Get the source: Github Repo of MultiLink
Hello! This is the third demo for MultiLink, which gives you more than one place to go when you click a link. A bit like an in-place menu...but more flexible and powerful. Check out the blog posts I've written about it.
I'll repeat just a bit of the second demo here, just to go over the basics ...
I like cars, beer, and cities There is so much to say about any of those topics, but where to put all of the links for them? ...
Go ahead and click on any of the ones above. Aha, you say! Each link functions as a sort of menu, or tooltip, or simply as a nice preview of where one could take off to...
So imagine I have a blob of data about links. Each bit of it contains:
- a link id (its name)
- a label (what you see on the page)
- a url (where it should go)
- a list of tags (such as "nyc" or "bridge")
So far, so good. We can build up a list of links by using some ID or Tag that matches some data that is available to the web page. I use the "data" attribute of HTML5 to store the references for what I want out of a chunk of JSON data:
<a id="cars1" class="multilink" data-dls-links="bmwe36, vwbug">cars</a>
Fasten your seatbelts... (grabbing info from other IDs)
My first example mentioned cars and cities. Their IDs on this page are #cars1 and #cities1. If I wanted to have a link that showed everything they list, I could certainly list out all of the individual items: (bmwe36, vwbug, visitbrooklyn, sydneyoz, melbournepz) ...
... yeah, I could. But I could just say this: #cars1, #cities1, and be done with it. If the definition changes in those IDs (someone adds a car or city), I would pick that up here for free.
I can also pick up definitions recursively. If I were bringing in the contents of #cars1, and it referred to #germancars, I would get those definitions as well (and so on). MultiLink keeps track of what it has seen, and wont get into any endless loops while gathering up info.
Keep Arms Inside The Ride! (Tags, and combining them)
Referring to items is a good start. Referring to other IDs and grabbing all of the items that they know about improves things. If you know about CSS, you are familiar with classes. Same idea here: let's talk about Tags.
Here is a basic tag: "NYC". It simply gathers all of the links that have a tag that matches "nyc". It looks like this:
<a id="nyctag1" class="multilink" data-dls-links=".nyc"</a>
Ok, so we can refer to a few of them, and build up quite a list. Let's try Sydney, NYC, and London. (that element is "#nycsydlon")
So far, I've shown a bit about referring to items in the data known to the page, and that we can go grab the items from elsewhere, and do so recursively. I've also shown the basic bit about tags: that you use them to build up quite a list. I suppose I can also show that I can get tags from elsewhere, such as that big "nycsydlondon one..." (I'm picking up the contents of "#nycsydlon")
And The Roller Coaster Plunge! (Tags: And, OR, and Without)
As you can guess, building up groups of ids and tags can yield some pretty large lists. We really want more control. Let's go for that!
- Here is "nyc"
- Here is "park"
- Here is "brooklyn"
- and ... "bridge"
- ... now it gets fun...
- "nyc AND bridge (+)"
- "nyc WITHOUT bridge (-)"
- "nyc OR bridge (|)"
- "nyc OR bridge, without London (| and -)"
Wait, Whoa.. What!?
You can say:
- I want the list of what matches "this" tag AND "that" tag. (".nyc + .bridge")
- I want whatever matches "this" OR "that" (".nyc | .bridge")
- I want the list of "this", and get rid of the items that match "that" (".nyc - .bridge")
".bridges - .nyc - .london"
Cool, Is That It?
That's the basics! Enjoy! Check out the blog posts I've written about it.