jquery 插件 DropdownList

最近闲来无事做了一个基于jquery的DropdownList 有需要的朋友可以很方便的设置并使用它。

先发个DEMO,请下载:demo 

好,看如何使用它。

把js放到你想调用方法的控件下,例如:

<input id="MyID" style="width:200px;" aBout="Dw_DropDownList" config="{method:'FunDemo',pagesize:11,empty:0,bgcolor:'#FECFEA'}" />

然后引入JS,就这样,它就可以使用了。

以下为全部的配置参数
 {
  method:'方法名称', //指定自定义方法,不能为空 
  page:1, //是否分页 1分页 0不分
  pagesize:10, //每页限制条数
  width:250, //下拉列表宽
  height:290, //下拉列表高
  bgcolor:'#EEF9FF', //下拉列表鼠标移动后背景颜色
  bordercolor:'#003366', //下拉列表边框颜色
  title:'none', //下拉列表头部说明 为none时不显示 否则是指定的文字
  timer:200, //间隔搜索时间 毫秒
  empty:1 //为空是否搜索 1是搜索 0 不搜
  }

以下为自定义方法:

function FunDemo(id){
 $l(id).Source({
  Typ:"json",//采用的方式 返回JSON形式
  Url:"data.ashx?wd=", //url地址 按键搜索并指定参数
  Med:function(dat){
   $l(id).Each(function(i){    
  //在此构造自定义数据
    //显示内容
    var content=dat.List[i].s1;
         content+="·"+dat.List[i].s3;
         content+="("+dat.List[i].s5+")";
         content+="<br />"+dat.List[i].s2;
         content+="·"+dat.List[i].s4;
         content+="("+dat.List[i].s6+")";
    //获取的文本值
    var text=dat.List[i].s3;
    //获取的VALUE值
    var value=dat.List[i].s8;
    //自定义数据结束
    //text:为可见文本 value:为值 如相反调换即可
    $l(id).DataBind(content,text,value);
   },1); 
  }
 });
}

看是不是很方便。代码全部都在附件里有想看的朋友可以直接编辑查看,这里就不再多说。

posted on 2009-12-10 12:37  Dw-Widget  阅读(1536)  评论(2)    收藏  举报