造型一個jQuery UI的手風琴

-1

誰能告訴我怎麼去CSS這樣的：http://jqueryui.com/demos/accordion/#mouseover爲下面的代碼：造型一個jQuery UI的手風琴

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="robots" content="all" /> 
<title>jQuery Vertical Accordion Menu Plugin v 2.6</title> 
<link href="css/dcaccordion.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type='text/javascript' src='js/jquery.cookie.js'></script> 
<script type='text/javascript' src='js/jquery.hoverIntent.minified.js'></script> 
<script type='text/javascript' src='js/jquery.dcjqaccordion.2.7.min.js'></script> 
<script type="text/javascript"> 
$(document).ready(function($){ 


         $('.accordion-6').dcAccordion({ 
         eventType: 'hover', 
         autoClose: true, 
         saveState: true, 
         disableLink: true, 
         menuClose: false, 
         speed: 'medium', 
         showCount: true, 

         autoExpand: true, 
         cookie : 'dcjq-accordion-1', 
         classExpand : 'dcjq-current-parent', 

         menuClose: false  
        }); 

}); 
</script> 
<link href="css/skins/blue.css" rel="stylesheet" type="text/css" /> 
<link href="css/skins/graphite.css" rel="stylesheet" type="text/css" /> 
<link href="css/skins/grey.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 

<div class="wrap"> 
    <div class="graphite demo-container"> 

      <ul class="accordion accordion-6"> 
       <li><a href="#">Home</a></li> 
       <li><a href="#">Products</a> 
        <ul class="accordion" id="accordion-6"> 
         <li><a href="#">Mobile Phones &#038; Accessories</a> </li> 
         <li><a href="#">Desktop</a> </li> 
        </ul> 
       </li> 
      <li><a href="#">About Us</a> 
       <ul class="accordion" id="accordion-6"> 
        <li><a href="#">About Page 1</a></li> 
        <li><a href="#">About Page 2</a></li>    
       </ul> 
      </li> 
      <li><a href="#">Services</a></li> 
      <li><a href="#">Contact us</a></li> 
      </ul> 

    </div> 
</div> 

</body> 
</html>

蔭新的這個CSS，所以請誰能告訴我怎麼才達到的.. ？

蔭想着有我的CSS喜歡這個網站：

http://bag-saver.com/uk/shop/black-handbags/

任何人都可以請..？

來源

2012-10-03 Lisa Ray

下載主題，這一主題的CSS添加到您的HTML頁面.. –

首先，不要不要重用你的id（「手風琴」）作爲一個班級 - 這可能會導致各種各樣的問題。其次，你有一個你的代碼的實例嗎？第三，究竟是不是工作？ – MassivePenguin

好的，我會改變這個ID的名稱..首先Iam不擅長CSS，而上面的代碼與任何JQuery主題都沒有關係。它有點自定義，所以我不能直接使用那個JQuery主題CSS。所以，對於上面的代碼，我需要一個定製的CSS ..我想我的CSS這樣的：http://jqueryui.com/demos/accordion/#mouseover（如果不完全，至少類似於..），任何人都可以這裏請... ...？ –

爲什麼不使用完整的準備去包... http://dhtmlx.com/docs/products/dhtmlxAccordion/index.shtml ...只是下載...按照步驟，你很好去。

這是一個簡單的內聯CSS開始...它使用Google API手風琴...

<html> 
<head> 
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" 
rel="stylesheet" type="text/css" /> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">  </script> 

<script type="text/javascript" language="javascript"> 
$(document).ready(function() { 
$("#accordion").accordion({ active: false, 
    collapsible: true 
}); 
}); 
</script> 
</head> 
<body> 
<div id="accordion"> 
<h3> 
<a href="#" style="background-color: Blue; height: 25px; color: White; text-decoration: none;"> 
    Start Service</a></h3> 
<div style="height: 40px;"> 
<span>Start or Stop Servcice </span> 
<asp:Panel ID="Panel1" runat="server" BorderStyle="Solid" BorderWidth="1px"> 
    <p> 
     some text 
    </p> 
</asp:Panel> 
</div> 
<h3> 
<a href="#" style="background-color: Blue; height: 25px; color: White; text-decoration: none;"> 
    Customer Service</a></h3> 
<div> 
<b>Contact Us</b> 
<asp:Panel ID="pnlSrvc" runat="server" BorderStyle="Solid" BorderWidth="1px"> 
    <p>some text<p> 
</asp:Panel> 
</div> 
<h3> 
<a href="#" style="background-color: Blue; height: 25px; color: White; text-decoration: none;"> 
    some text</a></h3> 
<div style="height: 40px;"> 
<span>some text </span> 
<asp:Panel ID="Panel2" runat="server" BorderStyle="Solid" BorderWidth="1px"> 
    <p> 
     some text 
    </p> 
</asp:Panel> 


</div> 
<h3> 
some text 
</h3> 
</body> 
</html>

來源

2012-10-03 16:18:20 Scorpio

我認爲它使用相同的HTML和CSS結構，你想 – Scorpio

我下載它，OMG，它有這麼多的文件，它需要很多時間udnestand它，但不幸的是我沒有很多時間..爲什麼不你只需發送我的CSS我的上述問題..？請問..我的查詢是否很難？ –

我不能只爲你創建一個css，而不知道你現有的代碼庫和你想在手風琴裏放什麼數據......我能做的最好的事情就是指向最簡單的插件... 刪除除div class =「blue demo-container」以外的所有東西...這個div是您可以隨心所欲修改的手風琴像..不必擔心JQuery文件只是使用它們，因爲它們是...對不起，如果我沒有用... – Scorpio

造型一個jQuery UI的手風琴

回答

相關問題