(原创)手写下拉菜单美化简易插件_下拉列表是否可以手输入内容

deer332025-03-02技术文章52

在切图网(qietu.com)一个项目中 需要涉及到 下拉菜单美化,做过前端的人都知道,网页中有几大元素 是css美化不了的,是作为开发者来讲的比较苦恼的事情,现在对于手机webapp项目可以通过css3 伪类等方法可以实现无需js的美化(该方法写在了切图slicy框架里面), 对于pc,我们为了确保兼容性,所以必须要用到js 了。

其中用到了jquery的wrap函数(在元素外围添加包裹代码),prepend函数(在元素开头添加代码)。

图中红色区域为已经写好js插件以后的雏形

html结构

js代码

  1. /*下拉菜单美化*/

  2. $(function(){

  3. $('.ui-select').each(function(){

  4. var obj = $(this);

  5. obj.wrap('

    ');

  6. obj.parent().prepend('

    '+ obj.val() +'

    ');

  7. obj.change(function(){

  8. obj.parent().find('h4').html($(this).val());

  9. })

  10. })

  11. })

花絮,一开始的html结构是这样, 是“半智能”的写法,需要手写一个满足js实现的html基本结构:

后来,为了代码可阅读和整洁, 最终这些基本结构的html 也通过js来添加了。

这样,红色区域h4 可以任意添加样式美化了。

原文链接:
http://www.qietu.cn/thread-15205-1-1.html

------------------------------

切图网推出c4r移动适配技术服务,前端交流加切图网微信:qietuwang