2015-12-31 63 views
0

我在HTML5/AngularJS /引導了一個UI頁面。該頁面有少量下拉菜單,由服務調用中的controller.js填充。我沒有任何問題解析這些信息並進入多選下拉菜單。然而,作爲我們管理層和最終用戶的智囊團決定,除了顯示每個可選選項的撤銷的下拉列表之外,他們還希望當用戶將鼠標懸停在每個選項旁邊時,會在每個選項旁邊顯示彈出式描述。除了我的個人意見外,我不能告訴他們,除非我至少能向他們展示它的樣子。爲angularJS多選選項哈弗彈出顯示

如果這只是純粹的CSS,與面板在下降,我可以看到這將是很容易的是添加一些鼠標懸停式面板/ popouts。但是我正在使用這個angularjs-dropdown-multiselect.js插件......迄今爲止效果很好,但我不確定如何添加它。在js中有一些代碼可以讓選項稍微向右滑動,當用戶將鼠標懸停在它上面時會改變顏色,但是不知道該事件如何工作,我不確定在代碼中哪裏可以找到什麼鼠標懸停的變化。

僅供參考,插件從這裏走過: http://dotansimha.github.io/angularjs-dropdown-multiselect/#/

我可以張貼的js代碼,如果有人想看看那個,但我不知道這是這個問題,甚至一個必要組成部分......我的第一個想法就是嘗試捕捉該事件,並可能更改顯示的文本?

我一直在研究這一塊有一個良好的一天,我無法找到適用於這個難題......有沒有人有關於如何添加那種功能的任何經驗或想法的所有部分答案到一個下拉?或者這是接壤的領土上,我最好是在操縱一個我已經有一個文本框的情況下,onFocus可能會顯示一個下拉列表 - 模仿面板,然後可以在子項目上顯示子面板?

回答

1

因爲我找不到在angularjs-dropdown-multiselect指令中以編程方式添加工具提示的方法,所以我假定您願意擴展它,然後創建一個快速小提琴(基於可用示例)以添加angular-ui提示創建項目。

這是鏈接的工具提示,將解釋如何將它定位 https://angular-ui.github.io/bootstrap/#/tooltip

這撥弄會給你從哪裏開始的想法:https://jsfiddle.net/silvioamaral/ghcma6z3/1/

上LN 232會在該<a><li>

template += '<a role="menuitem" tabindex="-1" ng-click="setSelectedItem(getPropertyForObject(option,settings.idProp))" >'; 

只需添加角UI指令:

UIB-工具提示= 「{{選項}}」

template += '<a role="menuitem" tabindex="-1" ng-click="setSelectedItem(getPropertyForObject(option,settings.idProp))" uib-tooltip="{{option}}">'; 

我加入到錨由於其他元件(<li><div>)似乎被綁定到的選項,如基團的存在/複選框等

希望它可以幫助

編輯:語法和的jsfiddle鏈接

+0

這個工作確切地說,你說過的是,儘管我必須調整我放在那裏的東西......這可能是因爲我們開始使用的模板/ CSS,當我們引入bootstrap時...我添加到該行的是... data-rel =「tooltip」title =「{{option.MyDescription}}」class =「tooltips」> 它的功能就像一個魅力。謝謝! – Jon

+0

很酷,很高興我能提供一個想法。您可能需要考慮分支組件源代碼並使用參數化選項擴展代碼,以便其他人可以從中受益。 – WebDever