DIV+jQuery实现自定义漂亮下拉列表的仿真效果

  • 作者:39℃
  • 来源:56gee
  • 更新时间:2013-08-12 12:22:59
  • 点击:13062
[0分]

随着PAD类和智能手机等硬件的日趋成熟,网页内容在上面的UI表现方式显得越来越被重视了。尤其是WEB内置的组件,它们本身的“外壳”是比较普通的,甚至跟华美的UI界面显得有点格格不入。于是设计师们开始精心酿造个性的各种组件外衣。当然,要使这些新衣裳动起来,可少不了前端设计师的开发功劳了。

今天给大家分享的是“用DIV+jQuery实现自定义漂亮下拉列表”的原理和代码。

其实此实例主要有两个核心应用——

1、jQuery的slideUp和slideDown(部分代码:)。

  
  if(ul.css("display")=="none"){  
      ul.slideDown("fast");  
  }else{  
      ul.slideUp("fast");  
  }  

它们的用法一样,主要是实现目标对象向上/向下的伸缩效果,具体语法及其参数值可百度一下,这里不作详细介绍了。

2、借用WEB的隐藏组件来保存选中的对象属性值,然后改变下拉列表相应的text值。当然也可以用全局变量来保存属性,但这里不使用变量是为了拓展灵活——即使页面的表单提交后仍能动态显示自定义下拉列表对应的text(可以通过设定inputSel的初始值)。

   
$(Select_56geeID+" ul li a").click(function(){   
    var txt = $(this).text();   
    $(Select_56geeID+" cite").html(txt);   
    var value = $(this).attr("SelVal");   
    inputSel.val(value);   
    $(Select_56geeID+" ul").hide();   
       
});   
       
$(Select_56geeID+" ul li a").each(function(index, element) {   
    if($(this).attr(’SelVal’)==inputSel.val()){   
        $(Select_56geeID+" cite").html($(this).text());   
    }   
});   

最后把整个实例的源码打包给大家分享一下!【下载

收藏内容
评分

特别说明:本站所有资源仅供学习与参考,请勿用于商业用途。若转载请注明来自56gee.com中的“来源”。

栏目精华