时间:2021-05-25
复制代码 代码如下:
<!--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>
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
zTree插件之多选下拉菜单实例代码css和js复制代码代码如下:html复制代码代码如下:确定自定义的js代码复制代码代码如下:varzTree1;varse
HTML5单选框、复选框、下拉菜单、文本域单选框的实例代码,代码如下所示:1单选框代码:效果:复选框2复选框代码:篮球足球羽毛球唱歌画画敲代码阅读效果;下拉菜单
本文介绍了ReactNative仿美团下拉菜单的实例代码,最近也在学习ReactNative,顺便分享给大家在很多产品中都会涉及到下拉菜单选择功能,用的最好的当
取下拉菜单选中项的文本;获取和设置下拉菜单的值;清空下拉菜单;给下列菜单添加元素;取单选框值;单选或复选按钮的选择;取复选框值;判断单选或复选框是否被选中;元素
本章将具体讲解下拉菜单的交互。使用下拉菜单(Dropdown)插件,您可以向任何组件(比如导航栏、标签页、胶囊式导航菜单、按钮等)添加下拉菜单。下拉菜单.dro