按钮未以 jQueryUI 样式显示答案

【问题标题】：Buttons are not shown in jQueryUI Style按钮未以 jQueryUI 样式显示
【发布时间】：2015-03-04 12:14:51
【问题描述】：

我是 jQueryUI 的新手，并对其进行了一些测试。

这是我当前的代码：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <title>Tools</title>
  <link rel="stylesheet" href="include/jquery-ui.css">
  <script src="include/external/jquery/jquery.js"></script>
  <script src="include/jquery-ui.js"></script>
  <script src='js/javascript.js'></script>

  <style>
   #draggable
   {
    width: 99%; 
    height: 500px; 
    padding: 0.5em; 
    border: solid;
    border-width: 1px;
   }

   #my_new_window
   {
    width: 150px;
    height: 150px;
    padding: 0.5em;
    border: solid; 
    border-width: px;
   }
  </style>

  <script> 
   $(function() {
    $( "#draggable" ).draggable().resizable();
   });

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

   $(function() {
    $("input[type=submit], a, button").button().click(function(event)
    {
     event.preventDefault();
    });

    var give_me_new_window = function () {
     var div = document.createElement('div');
     document.body.appendChild(div);
     div.id = 'my_new_window';
     div.textContent = 'Hello world.';
     div.className = 'ui-widget-content';

     $(function()
     {
      $( "#my_new_window" ).draggable().resizable();
     });
    };
 </script>
 </head>
 <body>
  <table border="0" width="100%" style="border-collapse:collapse;">
  <colgroup>
   <col width="20%">
   <col width="60%">
   <col width="10%">
   <col width="10%">
  </colgroup>
  <tr>
   <td><img src="media/pictures/Logo.jpg" width="100" height="56" alt="Logo"></td>
   <th align=center><b>Tools</b></th>
   <td align=right>Welcome User  </td>
   <td>  XXXXX YYYYYYY</td>
  </tr>
  </table>
  <hr> 
  <div id="draggable" class="ui-widget-content">
   <h3>Bla bla blub</h3>
   <hr>
   <div id="tabs">
    <ul>
     <li><a href="#tab1">Role Analysis</a></li>
     <li><a href="#tab2">Risk Analysis</a></li>
    </ul>
    <div id="tab1">
     <table border="0" style="border-collapse:collapse;">
     <colgroup>
      <col width="200">
      <col width="200">
      <col width="200">
      <col width="200">
     </colgroup>
     <tr>
      <td><input type="submit" value="A submit button"></td>
      <td><input type="submit" value="A submit button"></td>
      <td><input type="submit" value="A submit button"></td>
      <td><input type="submit" value="A submit button">
     </tr>
     </table>
    </div>
    <div id="tab2"><p>Here comes the Text.</p></div>
    <p>Drag me around</p>
    <input type="button" name="Text 2" value="Text 2 anzeigen"
        onclick="give_me_new_window();"
    >
   </div>
 </body>
 </html>

如您所见，我已经在窗口中实现了可拖动和可调整大小的窗口和选项卡。现在我想在 windows 中添加一些按钮。我的问题是每次我从 jQuery (http://jqueryui.com/button/) 粘贴代码时，按钮仍然是标准的 HTML 样式，并且我的窗口的可拖动和可调整大小的功能消失了。

导致这个问题的代码就是这个。如果我不将其粘贴到代码中，一切正常。

$(function() {
    $( "input[type=submit], a, button" )
    .button()
    .click(function( event ) {
    event.preventDefault();
    });

有没有人想办法解决这个问题？提前谢谢！

【问题讨论】：

你为什么有 'button()' ？删除它并尝试一下
删除了它，标签和我的可大可拖动窗口再次工作，但我的按钮样式仍然是标准 HTML 样式
验证您的表格布局。您在第一个表中的 <td> 中间有一个 <tr>，在第二个表中有一个未闭合的 <td>。
使用浏览器控制台检查错误。如果您只是在控制台中查看，可能已经解决了其中的一些问题
@Maverick 正如其他用户所提到的，您的代码在 css javascript 和 html 中包含一些错误。防止意外行为，首先修复您的代码。

标签： javascript jquery html css jquery-ui

【解决方案1】：

你错过了在你的代码中写 });

替换

$(function() {
    $( "input[type=submit], a, button" )
    .button()
    .click(function( event ) {
    event.preventDefault();
    });

与

$(function() {
$( "input[type=submit], a, button" )
.button()
.click(function( event ) {
event.preventDefault();
});
});

就是这样……

【讨论】：

【解决方案2】：

如果你正确地关闭你的函数，就可以正常工作：fiddle 使用http://www.jsfiddle.net 是测试小段代码的好方法。

另外，您可能正在复制粘贴所有内容。您不需要每次都使用$(function () {})。它只是说等待文档完全加载，然后执行所有这些脚本。我建议你根本不要使用速记，而是像这样开始你的代码：

$(document).ready(function () {//Open

    $( "input[type=submit], a, button" )
    .button()
    .click(function( event ) {
    event.preventDefault();
    }); 

    //More logic

});//End

另一个提示：将 CSS 和 Javascript 与 HTML 中的外部文件分开

【讨论】：