부트스트랩 더블클릭 이벤트 작성 방법-부트스트랩 튜토리얼-php.cn

부트스트랩 더블클릭 이벤트 작성 방법

angryTom

풀어 주다： 2019-07-19 11:04:28

원래의

2573명이 탐색했습니다.

부트스트랩 더블클릭 이벤트 작성 방법

　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;
            }            
            //初始化树形结构列表            $(&#39;#tree&#39;).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(){                //节点选中时触发                $(&#39;#tree&#39;).on(&#39;nodeSelected&#39;, function(event, data) {
                    clickNode(event, data)
                });                //节点取消选中时触发                $(&#39;#tree&#39;).on(&#39;nodeUnselected&#39;, function(event, data) {
                    clickNode(event, data)
                });
            }            $(document).ready(function() {               customDblClickFun();            });        </script>
    </body></html>

로그인 후 복사

렌더링: # ㅋㅋㅋ # 가장 중요한 것 전역 변수:

　lastSelectedNodeId, lastSelectedNodeId

부트스트랩 더블클릭 이벤트 작성 방법

가장 중요한 것 메소드: # 🎜🎜#

　　　clickNode()　위 메소드는 주로 선택된 이벤트와 체크되지 않은 이벤트의 대상 여부를 판별하는 데 사용됩니다. 작업은 동일하고 시간 간격이 충분히 작습니까? 이 두 가지 조건을 충족하는 고객은 더블 클릭 이벤트를 트리거하기를 원합니다. customBusiness 함수에서 비즈니스 로직을 사용자 정의할 수 있습니다.

원본 기사 주소: https://www.cnblogs.com/chengxuyuanzhilu/p/5114155.html

위 내용은 부트스트랩 더블클릭 이벤트 작성 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!