[1] | 1 | qPloneTiles |
---|
| 2 | |
---|
| 3 | |
---|
| 4 | Usage |
---|
| 5 | |
---|
| 6 | Plone Product for creating "Tile" links. |
---|
| 7 | |
---|
| 8 | Provide class 'tile' for html element you want to |
---|
| 9 | have link behaviour. Then select one of the anchor |
---|
| 10 | elements inside that tile by adding it class = |
---|
| 11 | = 'primary'. Thus, our tile element will redirect |
---|
| 12 | you to primary anchor target. So all tile area, |
---|
| 13 | except anchors within it, is linkable and behave |
---|
| 14 | like a link! If you define your tile element, but |
---|
| 15 | not select your primary link inside tile, href |
---|
| 16 | attribute of the first anchor will be taken by |
---|
| 17 | default. |
---|
| 18 | |
---|
| 19 | Example 1: |
---|
| 20 | |
---|
| 21 | <div class="tile"> |
---|
| 22 | <a href="www.example1.com">First link</a> |
---|
| 23 | <a href="www.example2.com">Second link</a> |
---|
| 24 | </div> |
---|
| 25 | Here we have div element with class 'tile'. But any |
---|
| 26 | element inside div haven't class 'primary'. So by |
---|
| 27 | default will be used href of the first link. And |
---|
| 28 | when you click in scopes div element and outside a |
---|
| 29 | element you'll be redirected to www.example1.com. |
---|
| 30 | |
---|
| 31 | Example 2: |
---|
| 32 | |
---|
| 33 | <div class="tile"> |
---|
| 34 | <a href="www.example1.com">First link</a> |
---|
| 35 | <a class="primary" |
---|
| 36 | href="www.example2.com">Second link</a> |
---|
| 37 | </div> |
---|
| 38 | In this case we have (in addition all we have in previous |
---|
| 39 | example) second link with primary class. So div element |
---|
| 40 | have "www.example2.com" location. |
---|
| 41 | |
---|
| 42 | Example 3: |
---|
| 43 | |
---|
| 44 | <div class="tile"> |
---|
| 45 | <a href="www.example1.com">First link</a> |
---|
| 46 | <div class="tile"> |
---|
| 47 | <a href="www.example1.com">First link</a> |
---|
| 48 | <a class="primary" |
---|
| 49 | href="www.example2.com">Second link</a> |
---|
| 50 | </div> |
---|
| 51 | </div> |
---|
| 52 | This last example show us that we could have nested |
---|
| 53 | tile elements. In practice, everything works like in |
---|
| 54 | previous examples except one. Tile element look for |
---|
| 55 | primary link. In this example primary element is |
---|
| 56 | inside both tiles. But if you want to have for outer |
---|
| 57 | div first link as primary, you could simply add |
---|
| 58 | class 'primary' to 'First link'. In this case tile'll |
---|
| 59 | search only to first primary link. And it won't |
---|
| 60 | affect inner div element. |
---|
| 61 | So remember that tile element could inherite href |
---|
| 62 | attribute only from inner anchors. |
---|
| 63 | |
---|
| 64 | |
---|
| 65 | Inspiration |
---|
| 66 | |
---|
| 67 | "#120: Support and use "Tile" links": |
---|
| 68 | |
---|
| 69 | One of the classic, testable usability laws is Fitt's |
---|
| 70 | Law, which simply says that the efficiency of a user |
---|
| 71 | interface item is directly proportional to its size. |
---|
| 72 | Plone currently has a lot of user interface items that |
---|
| 73 | could have bigger clickable areas without changing the |
---|
| 74 | elements themselves. |
---|
| 75 | |
---|
| 76 | Proposed by:: |
---|
| 77 | Alexander Limi |
---|
| 78 | Proposal type:: |
---|
| 79 | User interface |
---|
| 80 | Assigned to release:: |
---|
| 81 | Plone 3.0 |
---|
| 82 | State:: |
---|
| 83 | being-discussed |
---|
| 84 | |
---|
| 85 | Motivation |
---|
| 86 | |
---|
| 87 | A lot of the user interface elements in Plone only |
---|
| 88 | work when you click the links they define instead |
---|
| 89 | of the entire UI element. This is bad UI, although |
---|
| 90 | most web-based systems work this way. |
---|
| 91 | |
---|
| 92 | I have already experimented with changing this for |
---|
| 93 | a limited set of items in previous Plone versions; |
---|
| 94 | in Plone 2.0 I made the entire item in the |
---|
| 95 | navigation tree clickable and it indicates when it |
---|
| 96 | is selected with a block of color around itself, |
---|
| 97 | so you know you can click (this doesn't work in |
---|
| 98 | Internet Explorer because it's a buggy piece of |
---|
| 99 | crap, more about that later ;). In Plone 2.1 I made |
---|
| 100 | all the portlet items be clickable in the entire |
---|
| 101 | area through a display:block definition of the link |
---|
| 102 | tag. |
---|
| 103 | It's time to take this to the next level. |
---|
| 104 | |
---|
| 105 | |
---|
| 106 | Proposal |
---|
| 107 | |
---|
| 108 | Because of the limitations (as far as I have found, |
---|
| 109 | at least), it's hard to make certain elements |
---|
| 110 | entirely clickable through re-defining the link tag |
---|
| 111 | only. In a separate project I was involved in, we |
---|
| 112 | used a tiny piece of JS to assign clickable behaviour |
---|
| 113 | to an arbitrary element, which worked well. |
---|
| 114 | (Note that the normal "read more" or whatever link |
---|
| 115 | still remains, so it's not removing links for people |
---|
| 116 | that have JS turned off or browsing via lynx or |
---|
| 117 | similar — this is merely augmenting the link behaviour, |
---|
| 118 | not moving it into JS.) |
---|
| 119 | This also has the advantage of being able to make any |
---|
| 120 | area clickable. My pet peeve is that Plone in "Summary |
---|
| 121 | view" doesn't accept clicks anywhere within the area |
---|
| 122 | of one of the items listed, but only on the links. The |
---|
| 123 | interface would be so much more efficient if we could |
---|
| 124 | click anywhere within that item's area. |
---|
| 125 | |
---|
| 126 | |
---|
| 127 | Implementation |
---|
| 128 | |
---|
| 129 | We should find a good way to define an area as clickable. |
---|
| 130 | In the project I was in, we defined that on the tag |
---|
| 131 | itself, and did it explicitly, but this can possibly be |
---|
| 132 | improved. |
---|