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