美观DropDownList

最新推荐文章于 2020-12-25 17:40:21 发布
最新推荐文章于 2020-12-25 17:40:21 发布
阅读量662 收藏
点赞数
分类专栏： asp.net 文章标签： function div null border object mozilla
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bjrwx2008/article/details/5894708
版权

CSS

.DrpBox_normal
{
    background:url(../../bg_input.gif) repeat-x bottom; /*图片路径可以自定义*/
    background-color:#ffffff;
    height:22px;
    line-height:22px;
    border:1px solid #afdae6;
    margin-left:2px;
    color:#4d4b4b;
    overflow:hidden;

}
.DrpBox_focus
{
    background:url(./bg_input.gif) repeat-x bottom;  /*图片路径可以自定义*/
    background-color:#ffffff;
    height:20px;
    line-height:20px;
    border:1px solid #afdae6;
    border-left:4px solid #33cc00;
    color:#4d4b4b;
    overflow:hidden;
}
.DrpBtn
{
    width:20px;
    height:22px;
    line-height:22px;
    float:left;
    background-image:url(./ico_drp_btn.gif);  /*图片路径可以自定义*/

    background-repeat:no-repeat;
    background-position:center;
}
.DrpOptionsBox
{
    margin-left:2px;
    border:solid 1px #afdae6;
    position:absolute;
    background-color:White;
    clear:both;
    height:22px;
    line-height:22px;
}
.DrpOptions
{
    text-indent:2px;
    height:22px;
    line-height:22px;
    clear:both;
    overflow:hidden;
    clear:both;
}
.DrpOptionsSeled
{
    text-indent:2px;
    background-color:#afdae6;
    height:22px;
    line-height:22px;
    clear:both;
}
.DrpOptionsOver
{
    text-indent:2px;
    background-color:#d7ecf2;
    height:22px;
    line-height:22px;
    clear:both;
}

.sDrpBox_normal
{
    margin-left:2px;
    background-color:#ffffff;
    height:22px;
    line-height:22px;
    border:1px solid #afdae6;
    border-left:1px solid #afdae6;
    color:#4d4b4b;
    overflow:hidden;
}

.DrpInput_normal
{
    text-indent:4px;
    background-color:#ffffff;
    height:22px;
    line-height:22px;
    color:#4d4b4b;
    overflow:hidden;
    float:left;
}

 

JS

Function.prototype.BindForEvent = function() {
    var __m = this, object = arguments[0], args = new Array();
    for (var i = 1; i < arguments.length; i++) {
        args.push(arguments[i]);
    }

    return function(event) {
        return __m.apply(object, [(event || window.event)].concat(args));
    }
};

var Class = {
    create: function() {
        return function() {
            this.init.apply(this, arguments);
        }
    }
}

Object.extend = function(destination, source) {
    for (var property in source) {
        destination[property] = source[property];
    }
    return destination;
}

function Offset(e) {
    var t = e.offsetTop;
    var l = e.offsetLeft;
    var w = e.offsetWidth;
    var h = e.offsetHeight - 2;
    var f = '';

    while (e = e.offsetParent) {
        f += (e.id || e.className || e.tagName) + e.offsetTop + "---";
        t += e.offsetTop;
        l += e.offsetLeft;
    }
    //alert(f);
    return { top: t, left: l, width: w, height: h }
}

function $() {
    var target = arguments[0];
    if (typeof target == "object") {
        return target;
    }
    return document.getElementById(target);
}
var Comboxs = [];
var Combox = Class.create();
Combox.prototype = {
    DrpID: '',
    offset: null,
    DrpList: null,
    SetHeight: 22, //高
    box: null,
    input: null,
    Btn: null,
    Optionsbox: null,
    seledOption: null,
    seledText: '',
    seledValue: '',
    bJoin: false, //是否联动
    JoinID: null, //联动对象ID
    w: 0,
    inputW: 0,
    s: 1, // 0  编辑页使用  1列表页显示
    NumOption: 0,
    init: function(objID, w, inputW, s) {
        this.s = s || 0;
        this.DrpID = objID
        this.DrpList = $(objID);
        if (!this.DrpList) return;
        this.w = w;
        this.inputW = inputW;
        //this.offset = Offset(this.DrpList);
        Comboxs.push([this.DrpID, this]);
        if (this.DrpList.getAttribute("joinDrp") != null && this.DrpList.getAttribute("joinDrp") != "") {
            this.bJoin = true;
            this.JoinID = this.DrpList.getAttribute("joinDrp");
        }
        this.CreateBox();
    },
    CreateBox: function() {
        var Div = document.createElement("DIV");
        if (this.s == 0) {
            Div.className = "DrpBox_normal";
        }
        else {
            Div.className = "sDrpBox_normal";
        }
        Div.setAttribute("id", this.DrpList.id + "_" + "BOX");
        Div.style.width = this.w + "px";
        if (this.DrpList.style.display == 'none') {
            Div.style.display = 'none';
        }

        this.DrpList.style.display = 'none';
        this.box = Div;

        var parentobj = this.DrpList.parentNode;
        if (!parentobj) return;
        parentobj.insertBefore(Div, this.DrpList);
        this.CreateInput();
        this.CreateButton();
        this.CreateOptions();
    },
    CreateInput: function() {
        var Div = document.createElement("DIV");
        //Div.style.position ="absolute";
        Div.setAttribute("id", this.DrpList.id + "_" + "INPUT");
        Div.className = "DrpInput_normal";
        Div.style.width = this.inputW + "px";
        Div.style.overflow = 'hidden';
        this.box.appendChild(Div);
        this.input = Div;
        this.input.onmouseout = this.HidOptionBoxOutInput.BindForEvent(this.input, this);
    },
    CreateButton: function() {
        var Div = document.createElement("DIV");
        Div.className = "DrpBtn";
        Div.setAttribute("id", this.DrpList.id + "_" + "Btn");
        this.Btn = Div;
        this.box.appendChild(Div);
        this.Btn.onmouseout = this.HidOptionBoxOutInput.BindForEvent(this.Btn, this);
    },
    CreateOptions: function() {
        this.Optionsbox = null;
        var Div = document.createElement("DIV");
        Div.style.display = 'none';
        Div.style.width = this.w + "px";

        Div.className = "DrpOptionsBox";
        Div.setAttribute("id", this.DrpList.id + "_" + "Optionsbox");

        if (!browser.msie) {
            var f = Offset(this.box);
            Div.style.top = f.top + document.documentElement.scrollTop + this.SetHeight + "px";
            Div.style.left = f.left + "px";
        }
        var parentobj = this.DrpList.parentNode;
        if (!parentobj) return;
        parentobj.insertBefore(Div, this.DrpList);
        this.Optionsbox = Div;
        var Nums = this.DrpList.options.length;
        this.NumOption = Nums;

        for (var i = 0; i < Nums; i++) {
            var DivOp = document.createElement("DIV");
            DivOp.innerHTML = this.DrpList.options[i].innerHTML;
            DivOp.setAttribute("value", this.DrpList.options[i].value);
            DivOp.setAttribute("index", i);
            DivOp.style.cursor = "default";
            if (this.DrpList.options[i].selected) {
                DivOp.setAttribute("selected", "true");
                DivOp.className = "DrpOptionsSeled";
                this.seledOption = DivOp;
                this.seledText = DivOp.innerHTML;
                this.seledValue = DivOp.getAttribute("value");
                this.input.innerHTML = this.seledText;
            }
            else {
                DivOp.setAttribute("selected", "false");
                DivOp.className = "DrpOptions";
            }
            Div.appendChild(DivOp);
            DivOp.onmouseover = this.Option_onMouseover.BindForEvent(DivOp, DivOp, this);
            DivOp.onmouseout = this.Option_onMouseout.BindForEvent(DivOp, DivOp, this);
            DivOp.onclick = this.Option_onClick.BindForEvent(DivOp, DivOp, this);
        }
        if (Nums > 6) {
            Div.style.overflow = "auto";
            Div.style.height = this.SetHeight * 6 + "px";
        }
        else {
            Div.style.height = this.SetHeight * Nums + "px";
        }
        this.Optionsbox.onmouseout = this.HidOptionBoxEnt.BindForEvent(this.box, this);
        this.input.onclick = this.ShowOptionBox.BindForEvent(this.input, this);
        this.Btn.onclick = this.ShowOptionBox.BindForEvent(this.input, this);
    },
    Option_onMouseover: function() {
        var obj = arguments[1];
        if (obj.className == "DrpOptionsSeled") {
            return;
        }
        else {
            obj.className = "DrpOptionsOver";
        }
    },
    Option_onMouseout: function() {
        var obj = arguments[1];
        if (obj.className == "DrpOptionsSeled") {
            return;
        }
        else {
            obj.className = "DrpOptions";
        }
    },
    CloseCombox: function(ojbID) {
        for (var i = 0; i < Comboxs.length; i++) {
            if (Comboxs[i][0] == ojbID) {
                continue;
            }
            if (Comboxs[i][1].Optionsbox.style.display == '') {
                Comboxs[i][1].Optionsbox.style.display = 'none';
            }
        }
    },
    Option_onClick: function() {
        var opt = arguments[1];
        var obj = arguments[2];

        var sel = opt.getAttribute("selected");
        if (sel == 'false') {
            obj.seledOption.setAttribute("selected", "false");
            obj.seledOption.className = "DrpOptions";
            opt.setAttribute("selected", "true");
            opt.className = "DrpOptionsSeled";
            obj.seledOption = opt;
            obj.seledText = opt.innerHTML;
            obj.seledValue = opt.getAttribute("value");
            obj.input.innerHTML = obj.seledText;
        }
        var i = parseInt(opt.getAttribute("index"));
        obj.DrpList.options[i].selected = true;
        obj.HidOptionBox(obj);
        if (sel == 'false') {
            if (obj.DrpList.onchange) {
                obj.DrpList.onchange();
            }
            if (obj.bJoin) {
                for (var i = 0; i < Comboxs.length; i++) {
                    if (obj.JoinID == Comboxs[i][0]) {
                        Comboxs[i][1].CreateOptions();
                        break;
                    }
                }
            }
        }
        if (obj.DrpList.onblur) {
            obj.DrpList.onblur(obj.DrpList);
        }
    },
    ShowOptionBox: function() {
        var obj = arguments[1];
        obj.CloseCombox(obj.DrpID); //关闭打开得
        if (obj.Optionsbox.style.display == '') {
            obj.HidOptionBox(obj);
            if (obj.DrpList.onblur) {
                obj.DrpList.onblur(obj.DrpList);
            }
            return;
        }
        obj.Optionsbox.style.display = '';
        if (obj.DrpList.onfocus) {
            obj.DrpList.onfocus(obj.DrpList);
        }
        if (this.s == 0) {
            obj.box.className = "DrpBox_focus";
        }
    },
    HidOptionBox: function() {
        var obj = arguments[0];
        obj.Optionsbox.style.display = 'none';
        if (this.s == 0) {
            obj.box.className = "DrpBox_normal";
        }
    },
    IsOptionsboxUp: function() {
        alert(1);
    },
    HidOptionBoxEnt: function() {
        var obj = arguments[1];
        var evt = arguments[0];

        var boxOffset = Offset(obj.box);
        var left = boxOffset.left;
        var tops = boxOffset.top;
        var w = boxOffset.width;
        var h = obj.SetHeight * obj.NumOption;
        var scrlTop = document.documentElement.scrollTop;

        if (obj.NumOption > 6) {
            h = obj.SetHeight * 6;
        }
        if (evt.clientX > left && evt.clientX < (left + w) && evt.clientY + scrlTop > tops + 2 && evt.clientY + scrlTop < (tops + h + obj.SetHeight)) {
            return;
        }
        obj.Optionsbox.style.display = 'none';
        if (obj.s == 0) {
            obj.box.className = "DrpBox_normal";
        }
        if (obj.DrpList.onblur) {
            obj.DrpList.onblur(obj.DrpList);
        }
    },
    HidOptionBoxOutInput: function() {
        var obj = arguments[1];
        var evt = arguments[0];

        var boxOffset = Offset(obj.box);
        var left = boxOffset.left;
        var tops = boxOffset.top;
        var w = boxOffset.width;
        var h = boxOffset.height;
        var scrlTop = document.documentElement.scrollTop;
        if (evt.clientX > left && evt.clientX < (left + w) && evt.clientY + scrlTop > tops + 5) {
            return;
        }
        obj.Optionsbox.style.display = 'none';
        if (obj.s == 0) {
            obj.box.className = "DrpBox_normal";
        }
        if (obj.DrpList.onblur) {
            obj.DrpList.onblur(obj.DrpList);
        }
    }
};
var userAgent = navigator.userAgent.toLowerCase();
var browser = {
    opera: /opera/.test(userAgent),
    msie: /msie/.test(userAgent) && !/opera/.test(userAgent),
    mozilla: /mozilla/.test(userAgent) && !/(compatible|webkit)/.test(userAgent)
};
function getEvent() {
    return window.event ? window.event : getEvent.caller.arguments[0];
};
function ResizeWin() {
    if (!browser.msie) {
        for (var i = 0; i < Comboxs.length; i++) {
            Comboxs[i][1].Optionsbox.style.top = Offset(Comboxs[i][1].box).top + 22 + "px";
            Comboxs[i][1].Optionsbox.style.left = Offset(Comboxs[i][1].box).left + "px";
        }
    }
}
if (!window.Event) {
    var Event = new Object();
}
Object.extend(Event, {
    add: function(element, name, observe, userCapture) {
        if (name == 'keypress' &&
        (navigator.appVersion.match(/Konqueror|Safari|KHTML/)
        || element.attachEvent))
            name = 'keydown';
        userCapture = userCapture || false;
        if (element.addEventListener) {
            element.addEventListener(name, observe, userCapture);
        }
        else if (element.attachEvent) {
            element.attachEvent('on' + name, observe);
        }
    }

})
Event.add(window, "resize", ResizeWin, true)

 

 

aspx页面
  <script language="javascript" type="text/javascript">
        new Combox("ddl_selectLineName",300,280);
        </script>

信息来源于网络没有经过使用暂时记录

AAA流星
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DropdownList的美化
02-20
网上转载的一个DropdownList的美化技巧
DropDownList下拉框多选
09-07
这些工具可以提供分组、搜索、自定义样式等功能，并使多选下拉框看起来更美观、更易于操作。 以jQuery的`chosen`库为例，首先需要引入jQuery和`chosen`库的CSS和JS文件，然后对`<select>`元素应用`chosen`方法： `...
美化 - DropDownList控件
weixin_30305735的博客
09-25 396
地址：http://www.baidufe.com/component/dropdownlist/index.html 效果： 引用JS文件： <link href="Js/DropDownList/dropdownlist.css" rel="stylesheet" /> <script src="Js/DropDownList/dr...
C# 生成自定义美化DropDownList 下拉框
kongwei521的专栏
03-15 3801
效果图：ASPX代码： &lt;asp:DropDownList ID="drpZhiWutSort" runat="server"&gt;&lt;/asp:DropDownList&gt;C#代码： using (LeaderTripDataContext db = new LeaderTripDataContext()) { va...
带图片的，多列的DropDownList(转自孟宪会之精彩世界)
小喽喽的技术专栏
02-18 426
 WebDropDownList.aspx@ Page language="c#" Codebehind="WebDropDownList.aspx.cs"validateRequest="false"  AutoEventWireup="false" Inherits="eMeng.WebDropDownList" %>HTML>HEAD>title>模拟下拉列表框title>meta 
DropDownList 下拉列表
qq_45133065的博客
02-07 131
前端： <asp:DropDownList ID="ddlDepartment" runat="server"></asp:DropDownList> 后端： protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { ...
Dropdownlist下拉出现gridview
12-26
通过分析这些文件，我们可以学习如何将Dropdownlist与GridView结合，创建一个既实用又美观的用户界面组件。对于初学者，这是一个很好的实践项目，可以帮助理解前后端交互、数据绑定和动态UI构建等核心概念。对于经验...
dropdownlist下拉框实现多选
04-10
为了让多选下拉框看起来更加美观，我们可以使用CSS进行定制。例如，我们可以改变下拉箭头的样式，调整选项的高度，或者在鼠标悬停时更改背景色： ```css select[multiple] { width: 100%; height: 200px; border...
asp.net Dropdownlist结合CheckBoxList多选下拉框
01-14
10. **CSS样式**：为了使界面更美观，可以通过CSS对Dropdownlist和嵌入的CheckBoxList进行样式定制，调整字体、颜色、边距等样式属性。 通过以上技术，我们可以构建出一个既具有Dropdownlist简洁外观，又具备...
dropdownlist中绑定图片
09-13
在网页设计中，为了提升用户体验和界面美观度，有时候我们需要在下拉选择框（Dropdown List）中添加图片。"dropdownlist中绑定图片"这个话题，就是关于如何在HTML的`<select>`元素或者使用JavaScript库如jQuery、Vue...
JavaScript 仿DropDownList控件 html下拉列框美化
10-16
由于html的Select元素式样不更改,自已用Javascript写了DropDownList控件,支持分组.调用相当方便,不用更改原来的HTML结构.调用方法:DropDownList.bind(selectId).例如: --------------------------------- <div style="float: left"> DropDownList2: </div> <div style="float: left"> <select id="searchCategory2" name="searchCategory2"> <option selected="selected" value="35">gdfgfdgjjjjjjjjjjjj</option> <option value="0">└All Categories</option> <optgroup label="---------------------------"> </optgroup> <option value="52">Acrylic Beads sfsf sdfsdfsdffffffffffff </option> <option value="28">Fimo Beads</option> </select> <script type="text/javascript"> DropDownList.bind("searchCategory2"); </script> </div>
asp.net DropDownList自定义控件，让你的分类更清晰
01-02
看到Discuz是2个下拉列表进行合并的，网上找了一些资料，然后写了这个小源码，在这里和大家分享一下！ 运行效果图，如下所示（深黑的地方选不中，因为那是上一级的分类）： 项目结构图如下所示： Controls类库SmartDropDownList.cs代码如下所示：SmartDropDownList.cs 代码如下: using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Text; 5 using System.Web.UI.WebControls; 6 using S
DropdownList自定义样式
06-12
一共需要另外的两个文件，一个Combox.js和一个Combox.css文件。其代码在下边，另外需要在aspx页面的里加入 两行代码，一行是引入css样式表，一行是引入js文件，文件路径可以自定义。此外，还需要写一段js代码，注册一下DropDownList控件。代码如下： //注册select //DropDownList1为DropDownList控件的Id,300为线框显示的宽度，280为箭头显示的宽度 new Combox("DropDownList1",300,280);
DropDownList模糊查询
11-09
好看又实用的下拉框模糊查询，Jquery实现的，方便操作数据
可输入的DropDownList 下拉列表 Asp
12-13
在ASP（Active Server Pages）开发中...通过以上技术，我们可以创建一个既美观又实用的可输入DropDownList控件，提高用户在网页上的操作体验。在ASP开发中，理解和掌握这些知识点对于构建高效、易用的Web应用至关重要。
ASP.NET 自定义WEB控件：DropDownList改进版
西湾行者僧
04-19 2040
自带的DropDownList控件，能实现动态绑定数据源，但无法实现动态版定值和或项。再GridView等控件中模板列，要实现动态绑定DropDownList控件的项集合和选择项。则需要编写代码。如在ItemDataBound事件中实现。本控件则可以在模板列中一次搞定：如下调用：                    aspEx:DropDownListEx ID="City" run
asp:dropdownlist如何去掉三角箭头_PPT中的箭头还可以怎样美化？
weixin_34711401的博客
12-25 347
大家好，我是秋小叶，这里是秋叶 PPT 的「Office 干货」栏目。箭头是制作 PPT 时经常会使用到的一个元素，但平常我们见到的箭头用法十分单调，基本都是用PPT自带的箭头。那么，箭头能如何运用和美化呢？今天小叶分享的这篇文章，相信能给大家带来新的思路。作者：马志强来源：设计甲(ID：designsjj)以往的文章里已经分享过很多关于 PPT 中线条的用法，今天呢，想跟大家聊一聊 P...
30个漂亮的HTML5和CSS3下拉菜单
热门推荐
刘书的IT博客
12-05 1万+
一些漂亮的HTML5和CSS3下拉菜单列表。这些例子可以帮助你得到灵感。让我们一起来看看这些下拉菜单。  　　Dark Menu: Pure CSS3 Two Level Menu 　　Pure CSS3 LavaLamp Menu 　　HTML5/CSS3 Gray Navigation Menu 　　How to Build and Enhanc
简单的dropdownlist三级互动
01-11
5. CSS: 为了使Dropdownlist看起来美观且易用，我们需要使用CSS进行样式定制。这包括设置颜色、字体、尺寸、悬停效果等，以及解决各级Dropdownlist在屏幕上的布局问题。 6. jQuery或Vanilla JavaScript库: 虽然可以...
dropdownlist默认值
最新发布
05-18
在 ASP.NET 中，可以通过设置 DropDownList 控件的 SelectedIndex 属性或 SelectedValue 属性来设置默认值。 如果要设置默认选项为列表中的第一个选项，可以将 SelectedIndex 属性设置为 0。 如果要设置默认选项为...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值