jQuery Accordion header with jQuery UI icon button（hide/show + hover/click）

我需要的是：一個jQuery UI框架按鈕，可以在這裏找到：http://jqueryui.com/themeroller/（看看Framework圖標）在jQuery手風琴的header 。jQuery Accordion header with jQuery UI icon button（hide/show + hover/click）

現場樣品：http://www.nikollr3.three.axc.nl/

（從我的理解，一個按鈕，也可以通過使用正確的jQuery UI的類的阿克爾標籤模仿。）

要求：我不想按鈕/圖標在當前未選擇標題時顯示。另一方面，如果標題被選中，因此也顯示DIV，我希望顯示圖標/按鈕。看看左邊的第一張圖片，在那種狀態下我不想顯示「+」按鈕。在所有其他圖像（它的重點/選擇），我希望它被顯示。 這目前沒有實施;這個怎麼做？

- >如果按鈕被點擊，我希望statProp顯示，我有一個函數showStatProp（）爲此。

問題我有目前： 將鼠標懸停在「按鈕」沒有做任何事情，因爲選擇了頭目前的情況下，相同的CSS以某種方式應用到按鈕是將標題（看跨按鈕顏色：深灰色到黑色）（沒有單獨的懸停）。

如何得到這個？我目前陷入困境，因爲在互聯網上有限的文檔/信息有關我正在嘗試的這個特定的事情。

function showStatProp() 
      { 
       if(document.getElementById("statProp").style.display == "none") 
       { 
        document.getElementById("statProp").style.display = 'block'; 
       } 
       else 
       { 
        document.getElementById("statProp").style.display = 'none'; 
       } 
      }

HTML：

<body onkeydown="controlCheck(event)" onkeyup="clearPress()" > 
     <div id="application" style="position:absolute"> 
      <div id="accordion"> 
       <h3 id="clickStat">Stations 
       <span style="float:right;" class="ui-state-default ui-corner-all"> 
       <a class="ui-icon ui-icon-plusthick btpad" href="/getPunten.php">Edit</a> 
       </span></h3> 
       <div id="stations"> 
        <input type="text" id="stations_ac" onclick="this.value='';" /> 
        <div id="selectedStationDiv"> 
        </div> 
        <hr> 
         <div id="statProp" style="display:none;"> 
        <p>Name: <input type="text" style="float:right; clear:right" size="19" id="statNam" onclick="this.value='';" /></p> 
        <p style="margin-top:15px"> 
        Type: 
        <select id ="statTyp" style ="float:right" onchange=""> 
        <option></option> 
        <option title="Test">T</option> 
        </select> 
        </p>  
        <p style="margin-top:15px"> 
        Admtyp: 
        <select id ="admtyp" style ="float:right" onchange="FilterByToestanden()"> 
        <option></option> 
        <option title="Alarm">A</option> 
        <option title="Alarm">D</option> 
        <option title="Urgent alarm">U</option> 
        </select> 
        </p> 
        <p>Image: <input type="text" id="statBildnam" size="12" style ="float:right;text-transform: uppercase"></p> 

        <p id="devText">Text: 
        <input type="text" style="float:right; clear:right" id="texts_ac" onclick="this.value='';" /></p> 
        <p> 
        <p id ="respLine">Responsible: <select id="statResp" style="margin-bottom:10px;margin-top:6px;"><option>WERKHUIS-EMG-WEVELGEM</option></select></p> 
        <button id="btnCrtStat" onClick="createStation()" type="button" style="margin-left:26px;margin-top:-3px">Create</button> 
         </div> 

       </div>           

       <h3 id="clickImages" onclick="listImages()">Images</h3> 
       <div id="imagesList" style="overflow:auto"> 

        <ul id='imagesUL'></ul> 
       <button onClick="addImage()" type="button" style="margin-left:26px;margin-top:-3px">Add image</button> 
       </div>

enter image description here

來源

2013-12-12 Faarbhurtz

一個活生生的例子就完全是有益的 –

@ZachSaucier任何提示任何將不勝感激 – Faarbhurtz

我不太能理解你的問題以幫助你（並假設其他人）。你可以擴展你的意思嗎？「我不希望顯示按鈕/圖標時，當前沒有選擇標題」。是否有機會繪製您想要的最終解決方案的線框？ – Hady

我想你想是這樣的：

http://jsfiddle.net/mali303/gxemn34h/

我添加了一個CSS類的動作按鈕「的按鈕。在摺疊狀態下使用隱藏按鈕這個CSS：

#accordion .action-button { 
    float: right; 
    display: none; 
} 
#accordion .ui-state-active .action-button { 
    display: inline; 
}

要添加懸停效果：

$('#accordion .action-button').hover(
    function() { 
     $(this).addClass('ui-state-hover'); 
    }, 
    function() { 
     $(this).removeClass('ui-state-hover'); 
    } 
);

爲了使按鈕點擊，使用這樣的：

$('#accordion .action-button a').click(function() { 
    self.location.href = $(this).attr("href"); 
});

編輯：

要修復默認和懸停狀態按鈕，使用這個CSS： http://jsfiddle.net/mali303/vf4q0eox/1/

#accordion .action-button .ui-icon { 
    background-image: url(http://code.jquery.com/ui/1.9.2/themes/base/images/ui-icons_888888_256x240.png); 
} 
#accordion .action-button.ui-state-hover .ui-icon { 
    background-image: url(http://code.jquery.com/ui/1.9.2/themes/base/images/ui-icons_454545_256x240.png); 
}

來源

2013-12-17 15:46:21 mali303

嘿，這個看起來棒極了，一句話，雖然加號不是黑色，但不是灰色（或darkgrey）（與一個不專心的手風琴頭一致）只有在聚焦時才應該是黑色，這很容易修理？ – Faarbhurtz

@Faarbhurtz檢查更新的一個在這裏：http://jsfiddle.net/DAaRw/10/ – mali303

我很欣賞你在這做的工作，這是頂尖的！然而，不知怎的，我的網站拒絕給狀態.ui-state-hover到動作按鈕，而它只是爲H3標題做的..我不明白這一點！ – Faarbhurtz

這是當的JavaScript相關的東西不能正常工作，首先檢查是否有錯誤控制檯重要。

當檢查你的鏈接演示控制檯，我發現了一個錯誤：

Uncaught SyntaxError: Unexpected token ILLEGAL

據指出，這行代碼（通過檢查線1000）

var jDescriptions= ["<br /> 
<b>Warning</b>: implode() [<a href='function.implode'>function.implode</a>]: Invalid arguments passed in <b>/home/nikollr3/domains/nikollr3.three.axc.nl/public_html/index.php</b> on line <b>1007</b><br /> 
"];

言下之意是，你有導致問題的某種unicode字符。也許它正在導致換行。無論哪種方式，結果都是一個開放式結束的字符串和一個錯誤，使得在這一行之後正在檢查的代碼無效。以下不執行的代碼是該頁面的大部分腳本。

我建議你或者手動輸入這一行以確保unicode不見了，或者你總是可以嘗試通過運行它jsbeautifier.org/。請記住，控制檯錯誤始終是一個很好的起點。

來源

2013-12-16 16:36:57

嘿，我刪除了一些我的php代碼，因爲我不能分享這段代碼，appaorantely我忘了刪除一個PHP變量的引用。這絕對不會對我造成問題。我今晚將刪除參考文獻。謝謝 – Faarbhurtz

你可以做一個CSS唯一基礎的解決方案。

如果您檢查該被從你使用的是庫生成的HTML，你會發現，當一個按鈕：

徘徊，類ui-state-hover用於
選擇，該類ui-state-active是使用
未被選中，沒有上述兩類用於

使用上面的瞭解，你可以隱藏編輯站，但噸（加號圖標）在默認情況下，只有選擇時讓它懸停可見或：

#clickStat span.ui-state-default { 
    display: none; 
} 

#clickStat.ui-state-hover span.ui-state-default, 
#clickStat.ui-state-active span.ui-state-default { 
    display: block; 
}

來源

2013-12-18 09:02:52 Hady

jQuery Accordion header with jQuery UI icon button（hide/show + hover/click）

回答

相關問題