溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下bootstrap雙擊事件如何寫，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！
bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多級列表樹插件。該jQuery插件基于Twitter Bootstrap，以簡單和優雅的方式來顯示一些繼承樹結構，如視圖樹、列表樹等等。但是不知為什么這個插件沒有自帶雙擊事件。
這個雙擊事件的解決方案中使用到了bootstrap-treeview自帶的兩個事件"nodeSelected"和"nodeUnselected".如果在treeview的節點上雙擊一定會觸發選中事件和取消選中事件，計算這兩個時間的時間間隔就可以模擬出雙擊事件的效果了。雙擊事件每次點擊鼠標左鍵的間隔，人為操作300毫秒足夠。
代碼如下：
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="css/bootstrap.css" rel="stylesheet" />
</head>
<body>
<div id="tree" style="width: 400px;height: 1000px;margin-left: auto;margin-right: auto;"></div>
<div id="testDate"></div>
<script src="js/jquery.js"></script>
<script src="js/bootstrap-treeview.js"></script>
<script type="text/javascript">
//獲取樹形結構列表數據
function getTree() { var tree = [{
text: "Parent 1",
nodes: [{
text: "Child 1",
nodes: [{
text: "Grandchild 1"
}, {
text: "Grandchild 2"
}]
}, {
text: "Child 2"
}]
}, {
text: "Parent 2"
}, {
text: "Parent 3"
}, {
text: "Parent 4"
}, {
text: "Parent 5"
}]; return tree;
}
//初始化樹形結構列表 $('#tree').treeview({
data: getTree()
});
//最后一次觸發節點Id
var lastSelectedNodeId = null; //最后一次觸發時間
var lastSelectTime = null;
//自定義業務方法
function customBusiness(data){
alert("雙擊獲得節點名字： "+data.text);
} function clickNode(event, data) { if (lastSelectedNodeId && lastSelectTime) { var time = new Date().getTime(); var t = time - lastSelectTime; if (lastSelectedNodeId == data.nodeId && t < 300) {
customBusiness(data);
}
}
lastSelectedNodeId = data.nodeId;
lastSelectTime = new Date().getTime();
}
//自定義雙擊事件
function customDblClickFun(){ //節點選中時觸發 $('#tree').on('nodeSelected', function(event, data) {
clickNode(event, data)
}); //節點取消選中時觸發 $('#tree').on('nodeUnselected', function(event, data) {
clickNode(event, data)
});
} $(document).ready(function() { customDblClickFun(); }); </script>
</body></html>效果圖：
重點：
最主要的全局變量：
lastSelectedNodeId，lastSelectedNodeId
最主要的方法：
clickNode()
上面這個方法主要用來判斷選中事件和取消選中事件操作的目標是否是一個且時間間隔是否足夠小。符合這兩個條件客戶就是想觸發雙擊事件。可以再函數customBusiness中自定義業務邏輯。
看完了這篇文章，相信你對bootstrap雙擊事件如何寫有了一定的了解，想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
