使用jade（nodejs模板引擎）创建jquery ui选项卡

Posted 2023-03-08

【中文标题】使用jade（nodejs模板引擎）创建jquery ui选项卡

【英文标题】：creating jquery ui tabs with jade(nodejs template engine)

【发布时间】：2012-02-20 11:47:30

【问题描述】：

您好，我尝试使用 Jade 模板引擎为节点 js 创建 jquery ui 选项卡，但它不起作用。

这里是 index.jade：

doctype 5
html
  head
    link(href='/stylesheets/style.css', rel='stylesheet')
    script(src='http://code.jquery.com/jquery-1.6.1.min.js')
    script(src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js')    
    script(src='/js/jquery-main.js')

body
#chat
  #nickname
    form.wrap#set-nickname
      p Please type in your nickname and press enter.
      input#nick
      p#nickname-err Nickname already in use
  #connecting
    .wrap Connecting to socket.io server
  #tabs
    ul
      li.first
        a(href='#grchat') group chat
      li.last
        a(href='#canv') canvas  
    #grchat
      #messages
        #nicknames
        #lines
      form#send-message
        input#message
        button Send
    #canv
      h1 example

这里是 jquery-main.js

$(function() 
  $( "#tabs" ).tabs();
);

选项卡未呈现。

呈现的 html 位于：http://jsfiddle.net/Nfcfc/

【问题讨论】：

空脚本标签有什么用？你为什么要把你的身体埋进脑袋里？似乎您已将其他 div 放入选项卡 div 中

忽略它们是错别字，我的错。

那好难帮你，你为什么不发布真正的html？

没有。您发布了只是一个模板的玉文件，它仍然编译为“常规”html。

我已编辑，请忽略上面代码中的缩进。

【参考方案1】：

您似乎没有包含 jQuery UI 样式表，除非它粘贴在您的 /stylesheets/style.css 中

要使用您发布的示例代码，您需要将其添加到您的模板头部下方：

link(href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css', rel='stylesheet')

如果没有 jquery UI CSS，选项卡将不会呈现。

【讨论】：

我的愚蠢，对我来说太糟糕了:( :(