html - css- 2 个带有 div 标签的不同页面

标签 html ruby-on-rails css hyperlink

我们正在使用 Rails 为 iPad 开发一个网络应用程序,并将使用 jQery Mobile 的样式表查看数据。我们分成两个团队,一个团队负责技术(Rails)部分,另一个团队负责图形部分。

所以他们已经创建了一个如下所示的界面:

enter image description here

橙色(<div data-role="header">)和绿色(<div data-role="content">)部分都在两个独立的 div 容器中,但实际上它们稍后应该代表 2 个不同的 html.erb:橙色的 index.html.erb(/employee) 链接到绿色页面 show.html.erb(例如/employee/1)

现在我的问题:

  1. 是否可以在一个 View 中使用 rails 查看 2 个页面? (有分页?)
  2. 如何从橙色链接到绿色部分,以便页面的下半部分会根据您单击的名称而变化?是否可以在 -container 中写一些东西?

也许这很难理解,所以我将展示我们代码的某些部分。

<body> 

<!-- BEGINNING OF ORANGE PART: SEARCH BAR - index.html.erb -->
<div data-role="page" data-theme="d"> 

    <div data-role="header">
        <h6>Videobasiertes Lernsystem</h6>
        <p align="center">zur Sicherheit am Arbeitsplatz</p>

            <div data-role="collapsible" data-collapsed="true">

            <h3>&nbsp;&nbsp;Mitarbeitersuche klappt aus</h3>

            <ul data-role="listview" data-inset="true" data-filter="true" data-theme="d">
                <br></br>

                <li><p><a href="TO THE GREEN PART">Anne Wernersen</a></p></li>
                <li><p><a href="TO THE GREEN PART">Klaus Meyer</a></p></li>
                <li><p><a href="TO THE GREEN PART">Thomas Sach</a></p></li>

            </ul>
        </div><!-- /Ende Suche -->

    </div><!-- /header -->

    <div data-role="content">


<!-- BEGINNING OF GREEN PART: CONTENT - show.html.erb -->
    <!-- left panel -->
    <div class="ui-grid-b">
        <div class="ui-grid-a">
            <div class="ui-block-a"><p><strong>Faehigkeiten</Strong></p>
            ...

            ...
    </div></div></div>

<!-- /End of left panel -->

<!-- right panel -->


        <div class="ui-block-b"><strong><p>Schulungen</p></strong>

            <br></br>
            <br></br>
        ...

        ...

        </div></div></div><!-- /right panel -->

    </div><!-- /content -->

    <div data-role="footer" data-theme="d">
    </div><!-- /footer -->
    </div><!-- /page -->
</body>
</html>

我想也许我需要写在divs类似 <%= render 'index' %> 的东西并在其他两个 html 中编写真实代码。就像在 rails 脚手架中使用 edit.html.erb 和 _form.html.erb 一样。

最佳答案

您可能希望使用 jQuery 来为您完成这项工作。 Rails View 将加载所有数据,您可以使用 JavaScript 来控制页面在人们与之交互时如何变化。

如果它是大量数据并且取决于其他因素,您可能需要为您的数据设置一个 API,以便您的 JavaScript 可以从那里请求每个人的数据。

关于html - css- 2 个带有 div 标签的不同页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6823524/

相关文章:

javascript - 如何动态更新其他页面的内容

ruby-on-rails - 如何在 Ubuntu 上安装 Postgresql Gem

css INLINE-BLOCK div 居中对齐但保持内部元素仍然左对齐

javascript - 如何在javascript中使表格可滚动

javascript - jQuery.closest() 给出 "null"值

javascript - jQUERY 中的 Onclick 显示阻止为无和无为阻止

ruby-on-rails - 获取所有 gem 的列表

javascript - 在不同的设备上显示不同的 adsense

css - 在同一个div中以不同方式对齐两个元素

javascript - Ajax:多次提交后防止刷新页面