Javascript 按钮不以jQueryUI样式显示_Javascript_Jquery_Html_Css_Jquery Ui

Javascript 按钮不以jQueryUI样式显示

javascript jquery html css jquery-ui

Javascript 按钮不以jQueryUI样式显示,javascript,jquery,html,css,jquery-ui,Javascript,Jquery,Html,Css,Jquery Ui,我是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/exte

我是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>

有人有办法解决这个问题吗？提前谢谢你

你错过了写作机会在您的代码中

更换

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

与

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

就是这样…

如果您正确地关闭了函数，就可以很好地工作：使用是测试小代码块的好方法

此外，您可能正在复制粘贴所有内容。您不需要每次都使用

$（函数（）{}）

。它只是说等待文档完全加载，然后执行所有脚本。我建议您根本不要使用速记，而是像这样开始您的代码：

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

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

    //More logic

});//End

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

为什么有“button（）”？删除它并尝试删除它，选项卡和“我的可缩放和可拖动窗口”将再次工作，但“我的按钮”的样式仍为标准HTML样式验证您的表格布局。在第一个表的“<代码> >代码>中，在第二个表中有一个未关闭的<代码> <代码>。使用浏览器控制台检查错误。如果你进去看看的话，你已经解决了一些问题console@Maverick正如其他用户提到的，您的代码在css javascript和html中包含一些错误。为了防止意外行为，请先修复代码。

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

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

    //More logic

});//End