row[cuiSelected] > label.cui {
position: absolute;
margin: 0 0 0 14px;
line-height: 42px;
font-weight: bold;
color: #FFFFFF;
}
fieldset > .row[cuiSelected]:last-child {
border-bottom: none !important;
}
The bottom three rules are used to change the row and label styling when the row div has a
cuiSelected attribute set to true (the element??™s background becomes blue, and the label font is set
to white).
Although the styles are now ready for these elements, the service links are not yet functional within the
iUI framework. By default, iUI intercepts all link click events inside of iui.js in order to change a link??™s
selection state and to disable the default action of a link. Therefore, you need to add a handler for service
link buttons coming through this routine. Here??™s the modified version of the addEventListener
(???click???, function(event)) handler:
addEventListener(???click???, function(event)
{
var link = findParent(event.target, ???a???);
if (link)
{
function unselect() { link.removeAttribute(???selected???); }
(continued)
Chapter 7: Integrating with iPhone Services
163
if (link.href && link.hash && link.hash != ???#???)
{
link.setAttribute(???selected???, ???true???);
iui.showPage($(link.hash.
Pages:
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194