欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

jquery自定义下拉列表示例_表单特效

程序员文章站 2022-05-18 19:53:46
...
自从上次做了JQ自定义分页插件和表格插件后,就没在自定义过插件了,这一个月都在用linq和ef,基本前端都没怎么去碰了,今天有个同事说有个项目需要在下拉框里面带有复选框,本来想网上找下插件的,一想,其实这功能也并不难,于是就自己做了一个,也趁机再次熟悉下JQ自定义插件吧,好了,先附上效果图先:

jquery自定义下拉列表示例_表单特效

看上去没怎么难吧,其实就是强化JQ,免得太久没用,生疏了。好了。附上我的代码:

复制代码 代码如下:

(function($){

var option={
isEdit:false, //是否可以编辑:默认是否
Listheight:200, //下拉框高度
ListWidth:0, //下拉框长度
//数据源
data:[
{"value":1,"text":"选择1"},
{"value":2,"text":"选择2"},
{"value":3,"text":"选择3"},
{"value":4,"text":"选择4"}
]
}
//开始创建下拉框
function Start(obj)
{
if(!option.isEdit)
{
obj.attr({"readonly":"readonly"});
}
var myList=$("");
var ul=$("
    ");
    ul.css({"list-style":"none","margin":"0px","padding":"2px"});
    myList.css({"border":"1px solid #D9E5F3","position":"absolute","overflow-y":"scroll","background-color":"#fff","font-size":"12px"});
    if(option.Listheight {
    option.Listheight=200;
    }
    myList.height(option.Listheight);
    if(option.ListWidth {
    option.ListWidth=obj.width()
    }
    myList.width(option.ListWidth);
    //默认位置是在创建元素的下方
    myList.offset({"top":obj.offset().top+obj.outerHeight(),"left":obj.offset().left});
    var data=option.data;

    if(data.length>0)
    {
    for(i=0;i {
    var li=$("
  • ");
    var ListSon=$("");
    ListSon.change(function(){
    if(this.checked)
    {
    obj.val(obj.val()+$(this).val());
    }
    else
    {
    obj.val(obj.val().replace($(this).val(),""));
    }
    })
    myList.mouseover(function(){
    myList.show();
    })
    myList.mouseout(function(){
    myList.hide();
    })
    var span=$("");
    span.text(data[i].text);
    ListSon.val(data[i].value+";");
    li.append(ListSon);
    li.append(span);
    ul.append(li);
    }
    }
    myList.append(ul);
    myList.appendTo("body");
    myList.hide();

    FoucsShow($(obj),myList);
    }
    // 当获取到焦点使出现该下拉框
    function FoucsShow(obj,myList)
    {
    obj.focus(function(){myList.show()})
    }
    $.fn.createList=function(newoption)
    {
    $.extend(option,newoption);
    Start($(this));

    }
    })(jQuery);
  • 前台调用:

    复制代码 代码如下:

    $("#d2").createList({
    //数据源
    data:[
    {"value":"C#","text":"C#"},
    {"value":".NET","text":".NET"},
    {"value":"Java","text":"Java"},
    {"value":"JSP","text":"JSP"},
    {"value":"C","text":"C"},
    {"value":"C++","text":"C++"},
    {"value":"javascript","text":"javascript"},
    {"value":"ajax","text":"ajax"},
    {"value":"json","text":"json"},
    {"value":"xml","text":"xml"},
    {"value":"sql server","text":"sql server"},
    {"value":"xml","text":"Mysql"},
    {"value":"oracle","text":"oracle"},
    {"value":"JQuery","text":"JQuery"},
    {"value":"Ext js","text":"Ext js"},
    {"value":"CSS3","text":"CSS3"},
    {"value":"HTML5","text":"HTML5"}
    ]
    });
    $("#d3").createList();
    })
    相关标签: 下拉列表