Heim >Web-Frontend >Bootstrap-Tutorial >So schreiben Sie ein Bootstrap-Doppelklick-Ereignis
So schreiben Sie ein Bootstrap-Doppelklick-Ereignis
- angryTomOriginal
- 2019-07-19 11:03:302581Durchsuche
Empfohlene Tutorials: Bootstrap-Tutorial
bootstrap-treeview ist ein sehr cooles jQuery-Plug-in für mehrstufige Listenbäume, das auf Bootstrap basiert. Dieses jQuery-Plugin basiert auf Twitter Bootstrap und zeigt einige Vererbungsbaumstrukturen wie Ansichtsbäume, Listenbäume usw. auf einfache und elegante Weise an. Aber ich weiß nicht, warum dieses Plug-in kein eigenes Doppelklick-Ereignis hat.
Diese Doppelklick-Ereignislösung verwendet die beiden Ereignisse „nodeSelected“ und „“, die mit Bootstrap-Treeview NodeUnselected geliefert werden ". Wenn Sie auf einen Baumansichtsknoten doppelklicken, werden das ausgewählte und das nicht ausgewählte Ereignis ausgelöst. Durch Berechnen des Zeitintervalls zwischen diesen beiden Zeitpunkten kann die Auswirkung des Doppelklickereignisses simuliert werden. Das Intervall zwischen jedem Klick der linken Maustaste bei einem Doppelklick-Ereignis beträgt bei manueller Bedienung 300 Millisekunden.
Der Code lautet wie folgt:
<!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:
Wichtige Punkte:
Die wichtigsten globalen Variablen:
lastSelectedNodeId, lastSelectedNodeId
Die wichtigste Methode:
clickNode()
Die obige Methode wird hauptsächlich verwendet, um zu bestimmen, ob das Ziel des ausgewählten Ereignisses und des ungeprüften Ereignisses ist Bedienung und Zeit sind gleich. Ist das Intervall klein genug? Kunden, die diese beiden Bedingungen erfüllen, möchten lediglich ein Doppelklick-Ereignis auslösen. Die Geschäftslogik kann in der Funktion customBusiness angepasst werden.
Ursprüngliche Artikeladresse: https://www.cnblogs.com/chengxuyuanzhilu/p/5114155.html
Das obige ist der detaillierte Inhalt vonSo schreiben Sie ein Bootstrap-Doppelklick-Ereignis. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!