生成的屏幕类似于图 2。

图 2. iPhone Soups OnLine 主导航栏

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

这里有两个 helper 函数。第一个是 iui_toolbar，用于设置大多数 iPhone 应用程序顶部的灰蓝色 工具栏。Rails helper 类似于清单 3。

清单 3. iUI 工具栏的 Rails helper

　　　　　　　　　　
　　def button_link_to(name, options, html_options = nil)
　　　html_options[:class] = "button"
　　　link_to(name, options, html_options)
　　end
　　
　　def iui_toolbar(initial_caption, search_url = nil)
　　　back_button = button_link_to("", "#", :id => "backButton")
　　　header = content_tag(:h1, initial_caption, :id => "header_text")
　　　search_link = if search_url
　　　　　　　　　　then button_link_to("Search", search_url, :id => "searchButton")
　　　　　　　　　　else ""
　　　　　　　　　　end
　　　content = [back_button, header, search_link].join("\n")
　　　content_tag(:div, content, :class => "toolbar")
　　end

这些代码生成下面的 HTML。

清单 4. iUI 工具栏的 HTML

　　<div class="toolbar">
　　　<a href="#" class="button" id="backButton"></a>
　　　<h1 dddd="header_text">Soups OnLine</h1>
　　　<a href="http://localhost:3000/search/new" class="button"
　　　　　id="searchButton">Search
　　　</a>
　　</div>

HTML 中的几个条目由 iUI 定义。toolbar 类定义顶部工具栏的颜色、尺寸和位置。工具栏内部的 h1 标记也由白色文本的 iUI 专门定义。backButton DOM ID 由 iUI 保存，它在单击链接后由 iUI JavaScript 创建。下一个 rails_iui helper 将使用 header_text DOM ID。清单 5 提供了一些来自 iUI 的相关 CSS。

清单 5. iUI 的头部 CSS

　　 body > .toolbar {
　　　　 box-sizing: border-box;
　　　　 -moz-box-sizing: border-box;
　　　　 -webkit-box-sizing: border-box;
　　　　 border-bottom: 1px solid #2d3642;
　　　　 border-top: 1px solid #6d84a2;
　　　　 padding: 10px;
　　　　 height: 45px;
　　　　 background: url(/images/toolbar.png) #6d84a2 repeat-x;
　　 }
　　 .toolbar > h1 {
　　　　 position: absolute;
　　　　 overflow: hidden;
　　　　 left: 50%;
　　　　 margin: 1px 0 0 -75px;
　　　　 height: 45px;
　　　　 font-size: 20px;
　　　　 width: 150px;
　　　　 font-weight: bold;
　　　　 text-shadow: rgba(0, 0, 0, 0.4) 0px -1px 0;
　　　　 text-align: center;
　　　　 text-overflow: ellipsis;
　　　　 white-space: nowrap;
　　　　 color: #FFFFFF;
　　 }

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

第二个 rails_iui helper 函数，如清单 6 所示，从菜单条目列表中生成实际的列表。在这种情况下 ，创建菜单条目对象并不重要。（详细情况请查阅 Professional Ruby on Rails —— 参见 参考资料

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