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>

正如您所看到的，我已经在窗口中实现了可拖动且可调整大小的窗口和标签。现在我想在窗口中添加一些按钮。我的问题是每次我从jQuery（http://jqueryui.com/button/）粘贴代码时，按钮仍然是标准的HTML样式，我的窗口的可拖动和相当大的功能都消失了。

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

$(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使用http://www.jsfiddle.net是测试小块代码的好方法。

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

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

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

    //More logic

});//End

另一个提示：使用HTML中的外部文件分离CSS和Javascript

jQueryUI Style中没有显示按钮

2 个答案: