1

こんにちは、ノード js 用の jade テンプレート エンジンを使用して Jquery UI タブを作成しようとしていました。そしてそれは機能していません。

index.jade は次のとおりです。

#tabs
  ul
    li
      a(href='#tabs-1') New employee
    li
      a(href='#tabs-2') Index of employees

  #tabs-1
    .page-header
      h1 New employee

    - var form = formFor(employee, {action: pathTo.employees(), method: 'POST', id: "employee_form", class: 'form-horizontal'})

    != form.begin()
    include _form
    .form-actions
      != form.submit('<i class="icon-ok icon-white"></i>  Create employee', {class: 'btn btn-primary'})
      span= ' or '
      != linkTo('Cancel', pathTo.employees(), {class: 'btn'})
    != form.end()

  #tabs-2
    .page-header
      h1 Index of employees


    - if (employees.length) {
    .row
      .span12
         table.table.table-striped
           thead
             tr
               th ID
               th.span3 Actions
           tbody
             - employees.forEach(function (employee) {
             tr
               td
                 != linkTo('employee #' + employee.id, path_to.employee(employee))
               td
                 != linkTo('<i class="icon-edit"></i> Edit', pathTo.edit_employee(employee), {class: 'btn btn-mini'}) + ' '
                 != linkTo('<i class="icon-remove icon-white"></i> Delete', pathTo.employee(employee), {class: 'btn btn-mini btn-danger', method: 'delete', remote: true, jsonp: '(function (u) {location.href = u;})'})
             - });
    - } else{
    .row
      .span12
         p.alert.alert-block.alert-info
            strong No employees were found.
    - }

これは私のlayout.jadeです

!!! 5
html
  head
    title= title
    != stylesheetLinkTag('http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/base/jquery-ui.css', 'bootstrap', 'application', 'bootstrap-responsive')
    != javascriptIncludeTag('http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.js', 'https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js', 'rails', 'application')
    script
      $(document).ready(function() {
        alert("hi");
        $("#tabs").tabs();
      });
    != csrfMetaTag()
  body
    .navbar
        .navbar-inner
            .container
               a.brand(href='#') Project name

    .container
      - var flash = request.flash('info').pop(); if (flash) {
        .alert.alert-info= flash
      - }

      - flash = request.flash('error').pop(); if (flash) {
        .alert.alert-error= flash
      - }

      != body

      hr
      footer
        p © Company 2012
  != contentFor('javascripts')

タブはレンダリングされません。

レンダリングされた html はhttp://jsfiddle.net/DUUdr/5/にあります。

しかし、これは翡翠では機能しません

4

3 に答える 3

2

jquery-min.jsとjquery-ui.jsの位置にエラーがありました

JavaScript をページにリンクするには、Jquery-min.js を最初に、Jquery-ui.js を 2 番目にする必要があります。

更新しました

 != javascriptIncludeTag('http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.js', 'https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js', 'rails', 'application')

に

  != javascriptIncludeTag('https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.js', 'rails', 'application')
于 2013-03-06T04:32:30.720 に答える
1
  1. ページに有効な JQuery UI タブ レイアウトがありません (テンプレート内)。
  2. tabsページに id のコンテナがありません
  3. JS にエラーがあります - 未定義の変数を警告しようとしていますhi

公式ドキュメントで実際の例を探してください。

于 2013-03-05T12:57:50.530 に答える
1

<ul>タブヘッダーの内部タグを見逃しました<div id="tabs">..タブが適切に機能するように..

これを試して

<div id="tabs">
<ul>
  <li><a href="#tabs-1">New employee</a></li>
  <li><a href="#tabs-2">Index of employees</a></li>
</ul>
<div id="tabs-1">
 ......

私は翡翠についてあまり考えていません..しかし、タブが機能し、ui-cssスタイリングのために構造はこれでなければなりません...<ul><li>.... 翡翠構造を追加すると、機能するはずです

注：""フィドルでアラートが欠落していたため、機能していませんでした

上記をhtmlに追加する<ul>..とうまくいきました...ここでフィドルを動かします

更新しました

jquery ui コードを最初にロードし、jquery min を 2 番目にロードしました....それは正しくありません... jquery min を最初にロードし、thn ui をロードします..フィドルもチェックしてください..フィドルのソースを表示すると、構造が得られます..

  != javascriptIncludeTag('https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js','http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.js', 'rails', 'application')
于 2013-03-05T12:57:52.677 に答える