按钮未以 jQueryUI 样式显示

Question

我是 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 中实现了可拖动和可调整大小的 windows 和选项卡。现在我想在 windows 中添加一些按钮。我的问题是，每次我从 jQuery (http://jqueryui.com/button/) 粘贴代码时，按钮仍然是标准的 HTML-Style 和我的 [=24= 的可拖动和可缩放功能]都走了。

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

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

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

Answer 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();
});
});

就是这样...

Answer 2

如果您正确关闭函数，工作正常：fiddle Using a http://www.jsfiddle.net 是测试小段代码的好方法。

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

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

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

    //More logic

});//End

另一个提示：将 CSS 和 Javascript 与来自 HTML

的外部文件分开

按钮未以 jQueryUI 样式显示

Buttons are not shown in jQueryUI Style

html

javascript

css

jquery

jquery-ui