我不能運行我的jQuery代碼作爲工具

我想用我的網頁的this jQuery庫。我複製所有代碼在文章頁面，然後粘貼到我的.html文件如下：我不能運行我的jQuery代碼作爲工具

<html> 
    <head> 
     <script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script> 
     <script type="text/javascript"> 
      $("document").ready(function(){ 
       $("#demo img[title]").tooltip(); 
      }); 
     </script> 
    </head> 
    <body> 
    <br /> 
    <br /> 
     <div id="demo"> 
      <img src="image1.jpg" title="The tooltip text #1"/> 
      <img src="image2.jpg" title="The tooltip text #2"/> 
      <img src="image3.jpg" title="The tooltip text #3"/> 
      <img src="image4.jpg" title="The tooltip text #4"/> 
     </div> 
    </body> 
</html>

但.tooltip類樣式沒有運行。我看不到背景圖片和其他圖片。如何編輯我的.html文件？

另外，如果我想改變這個庫的CSS樣式，我該怎麼辦？

來源

2012-06-24 Birlikisgu

你添加鏈接的CSS文件....？ –

其中是http://jquerytools.org/demos/tooltip/index.html中的css文件 – Birlikisgu

您是否收到任何錯誤？ –

工作演示http://jsfiddle.net/QWeKw/2/或http://jsfiddle.net/XUhxQ/

你可以使自己的造型。

很好的鏈接：http://jquery.bassistance.de/tooltip/demo/或http://docs.jquery.com/Plugins/Tooltip

這應有助於，

代碼

$("img[title]").tooltip({ 
    events: { 
     def:  "mouseenter,mouseleave", // default show/hide events for an element 
     input: "focus,blur",    // for all input elements 
     widget: "focus click,blur", // select, checkbox, radio, button 
     tooltip: "mouseenter,mouseleave"  // the tooltip element 
    } 
});

CSS裏面演示

.tooltip { 
    font-family:tahoma; 
    background-color: #000000; 
    border: 1px solid #FFFFFF; 
    box-shadow: 0 0 10px #000000; 
    color: #FFFFFF; 
    display: none; 
    font-size: 12px; 
    padding: 10px 15px; 
    text-align: left; 
    width: 200px; 
}

工作圖像

enter image description here

來源

2012-06-24 09:40:51

爲什麼我不能在http://jquerytools.org/demos/tooltip/index.html中使用css風格？ – Birlikisgu

@Birlikisgu哈哈是的，你可以使用CSS（http://www.jquerytools.org/demos/tooltip/index.html），我只是給你一個額外的信息，如果你知道更多關於插件和東西':) '看**工作演示/代碼**，你會發現什麼是錯的，有一個很好的！ –

-1

如果你把alert("HI");放入你的javascript中，它會顯示嗎？

另外，<!doctype html>應該在最上面。

對於CSS，把這個頭：<link rel="stylesheet" type="text/css" href="mystyle.css" />

來源

2012-06-24 09:38:20 Alexander

我沒有css文件。 – Birlikisgu

只需創建一個空文件。你可以開始加入：'body {background-color：pink; }'，例如 – Alexander

好了演示中，添加這種風格里面你頭標籤：

<style> 

     .tooltip { 
     display:none; 
     background:transparent url(http://jquerytools.org/media/img/tooltip/black_arrow.png); 
     font-size:12px; 
     height:70px; 
     width:160px; 
     padding:25px; 
     color:#eee; 
     } 
     /* style the trigger elements */ 
     #demo img { 
     border:0; 
     cursor:pointer; 
     margin:0 1px; 
     } 
</style> 
<!--[if lt IE 7]> 
<style> 
    .tooltip { 
    background-image:url(http://jquerytools.org/media/img/tooltip/black_arrow.gif); 
    } 
</style> 
<![endif]-->

來源

2012-06-24 09:42:34

我不能運行我的jQuery代碼作爲工具

回答

相關問題