ホームページ > 記事 > ウェブフロントエンド > ブートストラップダブルクリックイベントの書き方
ブートストラップダブルクリックイベントの書き方
- angryTomオリジナル
- 2019-07-19 11:03:302467ブラウズ
推奨チュートリアル: ブートストラップ チュートリアル
##bootstrap-treeview は、ブートストラップに基づいた非常にクールな jQuery マルチレベル リスト ツリー プラグインです。この jQuery プラグインは Twitter Bootstrap に基づいており、ビュー ツリー、リスト ツリーなどのいくつかの継承ツリー構造をシンプルかつエレガントな方法で表示します。しかし、このプラグインに独自のダブルクリック イベントがない理由はわかりません。
このダブルクリック イベント ソリューションでは、bootstrap-treeview nodeUnselected に付属する 2 つのイベント「nodeSelected」と「」を使用します。 "。ツリービュー ノードをダブルクリックすると、選択したイベントと選択されていないイベントがトリガーされます。これら 2 つの時間の間の時間間隔を計算すると、ダブルクリック イベントの効果をシミュレートできます。ダブルクリック イベントでのマウスの左ボタンの各クリック間隔は、手動操作の場合は 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()
上記のメソッドは主に選択したイベントと未チェックのイベント操作の対象が同じか、時間間隔が十分に小さいかどうかを判断するために使用されます。これら 2 つの条件を満たす顧客は、ダブルクリック イベントをトリガーしたいだけです。関数 customBusiness でビジネス ロジックをカスタマイズできます。
元の記事のアドレス: https://www.cnblogs.com/chengxuyuanzhilu/p/5114155.html
以上がブートストラップダブルクリックイベントの書き方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。