![](/img/trans.png)
[英]jQuery UI - Uncaught TypeError: Object [object Object] has no method 'tabs' (in jade)
[英]Jquery ui tabs with jade
嗨,我试图用节点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/
但这不适用于玉石
它工作的错误是在jquery-min.js和jquery-ui.js的位置
Jquery-min.js应该是第一个,Jquery-ui.js是将javascripts链接到页面的第二个
更新
!= 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')
tabs
容器 hi
在官方文档中查找工作示例。
您错过了<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">
......
我对玉器的想法不是很多..但结构应该是这个选项卡工作和ui-css造型...添加<ul><li>....
在玉石结构中它应该工作
注意:你在小提琴中警告错过了""
,所以它没有工作
并在html中添加了上面的<ul>..
它工作...在这里工作小提琴
更新
你已经加载了你的jquery ui代码并且jquery min second ....这是不正确的...首先加载jquery min然后ui 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')
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.