jQuery插件jquery.inputer.1.1-可输入的下拉框

点击在新窗口中浏览此图片

/*
selectInput v1.1
code:by Deeka
QQ:80140281
e-mail:huangdijia@163.com
技术群:24810664
修正:1.FF与IE下的样式小问题
     2.INPUT长度问题
支持多个input(特别鸣谢==,cssrain,及帮忙测试的群友们)
*/
$.fn.inputer = function(o) {
   var obj = this;
   jQuery.each(obj,function(i,obj_sub){
     var inputerId = "_inputer" + obj_sub.id;
    
     var iset = $("input[id=" + obj_sub.id + "]").offset();
     $("input[id=" + obj_sub.id + "]").after("<select id=/"" + inputerId + "/" name=/""+ inputerId +"/"></select>");
    
     //IE和FF有一点点区别
     $("select[id=" + inputerId + "]").width($(obj_sub).width() + ($.browser.msie?6:4) + "px");
    
     $("select[id=" + inputerId + "]").css({position:"absolute",
       display:"none",
       left:function(){return iset.left;},
       top:function(){return $.browser.msie?iset.top:iset.top + 1 +"px"},
       clip:"rect(1px " + ($("select[id=" + inputerId + "]").width() + ($.browser.msie?6:8) + "px") + " " + ($("select[id=" + inputerId + "]").height() + ($.browser.msie?1:2) + "px") + " " + ($("select[id=" + inputerId + "]").width() - 15 + "px") + ")",
       "font-size":obj.css("font-size")
     });
    
     var option = "<option value=''></option>";
     $.each(o,function(ovar,opt){
       option += '<option value=' + ovar + '>' + opt + '</option>';      
     });
    
     $("select[id=" + inputerId + "]").append(option)
     .css({display:"block"})
     .change(function(){
       $("input[id=" + obj_sub.id +"]").val($("option:selected",this).html());
     });
   });
};


相當簡單的調用:
<script src="jquery-1[1].2.2.min.js"></script>
<script src="jquery.inputer.1.1.js"></script>
<script>
<!--
$(function(){
   $("#name").inputer({1:"http://www.sina.com",2:"htpp://www.china.com",3:"http://www.qq.com"});
   $("#name1").inputer({1:"www.sina.com",2:"www.china.com",3:"www.qq.com"});
   $("#name2").inputer({1:"新浪网",2:"中华网",3:"腾讯网"});
   $("#name3").inputer({1:"周星驰投资地产大赚 骑单车带女友庆功",2:"徐静蕾变身当主持人 光脚拎鞋显率性一面",3:"梁咏琪担当残奥志愿者 祥云小屋客串讲解员"});
});
-->
</script>


在线预览及下载
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值