집 >웹 프론트엔드 >부트스트랩 튜토리얼 >부트스트랩 더블클릭 이벤트 작성 방법
부트스트랩 더블클릭 이벤트 작성 방법
- angryTom원래의
- 2019-07-19 11:03:302550검색
추천 튜토리얼: 부트스트랩 튜토리얼
# 🎜🎜#
bootstrap-treeview은 부트스트랩을 기반으로 하는 매우 멋진 jQuery 다중 레벨 목록 트리 플러그인입니다. 이 jQuery 플러그인은 Twitter Bootstrap을 기반으로 하며 뷰 트리, 목록 트리 등과 같은 일부 상속 트리 구조를 간단하고 우아한 방식으로 표시합니다. 그런데 왜 이 플러그인에는 자체 더블클릭 이벤트가 없는지 모르겠습니다.
이 두 번 클릭 이벤트 솔루션은 bootstrap-treeview와 함께 제공되는 두 가지 이벤트를 사용합니다."nodeSelected#🎜 🎜# " 및 "nodeUnselected"입니다. 트리뷰 노드를 두 번 클릭하면 선택한 이벤트와 선택되지 않은 이벤트가 트리거됩니다. 이 두 시간 사이의 시간 간격을 계산하면 이중 효과를 시뮬레이션할 수 있습니다. -클릭 이벤트. 더블 클릭 이벤트에서 마우스 왼쪽 버튼을 클릭하는 간격은 수동 조작의 경우 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 함수에서 비즈니스 로직을 사용자 정의할 수 있습니다.
위 내용은 부트스트랩 더블클릭 이벤트 작성 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!