jquery ui標籤與玉

Question

您好我試圖創建JQuery UI標籤與玉節點js模板引擎。它不工作。

這裏是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/

但這不是在玉

Answer 1

你錯過了<ul>標籤內<div id="tabs">的選項卡標題。對於選項卡proprely工作..

試試這個

<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>....，它應該工作

注意：您已經在您的提琴失蹤""處於警戒..所以這是OT工作

，並加入HTML上述<ul>..和它的工作......工作fiddle here

更新

你加載你的jQuery UI的代碼第一和jQuery分鐘第二....這是不正確的...負載jquery分第一和thi用戶..檢查出小提琴太..查看源小提琴，你會得到的結構..

!= 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')  

Answer 2

1. 工作你沒有一個有效的JQuery的UI佈局選項卡頁面上（模板）
2. 您的頁面上沒有編號爲tabs的容器
3. 您在您的JS中發生錯誤 - 您正試圖提醒未定義的變量hi

在official documentation中查找工作示例。

Answer 3

它的工作錯誤是在jQuery的min.js和jQuery的ui.js

jQuery的min.js應該是第一個和鏈接的JavaScript頁面

jQuery的ui.js作爲第二的現在的位置更新

!= 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')