Home >Web Front-end >Bootstrap Tutorial >How to write bootstrap double-click event
How to write bootstrap double-click event
- angryTomOriginal
- 2019-07-19 11:03:302582browse
Recommended tutorial: Bootstrap tutorial
##bootstrap-treeview is a very cool jQuery multi-level list tree plug-in based on bootstrap. This jQuery plug-in is based on Twitter Bootstrap and displays some inheritance tree structures, such as view trees, list trees, etc., in a simple and elegant way. But I don’t know why this plug-in doesn’t have its own double-click event.
This double-click event solution uses the two events "nodeSelected" and "" that come with bootstrap-treeview nodeUnselected". If you double-click on a treeview node, the selected event and the unselected event will be triggered. Calculating the time interval between these two times can simulate the effect of the double-click event. The interval between each click of the left mouse button in a double-click event is 300 milliseconds for manual operation.
The code is as follows:
<!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>Rendering:
Key points:
## The most important global variables:lastSelectedNodeId
,lastSelectedNodeId
clickNode()
The above method is mainly used to determine Whether the target of the selected event and the unchecked event operation is the same and whether the time interval is small enough. Customers who meet these two conditions just want to trigger a double-click event. You can customize business logic in function
. Original article address: https://www.cnblogs.com/chengxuyuanzhilu/p/5114155.html
The above is the detailed content of How to write bootstrap double-click event. For more information, please follow other related articles on the PHP Chinese website!