Jquery ui标签与玉

您好，我试图创buildJQuery的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">标签页头内的<ul>标签。

尝试这个

 <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"> ...... 

我没有太多的想法在玉..但结构应该是这个标签工作和用户界面样式…添加<ul><li>....在玉石结构，它应该工作

注：你已经在你的小提琴缺less警报"" ，所以它没有工作

并在html中添加上面的<ul>..它工作…在这里工作的小提琴

更新

你已经加载你的jQuery UI代码第一次和jQuery的第二….这是不正确的…加载jQuery的分钟，第一和你的用户..检查了小提琴太..查看源小提琴，你会得到的结构..

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

它工作的错误是在jquery-min.js和jquery-ui.js上的位置

Jquery-min.js应该是第一个和Jquery-ui.js作为第二个链接到页面的JavaScript

更新

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

Answer 3

1. 您的页面上没有有效的JQuery UI选项卡布局（在模板中）
2. 您的网页上没有包含ID tabs容器
3. 你有你的JS错误 – 你试图提醒未定义的variableshi

在官方文档中查找工作示例。