网站导航：网学原创论文原创专题网站设计最新系统原创论文论文降重发表论文论文发表 UI设计定制论文答辩PPT格式排版期刊发表论文专题

当前位置：网学 > 设计资源 > .Net编程 > 正文

.net实现51job地区选择效果

论文降重修改服务、格式排版等获取论文论文降重及排版论文发表相关服务

最终效果图：

难点：定位，其实不难，取得父元素（省）的位置，然后设置市（初始隐藏）的位置 = 父元素位置偏移n个px
id为pop 的div是模式窗口
说一下流程吧
1.ajax读出所有省市
2.市放在一个div里面，初始是隐藏的，然后给每一个省加一个onclick事件，控制这个省的市显示还是隐藏
3.完成。
说得简单了点，不过看代码就看明白了！有不明白可以在这里留言，我会关注！
html代码

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="test_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>

    <script type="text/javascript" src="../js/jquery-1.3.2.min.js"></script>



    <script>

    var xmlHttp;

function createXMLHttpRequest()

{

    if(window.ActiveXObject)

    {

        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

    }

    else if(window.XMLHttpRequest)

    {

        xmlHttp = new XMLHttpRequest();

    }

}

function startRequest()

{

    createXMLHttpRequest();

    try

    {

        xmlHttp.onreadystatechange = handleStateChange;

        xmlHttp.open("GET", "Default.aspx?ct=1", true);

        xmlHttp.send(null);

    }

    catch(exception )

    {

    alert(exception);

        alert("请稍候再试!");

    }

}

function handleStateChange()

{

    if(xmlHttp.readyState == 4)

    {

        if (xmlHttp.status == 200 || xmlHttp.status == 0)

        {

            var param = xmlHttp.responseText;

            $("#divlist").append(param);

            alert(param);

        }

    }

}

function cc(){

    $('#divdialog').fadeIn('fast');

    $('#pop').css({'width': '100%','height': '100%','display': 'inline'});

    startRequest();

    }



    function selectitem(obj){

    $("#txt1").val(obj);

    }



    function showc(obj,objname){

    if($("#divct"+obj).text() == ""){

    selectitem(objname); //如果没有市，就选择省

    }else{

      var pos = $("#apro"+obj).position();   //父元素位置

      var left = pos.left+40+ "px"; //偏移量

      var top = pos.top+15+ "px";

      $("#divct"+obj).css({

        "top": top,

        "left":left,

        "background":"#F3FBEA",

        "color":"#666600"

    }).show();



    setTimeout(hidect2(obj),4000);//4秒定时关闭

    }

    }



    function hidect(obj){

    $("#divct"+obj).hide();

    }

    function hidect2(obj){

    return function(){hidect(obj);}

    }

    function closect(){

    $("#divdialog").hide();

    $('#pop').css({'width': '0','height': '0','display': 'none'});

    }







    </script>



<style>

.proul{list-style:none}

.proul li{width:100px;height:30px;float:left; cursor:pointer}

.ctul{list-style:none}

.ctul li{width:100px;height:30px;float:left; cursor:pointer}

.ctdiv{display:none;position: absolute; border:1px #666600 solid; width:auto; height:auto}

.dtl{font-size:12px; color:White; font-weight:bold; cursor:pointer}

.f_r{float:right}

.f_l{float:left}

</style>

</head>

<body>

    <form id="form1" runat="server">



        <input id="Button1" type="button" value="选择地区" onclick="cc();" />

    <div id="pop" style="background-color:#000000;position: absolute ;top:0;left:0;z-index:1;display:none;filter:Alpha(opacity=30);"></div>



    <div id="divdialog" style="border: #4b8500 1px solid;display: none; left: 217px; background-image: url(../images/t_bg.jpg); width: 477px;  background-repeat: repeat-x;

        position: absolute; top: 172px; height: 350px; background-color: #faffeb; z-index:99999">

        <div style="padding-right: 5px; overflow: hidden; line-height: 25px; height: 25px;text-align: right">

            <span  style="float: left; padding:4px 0px 4px 0px" ><img src="../images/t_bg_l.gif" width="16" height="16" /></span>

            <span class="dtl f_l">请选择地区</span>

            <span onclick="closect();" class="dtl f_r">[关闭]</span>

               <span onclick="closect();$('#txt1').val('不限');" class="dtl f_r">[不限]</span>

        </div>

        <div id="divlist" style="font-size: 12px; margin: 0px auto; width: 462px; color: #000; height:320px; overflow:scroll; text-align:left" runat="server">



            </div>



    </div>

        <input id="txt1" type="text" />

    </form>

</body>

</html>

后台输出代码：

private void Bind()

    {

        IList<heyjob.Model.c_Province> listP = bllP.DataTableToList(bllP.GetAllList().Tables[0]);

        string arr = string.Empty;

        string ct = string.Empty;

        for (int i = 0; i < listP.Count; i++)

        {

            IList<heyjob.Model.c_City> listC = bllC.DataTableToList(bllC.GetList("provinceid='" + listP[i].ProvinceID + "'").Tables[0]);

            arr += "<ul class='proul'><div id='divpro" + listP[i].ProvinceID + "'>";

            arr += "<li><a id='apro" + listP[i].ProvinceID + "' onclick=showc('" + listP[i].ProvinceID + "'" +",'" + listP[i].ProvinceName + "');>" + listP[i].ProvinceName + "</a></li>";

            arr += "</div></ul>";

            ct += "<div class='ctdiv' id='divct" + listP[i].ProvinceID + "'><ul class='ctul'>";

            for (int j = 0; j < listC.Count; j++)

            {

                if (listC.Count > 0)

                {

                    if (listC[j].ProvinceID == listP[i].ProvinceID)

                    {

                        if (j == 0)

                        {

                            ct += listP[i].ProvinceName + "<br/><br/>";

                        }

                        ct += "<li><a onclick=selectitem('" + listC[j].CityName + "');>" + listC[j].CityName + "</a></li>";

                    }

                }

            }

            ct += "</ul></div>";

            arr += ct;

        }

        Response.Write(arr);

        Response.End();

    }

上一篇资讯： ASP.NET(C#)定时执行一段代码

下一篇资讯： ASP.NET页面的默认回车事件

相关资讯

网学推荐

·原创论文的写法

·论文数据图表制作

·论文排版通过检测检测

·提供系统开发和运行服务

·提供原创参考资料

·档案托管服务

·原创参考论文导航

·查重服务维普检测低于30%

·我们提供原创参考论文和原创的参

·原创的论文资料参考节省时间！

·论文格式排版格式核对！

·UI设计定制、界面设计

·程序和网站等UI设计定制！

·原创参考论文参考定制！

·职称和论文发表,可联系业务我们

·本科毕业设计(论文)答辩指南

·程序制作专家

原创论文

·论文选题-查重参考论文

·参考论文大全

·电气工程及其自动化

·电子信息工程

·公共关系学

·公共事业管理

·公路交通运输

文章排行榜

· 自然框架的源代码、Demo、数据库、

· WebService身份验证

· 不要迷失在技术的海洋中

· .net完美操作cookies

· 取出文本中的图片地址

· 谷歌眼中的搜索未来

· GridView显示隐藏某一列

· 谈谈关于MVP模式中V-P交互问题【附

· ASP.NET网站预编译概述

· 详解.net内存管理

· json教程之C#开发json解析类

· 用FCKEditor编辑器上传图片、FLASH

· C#调用WebService时的身份验证

· WinForm窗体之间交互的一些方法

· VS中创建自定义SQLRule

· 三种方法在Infopath中实现数据有效

· 如何使用和开发自定义配置节

· C#获得当前文件夹内所有文件的名称

设为首页 | 加入收藏 | 网学首页 | 原创论文 | 计算机原创

版权所有网学网 [Myeducs.cn] 您电脑的分辨率是像素
Copyright 2008-2020 myeducs.Cn www.myeducs.Cn All Rights Reserved 湘ICP备09003080号常年法律顾问：王律师