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. |
---|