zTree插件之单选下拉菜单实例代码

 更新时间:2013年11月07日 08:49:26   作者:   我要评论
zTree插件之单选下拉菜单实例代码。需要的朋友可以过来参考下,希望对大家有所帮助

复制代码 代码如下:

<!--ztree树结构-->
<link rel="stylesheet" type="text/css" href="assets/ztree/css/zTreeStyle.css">
<link rel="stylesheet" type="text/css" href="assets/ztree/css/zTreeIcons.css">

<script src="assets/js/jquery.js"></script>

<!--ztree树-->
<script src="assets/ztree/js/jquery.ztree-2.6.js"></script>


复制代码 代码如下:

<div class="input-append">
                            <input class="input-medium" id="citySel" readonly type="text" value="">
                            <a id="menuBtn" class="btn" type="button"><i class="icon-search"></i></a>
                        </div>

 

<div id="DropdownMenuBackground" style="display:none; position:absolute;z-index:999;height:300px; min-width:163px; background-color:white;border:1px solid;overflow-y:auto;overflow-x:auto;">
    <ul id="dropdownMenu" class="tree"></ul>
</div>


复制代码 代码如下:

<script type="text/javascript">
    var zTree1;
    var setting = {
        isSimpleData: true,
        treeNodeKey: "id",
        treeNodeParentKey: "pId",
        fontCss: setFont,
        callback: {
            beforeClick: zTreeOnBeforeClick,
            click: zTreeOnClick
        }           
    };
    var zNodes = [
        {id:1, pId:0, name:"北京"},
        {id:2, pId:0, name:"天津"},
        {id:3, pId:0, name:"上海"},
        {id:6, pId:0, name:"重庆"},
        {id:4, pId:0, name:"河北省", open:true},
        {id:41, pId:4, name:"石家庄"},
        {id:42, pId:4, name:"保定"},
        {id:43, pId:4, name:"邯郸"},
        {id:44, pId:4, name:"承德"},
        {id:5, pId:0, name:"广东省", open:true},
        {id:51, pId:5, name:"广州"},
        {id:52, pId:5, name:"深圳"},
        {id:53, pId:5, name:"东莞"},
        {id:54, pId:5, name:"佛山"},
        {id:6, pId:0, name:"福建省", open:true},
        {id:61, pId:6, name:"福州"},
        {id:62, pId:6, name:"厦门"},
        {id:63, pId:6, name:"泉州"},
        {id:64, pId:6, name:"三明"}
    ];
   

    function setFont(treeId, treeNode) {
        if (treeNode && treeNode.isParent) {
            return {color: "blue"};
        } else {
            return null;
        }
    }
    function showMenu(){
        var cityObj = $("#citySel");
        var cityOffset = $("#citySel").offset();
        $("#DropdownMenuBackground").css({left:cityOffset.left+"px",top:cityOffset.top+cityObj.outerHeight()+"px"}).slideDown("fast");   
    }   
    function reloadTree(){
        hideMenu();
        zTree1 = $("#dropdownMenu").zTree(setting, zNodes);
    }
    function hideMenu() {
        $("#DropdownMenuBackground").fadeOut("fast");
    }
    function zTreeOnBeforeClick(treeId, treeNode) {
        var check = (treeNode && !treeNode.isParent);
        if (!check) alert("只能选择城市...");
        return check;
    }

    function zTreeOnClick(event, treeId, treeNode) {
        if (treeNode) {
            var cityObj = $("#citySel");
            cityObj.attr("value", treeNode.name);
            hideMenu();
        }
    }

    $(document).ready(function(e) {
        reloadTree();
        $("#menuBtn").bind("click",
            function(){
                if($("#DropdownMenuBackground").css("display") == "none"){
                    showMenu();
                }
                else{
                    hideMenu();
                }
            }
        );
        $("body").bind("mousedown",
            function(event){
                if (!(event.target.id == "DropdownMenuBackground" || $(event.target).parents("#DropdownMenuBackground").length>0)) {
                    hideMenu();
                }
            });   
    });
</script>

相关文章

  • JavaScript获取数组最小值和最大值的方法

    JavaScript获取数组最小值和最大值的方法

    这篇文章主要介绍了JavaScript获取数组最小值和最大值的方法,涉及javascript中min与max方法的使用技巧,非常简单实用,需要的朋友可以参考下
    2015-06-06
  • 关于TypeScript模块导入的那些事

    关于TypeScript模块导入的那些事

    Typescrit的模块机制与es6的模块基本类似,也提供了转换为amd,es6,umd,commonjs,system的转换,下面这篇文章就来给大家详细介绍了关于TypeScript模块导入的那些事,需要的朋友可以参考借鉴,下面来一起看看吧
    2018-06-06
  • 运用js教你轻松制作html音乐播放器

    运用js教你轻松制作html音乐播放器

    这篇文章主要为大家详细介绍了如何运用js教你轻松制作html音乐播放器,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • smartcrop.js智能图片裁剪库

    smartcrop.js智能图片裁剪库

    为了测试这个智能识别插件,我试了很多壁纸图片,都能智能裁剪出图片的主体部分,转而尝试了一下chrome和Firefox以及IE,发现IE只有10以上的版本才支持,chrome和Firefox支持,手机浏览器不支持,这到底是啥黑科技??今天我们就来详细看看
    2015-10-10
  • React Native中Mobx的使用方法详解

    React Native中Mobx的使用方法详解

    这篇文章主要给大家介绍了关于React Native中Mobx的使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-12-12
  • javascript实现控制浏览器全屏

    javascript实现控制浏览器全屏

    这篇文章主要介绍了javascript实现控制浏览器全屏的代码分享给大家,十分的实用,有需要的小伙伴可以参考下。
    2015-03-03
  • js自定义事件及事件交互原理概述(二)

    js自定义事件及事件交互原理概述(二)

    上一篇的目的只是让大家简单的理解自定事件是如何模拟出来的,大家不难发现会有很多缺陷,本篇主要已解决上一篇的问题为主,感兴趣的朋友可以参考,或许本文对你有所帮助
    2013-02-02
  • 快速学习JavaScript的6个思维技巧

    快速学习JavaScript的6个思维技巧

    在这篇文章中,我将介绍六个思维技巧来帮助你更快地学习JavaScript,并成为一个更快乐、更富有成效的程序员。
    2015-10-10
  • javascript中的event loop事件循环详解

    javascript中的event loop事件循环详解

    这篇文章主要给大家介绍了关于javascript中event loop事件循环的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-12-12
  • JavaScript中实现异步编程模式的4种方法

    JavaScript中实现异步编程模式的4种方法

    这篇文章主要介绍了JavaScript中实现异步编程模式的4种方法,本文讲解了回调函数、事件监听、发布/订阅、Promises对象4种方法,需要的朋友可以参考下
    2014-09-09

最新评论