cflayout ColdFusion的類型手風琴的11

-1

我試圖用cflayout上創建的ColdFusion 11.下面手風琴控制是我使用的代碼：cflayout ColdFusion的類型手風琴的11

<cflayout name="outerlayout" type="accordion" titlecollapse="true" width="150px"> 
    <cflayoutarea name="area1" collapsible="true" title="acc1"> 
     <h3>Area 1</h3> 
     <ul><li>sdfgsdfg</li><li>sdfgsdf</li></ul> 
    </cflayoutarea> 
    <cflayoutarea name="area2" collapsible="true" title="acc2"> 
     <h3>Area 2</h3> 
     <ul><li>sdfgsdfg</li><li>sdfgsdf</li></ul> 
     <ul><li>sdfgsdfg</li><li>sdfgsdf</li></ul> 
     <ul><li>sdfgsdfg</li><li>sdfgsdf</li></ul> 
    </cflayoutarea> 
</cflayout>

我的代碼如下問題：
1.無論手風琴的內容如何，它都會顯示相同的高度。
2.無序列表無法正常顯示。
3.我希望所有的手風琴最初都會崩潰。我無法完成它。

注意：我知道使用ColdFusion的cflayout並不明智。但無論如何，我想使用它。

來源

2015-04-15 Pankaj

在那裏有問題嗎？你已經知道問題是什麼......'cflayout'。不要使用ColdFusion UI元素。他們執行不力，過時並且受到嚴重限制。通過使用像jQuery一樣的JS庫和jQuery UI來實現正確的方式。你會發現它更容易使用，併爲你提供更多的功能和風格方面的靈活性。另外，當你承認你正在做某件你可能不應該做的事情時，有些人可能不會提供幫助。 –

「注意：我知道使用ColdFusion的cflayout並不明智，但無論如何我都想使用它。」那麼很難回答你的「問題」，因爲這就是問題所在。 –

@AdamCameron。我想用'cflayout'作爲手風琴，因爲它允許錨點以手風琴的標題文本。所以，如果某些手風琴沒有內容，在這種情況下，我們曾經給標題文本提供超鏈接。使用jQuery UI實現該功能看起來很多工作，因爲jQuery手風琴不支持手風琴頭文本用作超鏈接。 – Pankaj

我終於決定切換到jQuery解決方案，因爲ColdFusion的cflayout解決方案似乎很麻煩。這是我如何使用jquery實現我的需求。

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>jQuery UI Accordion - Collapse content</title> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
    <script> 
    $(function() { 
    $("#accordion").accordion({ 
     active: false, 
     collapsible: true, 
     heightStyle: "content" 
    }); 

    $("#accordion>h3>a").click(function(){ 
     var loc = $(this).prop("href"); 
     window.open(loc, '_blank'); 
    }) 
    }); 
    </script> 
</head> 
<body> 

<div id="accordion"> 
    <h3><a href="http://www.google.com">Section 1</a></h3> 
    <div> 
    </div> 
    <h3>Section 2</h3> 
    <div> 
    <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p> 
    </div> 
    <h3>Section 3</h3> 
    <div> 
    <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p> 
    <ul> 
     <li>List item one</li> 
     <li>List item two</li> 
     <li>List item three</li> 
    </ul> 
    </div> 
    <h3>Section 4</h3> 
    <div> 
    <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p> 
    </div> 
</div> 


</body> 
</html>

爲了解決我的第一個問題，我們需要heightStyle選項設置爲"content"。它確保每個手風琴元素的高度根據其元素的內容而定。

jQuery手風琴沒有無序列表的問題。

最後，爲了讓所有的手風琴最初崩潰，我們只需要將active設置爲false。

還有一件事。我注意到jQuery手風琴的加載速度比Coldfusion的快。謝謝Adam Cameron & Scott Stroz推動我去jQuery解決方案。

來源

2015-04-18 19:29:56 Pankaj

要回答你的問題＃1：

上的ColdFusion 11 cflayout.js的代碼有硬編碼到600這導致每個標籤或者滾動條或大空格所有手風琴選項卡中的高度。

在c：\ ColdFusion11 \ cfusion \ wwwroot \ CFIDE \ scripts \ ajax \ package \ cflayout.js中編輯代碼，並刪除行430，其內容如下： _85e.height = 600;

編輯此代碼後（在ColdFusion Administrator的Caching部分中），您將需要刷新模板和組件緩存。

來源

2015-09-22 15:17:53

cflayout ColdFusion的類型手風琴的11

回答

相關問題