`
wangshaofei
  • 浏览: 281624 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

模拟html的select控件

    博客分类:
  • js
阅读更多

 

demo 地址 : http://dailylist.sinaapp.com/html_select/demo.html

 github :https://github.com/wangshaofei/html_select

 

html代码:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="html_select.css" />
    <title>test html select in jquery extends</title>
</head>
<body>
    <h2>模拟传统的html的select控件</h2>
    <div>
        <dl>
            <dt>1、重新定义select控件 和下拉框的样式,跨浏览器样式不变。</dt>
                <dd> chrome firefox ie8</dd>
            <dt>2、提交表单时还是提交的select的值。</dt>
            <dt>3、使用简单。</dt>
            <dd><pre>$('#select的id').dropDown({
                'class' : 自定义的样式的class,
                'callback' : 回调函数
            })</pre><dd>
        </dl>

    </div>
	<div class="wrapdiv">
        <table>
            <tr>
                <td>年龄:</td>
                <td>
                    <select id="age" class="select input_text_city input_text">
                         
                    </select>岁
                </td>
            </tr><tr>
                <td>身高:</td>
                <td>
                   <select id="height" class="select input_text_city input_text">
                        
                    </select>cm                    

                </td>
            </tr>
        </table>
        

		
	</div>
    <div style="clear:both;"></div>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
	<script type="text/javascript" src="html_select.js"></script>
	<script type="text/javascript">
     
     $(function(){
        
        // 填出年龄下拉框的值
        for (var i = 24; i < 72; i++) {
            var o = $('<option>');
            o.attr('value',i).text(i).appendTo($('#age'));
        };
         // 填出身高下拉框的值
        for (var i = 160; i < 190; i++) {
            var o = $('<option>');
            o.attr('value',i).text(i).appendTo($('#height'));
        };

        // 应用dropDown插件
     	$('#age').dropDown({
            'class' : 'age',   // 添加自定义样式
            'callback' : function(){   // 添加回调函数
                alert($(this).val());
            }
        });
     	$('#height').dropDown({
            'class' : 'height',
            'callback' : function(){
                alert($(this).val());
            }
        });
     })
	</script>
</body>
</html>

 

 

js代码

 

/**
 *  一个jquery的拓展。
 *  这个拓展是用来需要美化html的select控件的html页面。
 *     原理:1、用css将select的样式写好(定义class),
 *           2、影藏select
 *           3、创建div作为select的选择框并赋予select的样式,创建ul作为下拉框
 *           4、添加事件
 *           5、修改成需要的样式。
 *     使用方法:
 *           1、$('#select的id').dropDown({
 *                  'class' : 添加的class名称,
 *                  'callback' : 毁掉函数,
 *               })。
 */

//应用严格模式
'use strict';

// 添加jquery拓展
$.fn.extend({
    // dropDown 方法
    'dropDown': function(config) {
        // src select控件对象
        var src = $(this);
        src.hide();
        
        // 创建新的选择框
        var d = $('<div>');
        d.attr('id', 'dropDown_' + src.attr('id'));
        d.addClass($(src).attr('class'));
        
        
        // 设置默认值
        d.text(src.find('option[value=' + src.val() + ']').text() !== '' ? src.find('option[value=' + src.val() + ']').text() : '请选择');
        d.css({
            'display': 'inline-block',
            'cursor': 'pointer',
            'line-height': src.height() + 'px',
            'text-align': 'center',
            'width': 'auto',
            'padding': '0 30px 0 20px'
        });
        
        // 点击事件
        d.click(function(e) {
            // 防止事件穿透
            var e = e || window.event;
            e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
            // 隐藏其他select的下拉框
            hideAll();
            // 获得option
            var os = $('#' + src.attr('id')).find('option');
            // 如果option为空就返回
            if (os.length <= 0) return false;
            // 创建下拉框
            var div = $('<div/>');
            var div2 = $('<div/>');
            div2.addClass('clearfix');
            div.addClass('div_model');
            if(config && config['class']){
                div.addClass(config['class']);
            }            
            var ul = $('<ul/>');
            for (var i = 0; i < os.length; i++) {
                var li = $('<li/>');
                li.text($(os[i]).text());
                li.attr('value', $(os[i]).val());
                li.click(function(e) {
                    var e = e || window.event;
                    e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
                    d.text($(this).text());
                    // 赋值原select控件
                    src.val($(this).attr('value'));
                    hideAll();
                    if (config && config.callback) {
                        // 绑定回调函数
                        config.callback.call(src);
                    }
                });

                ul.append(li);
            }
            ul.appendTo(div2);
             div2.appendTo(div)
            // 弹出框定位
            div.css({
                'top': e.pageY,
                'left': e.pageX
            });
            div.appendTo($('body'));
        });

        src.after(d);

        $('body').click(function() {
            $('.div_model').remove();
        });

        function hideAll() {
            $('.div_model').remove();
        }
    }
});

 

css代码

ul,li{margin: 0px; padding: 0px;}
.hide{display: none;}
.wrapdiv {height:500px;width:300px; padding: 20px;  border: 1px solid black;}  
.div_model {position: absolute; border: 1px solid #ccc; padding: 5px; background: white;width: 300px;height: 200px;overflow: auto;}    
.div_model ul ,.div_model ul li {list-style: none; margin: 0; padding: 0;}    
.div_model ul li{float: left;padding: 1px 5px;margin: 1px; cursor: pointer;}  
.div_model ul li:hover{background: red; color: white;}  
.input_text_city {width:86px; margin-right:12px;}  
.select{background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAGCAMAAAArBzSwAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTQzMzEyNjVDMjhGMTFFMkIxQjBFN0MyOTMyNTYzN0UiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTQzMzEyNjZDMjhGMTFFMkIxQjBFN0MyOTMyNTYzN0UiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo1NDMzMTI2M0MyOEYxMUUyQjFCMEU3QzI5MzI1NjM3RSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo1NDMzMTI2NEMyOEYxMUUyQjFCMEU3QzI5MzI1NjM3RSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pgh6wScAAABFUExURXZ1c9bW1oqKirGvsPHx8Wtpar6+vq+vr4SEhHRzcfX08/7+/qinpdPS0I6Ni+Lh4Gtra2xqa/39/WxraWtqaP///////7wS/CgAAAAXdFJOU/////////////////////////////8A5kDmXgAAAEJJREFUeNosyFkCgCAMA1HcdwWS5v5HtWjn703qcikkkBeTl2yYQJB91WcdtxPbaGHtycf1s9ke8Aw2y+a1BvUKMAArlgaEjk4vogAAAABJRU5ErkJggg==) no-repeat right center;}  
.input_text{border:1px solid #cccccc;height:32px;width:190px;}  

/* 清楚浮动 */
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }  
.clearfix { display: inline-block; }   
html[xmlns] .clearfix { display: block; }  
* html .clearfix { height: 1%; }  

/* 年龄 */
.div_model.age {border-radius: 10px; padding: 10px;width: 297px;height: 178px;height: 180px\9;}
.div_model.age div {border-top: 1px #ccc solid;border-left: 1px #ccc solid;}
.div_model.age li {border-right:1px #ccc solid; border-bottom: 1px solid #ccc;padding: 5px 10px;margin: 0px;}

/* 身高 */
.div_model.height {border-radius: 10px; padding: 10px;width: 226px;height: 178px;height: 180px\9;}
.div_model.height div {border-top: 1px #ccc solid;border-left: 1px #ccc solid;}
.div_model.height li {border-right:1px #ccc solid; border-bottom: 1px solid #ccc;padding: 5px 10px;margin: 0px;}

 

0
2
分享到:
评论

相关推荐

    SELECT控件 美化

    1. **模拟SELECT控件**:使用HTML、CSS和JavaScript创建一个视觉上与SELECT控件相似但样式可控的元素,通常是通过div、ul等元素构建,然后通过JavaScript监听事件,实现与SELECT控件的交互。 2. **事件绑定**:使用...

    jquery 自定义select控件

    总结,jQuery自定义Select控件的核心在于使用JavaScript和CSS构建一个新的交互组件,通过监听事件来模拟原生Select的功能。同时,我们可以根据实际需求进行扩展,以满足更复杂的应用场景。通过这种方式,我们不仅...

    处理html 控件select的js函数

    为了美化`&lt;select&gt;`控件,可以结合CSS来调整其样式,然后用JavaScript处理交互行为,例如模拟自定义的下拉菜单效果。 9. **异步加载和AJAX** `XMLHttpRequest`或`fetch`API可用于异步获取数据,并动态填充`...

    用html实现的combox控件

    HTML ComboBox控件是一种在网页上实现下拉列表功能的元素,它结合了输入框和下拉列表的优点,用户可以手动输入选项或者从预定义的列表中选择。在本主题中,我们将深入探讨如何使用HTML来创建一个具备自定义功能的...

    JavaScript模拟select

    ### JavaScript模拟select控件知识点详解 #### 一、引言 在前端开发中,有时我们需要对浏览器原生的`&lt;select&gt;`元素进行定制化处理,比如实现更丰富的样式或者增加额外的功能。本篇将深入探讨如何使用纯JavaScript...

    用JS模拟来select下拉框控件的特效 可用作下拉菜单来用.zip

    然而,原生的HTML Select元素在样式控制和交互效果上存在局限性,这使得开发者经常寻求JavaScript(JS)解决方案来模拟下拉框控件,以实现更丰富的视觉效果和用户体验。本压缩包中的内容就是一种利用JS来模拟下拉框...

    美漂亮的实用div+css模仿select下拉控件

    在网页设计中,`div+css`是一种常见的布局方式,用于构建页面的结构和样式,而`select`控件则是HTML中的一个基本元素,用于创建下拉列表供用户选择。在本项目中,“美漂亮的实用div+css模仿select下拉控件”是一个...

    js下用层来实现select的title提示属性.docx

    不同的浏览器对select控件的title属性的支持不同,因此我们需要使用JavaScript来模拟title提示属性的行为。通过使用JavaScript和HTML层,我们可以实现跨浏览器的select控件title提示属性,并提供了一个更加用户友好...

    模拟select带checkbox全选反选取消插件tomcat发布使用

    综上所述,这个插件是为了解决HTML Select控件不支持多选的问题而设计的,通过模拟Select并结合复选框功能,提供了一个可自定义、易部署的解决方案。在JSP和Tomcat环境下,它可以方便地集成到Java Web应用中,为用户...

    js+CSS实现模拟华丽的select控件下拉菜单效果

    在进行知识点讲解之前,我们首先需要理解标题和描述的内容,本文的主要内容是利用JavaScript(js)和CSS技术,实现一个比传统HTML select控件更加美观和功能丰富的下拉菜单效果。以下知识点将围绕实现这一效果所涉及...

    jQuery模拟select下拉框插件.zip

    "jQuery模拟select下拉框插件"就是这样一个工具,它提供了更丰富的交互性和定制性,相比原生的HTML下拉框控件,能够为用户带来更好的体验。下面将详细探讨这个插件的原理、功能以及如何使用。 首先,原生的`&lt;select...

    html多选下拉框 ,CheckBox的Select组件 可多选的下拉框

    在HTML中,创建一个可多选的下拉框通常涉及到`&lt;select&gt;`元素与`&lt;option&gt;`元素的组合,但为了实现多选功能,我们需要使用`&lt;input type="checkbox"&gt;`和自定义的JavaScript或者利用现代浏览器支持的Web组件技术。...

    JS模拟select 下拉框组件

    在网页开发中,Select元素是常用的数据选择控件,但其样式和交互方式往往不能满足设计师和开发者对于用户体验的高要求。为了解决这个问题,开发人员通常会使用JavaScript来模拟Select下拉框组件,以实现更丰富、更...

    用javascript和css模拟select的脚本

    为了改善用户体验,开发者常使用JavaScript和CSS来模拟自定义的select控件。这样可以更容易地通过样式和脚本来达到更加美观和用户友好的效果。 ### CSS在模拟Select中的作用 CSS(层叠样式表)负责页面的布局、...

    div模拟select下拉菜单美化效果实例

    `select`元素是HTML中内置的表单控件,用于创建下拉列表,但其样式控制有限,难以实现自定义的美化效果。本文将深入探讨如何使用`div`模拟`select`下拉菜单,并实现美化效果。 首先,我们需要了解`select`的基本...

    .net控件开发实例

    服务器控件如Label、Button、TextBox等,具有丰富的功能和事件处理机制,而HTML控件则更接近于原生HTML,如和&lt;select&gt;。自定义控件则是开发者根据需求定制的特殊控件,它们可以继承自System.Web.UI.Control类或特定...

    html自定义select空间

    4. **事件监听**:添加事件监听器来处理用户的操作,如点击事件、键盘导航事件等,确保自定义Select具有与原生控件相似的可访问性。 5. **响应式设计**:为了适应不同设备和屏幕尺寸,自定义Select需要考虑响应式...

    super select

    "Super Select"是一款用于模拟传统HTML `&lt;select&gt;` 控件的前端组件,旨在提供更丰富的功能和更好的用户体验。这款组件允许用户不仅可以下拉选择,还能直接输入文字,通过自动模糊匹配来快速找到目标选项。它特别强调...

    下拉多选控件CheckboxSelect_v2.8.8

    CheckboxSelect_v2.8.8的核心在于使用HTML、CSS和JavaScript构建一个模拟下拉框的效果。它通过创建一个隐藏的`&lt;select&gt;`元素来存储所有选项,同时创建一个自定义的UI,包含一个可点击的按钮和显示当前选中项的区域。...

Global site tag (gtag.js) - Google Analytics