6,下拉菜单(单选)

-----后台

 using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Text;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }

    public string GetzNodes()
    {
        StringBuilder sb = new StringBuilder();
        sb.Append("<script>");
        sb.Append("var zNodes =[");
        //*****************************************加入遍历代码
        for (int i = 0; i < 100; i++)
        {
            if (i > 50)
            {
                sb.Append(SetParametes(i.ToString(), "1", "b"));
            }
            else
            sb.Append(SetParametes(i.ToString(), "-1", "a"));
        }
        //********************************************************
        sb.Append("];");
        sb.Append("</script>");
        return sb.ToString();
    }
    /// <summary>
    /// 设置节点
    /// </summary>
    /// <param name="id">id</param>
    /// <param name="pid">父级id</param>
    /// <param name="name">名称</param>
    /// <param name="open">是否展开?</param>
    /// <returns>返回节点</returns>
    private string SetParametes(string id, string pid, string name,bool open=false)
    {
        StringBuilder sb = new StringBuilder();
        sb.Append("{");
        sb.AppendFormat("id:{0},",id);
        sb.AppendFormat("pId:{0},",pid);
        if (open)
        {
            sb.AppendFormat("name:\"{0}\",", name);
            sb.Append("open: true");
        }
        else
        {
            sb.AppendFormat("name:\"{0}\"", name);
        }
        sb.Append("},");
        return sb.ToString();
    }
}

-----前台

 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="../css/demo_new.css" rel="stylesheet" type="text/css" />
    <link href="../css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
    <script src="../js/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script src="../js/jquery.ztree.core-3.5.js" type="text/javascript"></script>
    
    
    
</head>
<%=GetzNodes()%>
<script type="text/javascript">
    var setting = {view: {dblClickExpand: false},data: {simpleData: {enable: true}},callback: {beforeClick: beforeClick,onClick: onClick}};
    $(document).ready(function () {$.fn.zTree.init($("#treeDemo"), setting, zNodes); });
    function beforeClick(treeId, treeNode) {
        ////解开则选中不了父节点
        //var check = (treeNode && !treeNode.isParent);  
        //if (!check) alert("只能选择城市...");
        return true;
    }
    //点击选择触发
    function showMenu() {
        var cityObj = $("#citySel");
        var cityOffset = $("#citySel").offset();
        $("#menuContent").css({ left: cityOffset.left + "px", top: cityOffset.top + cityObj.outerHeight() + "px" }).slideDown("fast");
        $("body").bind("mousedown", onBodyDown);
    }
    function hideMenu() {
        $("#menuContent").fadeOut("fast");
        $("body").unbind("mousedown", onBodyDown);
    }
    function onBodyDown(event) {
        if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length > 0)) {
            hideMenu();
        }
    }
    $(document).ready(function () {
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    });
    //选中一个之后触发
    function onClick(e, treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo"),nodes = zTree.getSelectedNodes(),v = "";
        $("#citySel").val(nodes[0].name);
        alert(nodes[0].id + "," + nodes[0].name);
        hideMenu();
    }

</script>
<body>
    <form id="form1" runat="server">
        <!------------------Treediv--------------------->
        <div class="zTreeDemoBackground left">
      <ul class="list">
       <li class="title"><asp:TextBox ID="citySel" ReadOnly="true" runat="server"></asp:TextBox>&nbsp;<a id="A1" href="#" onclick="showMenu(); return false;">选择</a></li>
      </ul>
     </div>
        <div id="menuContent" class="menuContent" style="display:none; position: absolute;">
         <ul id="treeDemo" class="ztree" style="margin-top:0; width:160px;"></ul>
        </div>
        <!------------------Treediv--------------------->
          
    </form>
</body>
</html>

整合包下载:http://down.51cto.com/data/1967063

时间: 2024-10-24 19:27:14

6,下拉菜单(单选)的相关文章

关于VB.NET 菜单栏ToolStripMenu 下拉菜单单选功能的实现

首先定义一个方法: 1 Private Sub SingleCheck(ByVal sender As Object) 2 RawDataToolStripMenuItem.Checked = False 3 TransToolStripMenuItem.Checked = False 4 SmoothToolStripMenuItem.Checked = False 5 LineFitToolStripMenuItem1.Checked = False 6 sender.Checked = T

JavaScript---网络编程(11)--DHTML技术演示(4)-单选框/下拉菜单/添加文件

本节讲述单选框/下拉菜单/添加文件,综合css,html和JavaScript. 单选框: 实现的功能是:(类似平时的性格测试) 先隐藏一部分页面,然后通过点击单选框来显示. 再通过选项的选择-(每个选项有不同的积分)积分的多少来给出评语 演示代码: <html> <head> <title>DHTML技术演示---radio的使用</title> <meta http-equiv="content-Type" content=&q

yii框架中的下拉菜单和单选框

yii中的下拉菜单: 第一种: <?= $form->field($model, 'parent_id')->dropDownList(ArrayHelper::map($data,'cat_id','new_cat_name') ,['prompt' => '请选择父级分类']) ? 第二种: <?= $form->field($model, 'banner_address')->dropDownList(ArrayHelper::map(address::fi

制作下拉菜单(PopupList)

怎样判断是否应当使用下拉菜单 下拉菜单,就是将一系列的选项隐藏,通过单击某一个控件将会弹出一个包含这些选项的列表,在其中选择想要的选项.这样做不但可以节省屏幕空间,也可以让用户在进行选择时更加方便快捷. 下拉菜单本质上还是一个单选框,与Toggle的功能有一些类似,对于下拉菜单玩家必须选择一个选项(有一个默认的初始选项),在同一时间也只能选择一个选项(单选性质).在游戏开发过程中,如果碰到了以下特点的需求,就可以考虑用下拉菜单了. (1)有一系列选项需要玩家做出选择,这些选项是有限多的. (2)

DOM(十)使用DOM设置单选按钮、复选框、下拉菜单

1.设置单选按钮 单选按钮在表单中即<input type="radio" />它是一组供用户选择的对象,但每次只能选一个.每一个都有checked属性,当一项选择为ture时,其它的都变为false. 先贴沙漠化一个例子: <script type="text/javascript"> function getChoice() { var oForm = document.forms["uForm1"]; var aCh

css自定义下拉菜单,通过伪类控制展开隐藏

公司最近要做组件库,一些单选框,复选框,下拉菜单都需要美观自定义, 闲余时间做了一个(对浏览器要求较高的)下拉菜单的组件. /*********实现功能 start **************/ 通过css伪类:focus实现下拉菜单基本功能 select: 点击菜单(动画过渡)展开,再次点击(动画过渡)收起; 并保证点击页面空白处和选择option同样(动画过渡)收起菜单. option: 限制5条内容的高度,超出则滚动条,反之则自适应高度; /***********实现功能end*****

JS基础12-DOM访问列表框、下拉菜单的常用属性

一.DOM访问列表框.下拉菜单的常用属性如下: form 返回列表框.下拉菜单所在的表单对象 length 返回列表框.下拉菜单的选项个数 options 返回列表框.下拉菜单里所有选项组成的数组 selectedIndex 返回下拉列表中选中选项的索引 type 返回下拉列表的类型,多选的话返回select-multiple,单选返回select-one 二.使用options[index]返回具体选项所对应的常用属性: defaultSelected 返回该选项默认是否被选中 index 返

DOM访问HTML元素的方式,DOM访问表单控件的常用属性和方法,DOM访问列表框、下拉菜单的常用属性,DOM访问表格子元素的常用属性和方法,DOM对HTML元素的增删改操作

DOM访问HTML元素的方式 为了动态地修改HTML元素,须先访问HTML元素.DOM主要提供了两种方式来访问HTML元素: 根据ID访问HTML元素:通过document对象调用getElementById()方法来查找具有唯一id属性值的元素. 利用节点关系访问HTML元素.常用的属性和方法如下: parentNode 返回当前节点的父节点 previousSibling 返回当前节点的前一个兄弟节点 nextSibling 返回当前节点的后一个兄弟节点 childNodes 返回当前节点的

selemiun 下拉菜单、复选框、弹框定位识别

一.下拉菜单识别 对下拉框的操作,主要是通过Select 类里面的方法来实现的,所以需要new 一个Select 对象(org.openqa.selenium.support.ui.Select)来进行操作 public void selectDemo() throws InterruptedException { driver.get("http://tieba.baidu.com/f/search/adv?red_tag=v3168911135"); driver.manage()

HTML+JS+CSS 实现下拉菜单

最近在看视频学习做一些HTML+JS+CSS的实例,第一个是实现下拉菜单. 5.7 制作的思路是:1.静态网页的制作 2.动态特效实现菜单的显示和隐藏(三种方法:css.JavaScript.jQuery) 3.浏览器的兼容问题(低版本IE可能不支持等) 在用css实现时,由于盒子模型有自己默认的margin和padding值,所以要reset. 有一点比较有疑问的实,老师在视频里说position:absolute要和left.top同时使用.这是为什么?在实现的时候,我并没有使用left和t