清单 6. rails-iui 列表 helper

　　def list_element(item)
　　　onclick_one = "$(''header_text'').innerHTML=''#{item.caption}''; "
　　　onclick_two = "$(''backButton'').addEventListener(''click'',
　　　　　function() {$(''header_text'').innerHTML=''Soups OnLine''; }, false);"
　　　link = link_to(item.caption, item.option_hash,
　　　　　:onclick => "#{onclick_one} " + " #{onclick_two}")
　　　content_tag(:li, link)
　　end
　　def append_options(list_content, options = {})
　　　list_content = options[:top] + list_content if options[:top]
　　　list_content += options[:bottom] if options[:bottom]
　　　list_content
　　end
　　def iui_list(items, options = {})
　　　list_content = items.map {|i| list_element(i)}.join("n")
　　　list_content = append_options(list_content, options)
　　　content_tag(:ul, list_content, :selected => "true")
　　end

在 HTML 列表中，菜单列表中的每个条目都有各自的 li 元素。它包含连接到正确的 URL 的链接以及 一些管理工具栏标题的 JavaScript。JavaScript 处理程序负责两件事情。首先，它更改工具栏的文本以 反映新的链接。（因为新的链接仅调用 Ajax 更新页面的正文，所以这只能在客户端处理）。其次，它更 改处理程序的 Back 按钮，因此 Back 按钮将工具栏的标题改为原来的 Soups OnLine。这并不能真正解 决在深层下钻时保持标题同步的问题。但在撰写本文时，iUI 和 rails_iui 都不支持这个功能。

将所有的列表条目放置在一个 HTML UL 列表中，这个列表具有特定的属性对 selected=true。iUI 使 用这来决定将哪个列表放置在 iPhone 视见区的正文部分。如果在页面中 selected 设置为 true 的位置 存在一个 HTML 标记，CSS 会使用 CSS 声明 display: block 将它赋值到视见区的整个正文。与正文标 志的尺寸定义一起，这将给 selected 条目一个完整的视见区。这是很有用的。在一个 iUI 示例中，同 一个页面出现了几个代表多层下钻的列表。最初只会显示 selected 列表，其他列表则通过单一页面内的 锚和名称链接来访问。

然而，因为 selected 列表是完整的视见区，具有 Soups OnLine 标志的头部和具有 Switch to Desktop View 链接的底部必须置于 UL 标记的内部。helper 函数允许列表的顶部和底部包含任意的 HTML —— 它们在前面的布局正文片段（清单 2）中是 :top 和 :bottom。生成的 HTML 类似于清单 7。 我为菜单的第一个元素添加了完整的清单，但对于其他元素，则省略了重复的清单。

使用Ruby on Rails和Eclipse开发iPhone应用程序，第2部分(8)

清单 7. iUI 列表 HTML

　　<ul selected="true">
　　　<h1 class="header">Soups OnLine</h1>
　　　<li>
　　　　<a href="/recipes"
　　　　　onclick="$(''header_text'').innerHTML=''Most Recent Recipes'';　
　　　　　　　　$(''backButton'').addEventListener(''click'',
　　　　　　　　function() {$(''header_text'').innerHTML=''Soups OnLine''; }, false);">
　　　　　　　　Most Recent Recipes</a>
　　　</li>
　　　
　　　### OTHER LIST ITEMS REMOVED
　　　
　　　<a href="/browsers/desktop&

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!