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:, pId:, name:"北京"},
{id:, pId:, name:"天津"},
{id:, pId:, name:"上海"},
{id:, pId:, name:"重庆"},
{id:, pId:, name:"河北省", open:true},
{id:, pId:, name:"石家庄"},
{id:, pId:, name:"保定"},
{id:, pId:, name:"邯郸"},
{id:, pId:, name:"承德"},
{id:, pId:, name:"广东省", open:true},
{id:, pId:, name:"广州"},
{id:, pId:, name:"深圳"},
{id:, pId:, name:"东莞"},
{id:, pId:, name:"佛山"},
{id:, pId:, name:"福建省", open:true},
{id:, pId:, name:"福州"},
{id:, pId:, name:"厦门"},
{id:, pId:, name:"泉州"},
{id:, pId:, 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>)) {
hideMenu();
}
});
});
</script>
转载请注明:http://www.tea119.com
zTree插件之单选下拉菜单代码的更多相关文章
- zTree插件之多选下拉菜单代码
zTree插件之多选下拉菜单代码 css和js <!--ztree树结构--> <link rel="stylesheet" type="text/cs ...
- 可控制导航下拉方向的jQuery下拉菜单代码
效果:http://hovertree.com/texiao/nav/1/ 代码如下: <!DOCTYPE html> <html> <head> <meta ...
- z-tree官方提供的下拉菜单案例
1.z-tree官方提供的下拉菜单案例 <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - selec ...
- jquery插件制作,下拉菜单
要求输入框点击出现下拉菜单,并实现以下功能: 1.首先点击地点标签页,选择好地点: 2.自动显示相应节点标签页显示节点信息,选择好节点 3.自动显示相应的连接点,选择连接点,连接点被选中并被传送的输入 ...
- ztree连接数据库,实现下拉菜单
$(document).ready(function(){ var treeObj = $("#treeDemo"); $.fn.zTree.init(treeObj, setti ...
- js 导航栏多项点击显示下拉菜单代码
<!DOCTYPE html> <html> <head> <title>Dropdown</title> <!--<link ...
- 小米网css3导航下拉菜单代码
效果:http://hovertree.com/texiao/css3/19/ 代码如下: <!doctype html> <!-- W3C规范 --> <html la ...
- yii2框架dropDownList的下拉菜单用法介绍
Yii2.0 默认的 dropdownlist 的使用方法. 代码如下 复制代码 <?php echo $form->field($model, 'name[]')->dropDo ...
- Bootstrap单按钮的下拉菜单
简介 把任意一个按钮放入 .btn-group 中,然后加入适当的菜单标签,就可以让按钮作为菜单的触发器了. 插件依赖 按钮式下拉菜单依赖下拉菜单插件 ,因此需要将此插件包含在你所使用的 Bootst ...
随机推荐
- AJAX联想查询的例子
//通过输入值的不断改变而改变(按键事件)提示内容的功能,然后可以选着你想要的内容填充进来. html主要代码:test1.html <!DOCTYPE html><html> ...
- 第2章 使用JavaScript
学习要点: 1.创建一张HTML页面 2.<Script>标签解析 3.JS代码嵌入的一些问题
- 弹出层js让DIV居中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 安装配置redis
1.1查看当前系统环境 查看当前系统版本信息: 查看当前网络连通情况: 1.2使用yum安装 1.3确认redis的安装目录 1.4查看\修改配置文件 1.5启动redis服务并验证 1.6使用tel ...
- 了解C++默认编写并调用哪些函数
概念:编译器可以暗自为class创建default构造函数.copy构造函数.copy assignmengt构造函数,以及析构函数. 比如你写下:struct Node { }; 这就好像你写下这样 ...
- js控制只允许输入数字
avascript 只允许输入数字有很多方法,总结如下 1,只允许输入数字和小数点. <input onKeypress="return (/[\d.]/.test(String.fr ...
- 图解call、apply、bind的异同及各种实战应用演示
一.图解call.apply.bind的异同 JavaScript中函数可以通过3种方法改变自己的this指向,它们是call.apply.bind.它们3个非常相似,但是也有区别.下面表格可以很直观 ...
- ios-NSMutableAttributedString 更改文本字符串颜色、大小
NSString * string = [NSString stringWithFormat:@"您的号码是%@号",[self backString:dic[@"ran ...
- Yii源码阅读笔记(二十七)
Theme 类,即一个应用的主题,主要通过替换路径实现主题的应用,里边的方法为获取根路径和根链接,以及应用主题的方法: namespace yii\base; use Yii; use yii\hel ...
- CGContextAddCurveToPoint 的深入理解
CGContextAddCurveToPoint 这个函数看上去一般般,仔细琢磨发现不简单,为什么三个点就可以确定一条曲线呢? 网上查了查,小小研究了一下下. 1.关键知识 窃取自 (http://l ...