`
mutongwu
  • 浏览: 448355 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

简单下拉框模拟

    博客分类:
  • CSS
阅读更多

<!doctype html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>Image preview example</title>
<script type="text/javascript" src="lib/jquery.js"></script>
<style type="text/css">
	
	
/*下拉模拟*/
.simSelect { display:inline-block;position: relative;border: 1px solid #ccc; line-height: 34px;text-align:center; }
.simSelect:after{position: absolute;top:50%;margin-top:-4px;right:1px;border: 9px solid transparent;border-top: 8px solid #999;width: 0; height: 0;  content: '';}
.simSelect .selected { padding: 0 2em;margin:0; height: 34px; overflow: hidden; cursor: default;}
.simSelect.hover .dropDownGroup{display:block;}
.simSelect ul,.simSelect li{list-style-type:none;margin:0;padding:0;}
.simSelect a {text-decoration: none;}
.simSelect .dropDownGroup { display: none; position: absolute; width:100%;top:-1px;left:-1px;z-index: 5; background: #fff; border: 1px solid #ccc;}
.simSelect .dropDownGroup li { list-style-type:none;cursor: default; height: 34px; line-height: 34px; }
.simSelect .dropDownGroup a { display: block; line-height: 34px; padding: 0 15px; color: #3a3a3a; }
.simSelect .dropDownGroup a:hover{color:#2c8fd2;}
.simSelect .dropDownGroup .select,
.simSelect .dropDownGroup a:hover { background: #e8e8e8; }
	
</style>
</head>

<body>
<div id="imagePreview" style="margin:100px auto;width:500px;">
				<div class="simSelect">
        			<p class="selected" data-val="1">1张</p>
        			<ul class="dropDownGroup">
        				<li class="selOpt" data-val="1"><a href="javascript:;">1张</a></li>
        				<li class="selOpt" data-val="2"><a href="javascript:;">2张</a></li>
        				<li class="selOpt" data-val="3"><a href="javascript:;">3张</a></li>
        			</ul>
    			</div>
</div>


<script>
$(function(){
	$(document.body).on('mouseenter','.simSelect',function(){
		$(this).addClass("hover");
	}).on('mouseleave','.simSelect',function(e){
		$(this).removeClass("hover");
	}).on('click','.simSelect .selOpt',function(){
		var el = $(this),
			target = el.parent().prev(".selected");
		target.attr("data-val",el.attr("data-val"));
		target.text(el.text());
		el.closest(".simSelect").removeClass("hover");
	});
})
</script>
</body>
</html>

分享到:
评论

相关推荐

    jquery 实现的下拉框模拟

    在“jquery 实现的下拉框模拟”中,我们讨论的是如何利用 jQuery 来创建功能丰富的、自定义化的下拉选择器,以替代原生 HTML 的 `&lt;select&gt;` 元素。这种模拟下拉框可以提供更灵活的设计和交互体验。 首先,原生的 ...

    div模拟下拉框

    "多样式下拉框模拟"意味着该技术可以适应不同的设计需求。通过CSS预处理器(如Sass或Less)或者CSS变量,可以方便地创建和切换不同的样式主题。每个样式可能涉及到颜色方案、字体大小、布局结构等方面的差异。 5. ...

    DIV模拟select下拉框

    jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理和动画等功能,使得开发这样的模拟下拉框变得更加简单。通过jQuery,我们可以轻松地监听用户的行为,如点击事件,然后动态显示或隐藏下拉选项,同时...

    简单下拉框美化

    "简单下拉框美化"这个主题旨在提升下拉框的视觉效果和用户体验,使其在满足基本功能的同时,也能更好地融入网站的整体设计风格。下面我们将深入探讨下拉框的美化方法、关键技术和实现步骤。 首先,基础的...

    移动端自定义下拉框【H5+js+css】

    在自定义下拉框中,我们通常会用到`&lt;select&gt;`和`&lt;option&gt;`标签来创建基本的下拉列表,但为了达到自定义效果,我们可能需要创建自定义的HTML结构,比如使用`&lt;div&gt;`、`&lt;ul&gt;`和`&lt;li&gt;`等元素来模拟下拉框的外观和行为。...

    各类多选下拉框代码1.zip

    例如,我们可以用jQuery模拟一个多选下拉框,同时提供搜索、分页等功能。 三、Bootstrap和其他框架 Bootstrap是流行的前端开发框架,它提供了预设的CSS样式和JavaScript插件,可以快速构建美观的多选下拉框。...

    Freemarker通用select下拉框

    例如,一个简单的单元测试可能如下所示: ```java @Test public void testGetDropdownList() { // 测试数据 String entityType = "country"; Map, String&gt; expected = new HashMap(); expected.put("CN", ...

    下拉框搜索

    例如,Bootstrap框架提供了`&lt;select&gt;`的插件`bootstrap-select`,它集成了搜索功能,只需简单的配置即可实现。另外,React、Vue等现代前端框架也有对应的组件,如`react-select`、`vuetify`的`v-select`,它们提供了...

    javascript 终极美化下拉框

    然而,浏览器默认的下拉框样式通常较为简单,不符合现代网页设计的要求。因此,我们需要使用JavaScript和CSS来对其进行美化。 1. **自定义样式**:利用CSS,我们可以完全改变下拉框的外观。例如,为`&lt;select&gt;`添加...

    可输入的下拉框

    为了实现输入功能,我们可以使用一个`&lt;input&gt;`元素配合`&lt;ul&gt;`或`&lt;div&gt;`来模拟下拉框。`&lt;input&gt;`用于输入,`&lt;ul&gt;`或`&lt;div&gt;`用于展示筛选后的选项。 `jqueryEditableSelect`这个文件名可能是一个插件,它提供了现成的...

    jQuery自定义下拉框.zip

    4. **动态创建和操作DOM**:由于原生的`&lt;select&gt;`元素可能不符合设计需求,开发者可能会选择使用HTML结构和JavaScript来模拟下拉框。这涉及到动态创建元素(如`&lt;ul&gt;`和`&lt;li&gt;`)以及绑定数据到这些元素上。jQuery提供...

    用jQuery模拟select下拉框的简单示例代码

    在网页设计中,美工有时会因为HTML默认的`&lt;select&gt;`下拉框样式不符合设计需求,特别是默认的下拉箭头图标不美观,而选择使用JavaScript和CSS自定义一个模拟下拉框的效果。本示例是使用jQuery来实现这样一个功能,...

    模拟select下拉框插件SelectBox

    【标题】"模拟select下拉框插件SelectBox"是一个专为网页设计开发的JavaScript插件,主要用于替换原生HTML的`&lt;select&gt;`元素,提供更丰富的交互效果和自定义功能。这种插件通常用于提升用户体验,使得下拉选择框在...

    模拟下拉框select

    模拟下拉框select,之前穿过一个,是纯div和li写的,现在这个的本质还是select,虽然没有经过实验,不过应该不用怕开发的时候取不到值这个问题,修改起来也很简单,只要有点css基础的都应该没有问题~

    类似于百度的带提示的下拉框

    // 这里通常是异步获取数据,这里简单模拟一下 var suggestions = getSuggestions(keyword); renderSuggestions(suggestions); }); function getSuggestions(keyword) { // 这里应使用Ajax或其他方式获取数据 ...

    select下拉框可编辑输入框

    3. **CSS模拟**:通过CSS的`position`属性和`z-index`控制,将`&lt;select&gt;`和`&lt;input&gt;`重叠显示,通过JavaScript控制它们的显示和隐藏,模拟出可编辑下拉框的效果。 ### 关键技术点 在实现过程中,需要注意以下关键...

    仿百度模拟ajax下拉框搜索

    本项目"仿百度模拟ajax下拉框搜索"就是基于jQuery实现的一个功能,旨在模仿百度搜索框的智能提示功能,当用户在输入框中输入关键词时,能够实时通过Ajax从服务器获取并显示相关的搜索建议,同时支持用户使用键盘的上...

    ct下拉框插件.rar_ct下拉框插件_timeymj

    然后,通过简单的jQuery选择器和方法调用,即可将普通select元素转化为该插件的下拉框。例如: ```html &lt;option value="1"&gt;Option 1 &lt;option value="2"&gt;Option 2 ... $(document).ready(function(){ $('#...

    一款非常漂亮的表单select下拉框样式

    以下是一个简单的自定义下拉框样式的步骤: 1. **HTML结构**:创建一个包含`&lt;div&gt;`和`&lt;ul&gt;`的容器,`&lt;div&gt;`作为下拉框的背景和触发器,`&lt;ul&gt;`用于显示选项。 2. **CSS样式**:设置容器、触发器和选项的样式,包括...

Global site tag (gtag.js) - Google Analytics