創建指針或在一個div

的頂部右側箭頭如何才能做到這一點與CSS和/或JQuery的，包括jQueryUI的創建指針或在一個div

但不是MooTools的....

我一直在努力做到這一點使用CSS：之前：之後arrow.top等等我可以得到一個箭頭，有時與一個矩形旋轉，有時與 a：之前，但切換參數試圖得到正確的位置確實似乎沒有得到它在正確的地方。

我只是在我的頁面的頂部帶有一個按鈕，我想點擊它並加載與$("ul li div)元素的div。

enter image description here

我覺得這種類型的UI元素的缺乏特定術語的是它已經很難描述我想原因。 '箭頭'或'指針'通常也是。我也嘗試過使用JQuery UI工具提示，但我無法獲取從AJAX調用中獲取的ul-> li項目列表。也正在玩與 JQuery UI對話框。也許是因爲我試圖以許多不同的方式來做到這一點。我想我應該從一些div開始並從那裏開始工作。

無論如何一個圖像是值得1000字，所以這裏是一個例子.....我會刪除我的其他問題。

enter image description here

來源

2013-07-22 matthewbaskey

你將不得不解釋遠一點你想在這裏實現什麼。您想要更改光標的頁面頂部div中的按鈕？你沒有解釋得很好。 –

請提供代碼和*請*做出某種努力...... – Dom

我看到你已經試圖提出這個問題。這句話更清楚一點，你的問題描述更有意義。也許這個問題可能會被關閉，人們會努力幫助你解決這個問題？ http://stackoverflow.com/questions/17791580/load-a-ul-element-with-li-from-a-getjson-call-in-jquery-ui-tooltip –

你的問題還不清楚，但我想你想要像this :

HTML：

<div class="containner"> 
    Hello 
    <div class="arrow arrow-right"></div> 
    <div class="clear"></div> 
</div>

CSS：

個

.containner { 
    width:100px; 
    height;100px; 
    border:solid black 1px; 
    text-align:center; 
    cursor:pointer; 
    background:#ccc; 
    color:#fff; 
} 
.arrow-right { 
    width: 0; 
    height: 0; 
    border-top: 10px solid transparent; 
    border-bottom: 10px solid transparent; 
    border-left: 10px solid #fff; 
    float:right; 
} 

.arrow-down { 
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent; 
    border-right: 10px solid transparent; 
    border-top: 10px solid #fff; 
    float:right; 
    margin-top: 5px; 
} 

.clear { 
    clear:both; 
    font-size:1px; 
}

JS：

$('.containner').on('click', function(){ 
    // other code 
    $(this).find('.arrow').toggleClass('arrow-right arrow-down') 
});

來源

2013-07-23 00:18:07

創建指針或在一個div

回答

相關問題