<!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 来创建功能丰富的、自定义化的下拉选择器,以替代原生 HTML 的 `<select>` 元素。这种模拟下拉框可以提供更灵活的设计和交互体验。 首先,原生的 ...
"多样式下拉框模拟"意味着该技术可以适应不同的设计需求。通过CSS预处理器(如Sass或Less)或者CSS变量,可以方便地创建和切换不同的样式主题。每个样式可能涉及到颜色方案、字体大小、布局结构等方面的差异。 5. ...
jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理和动画等功能,使得开发这样的模拟下拉框变得更加简单。通过jQuery,我们可以轻松地监听用户的行为,如点击事件,然后动态显示或隐藏下拉选项,同时...
"简单下拉框美化"这个主题旨在提升下拉框的视觉效果和用户体验,使其在满足基本功能的同时,也能更好地融入网站的整体设计风格。下面我们将深入探讨下拉框的美化方法、关键技术和实现步骤。 首先,基础的...
在自定义下拉框中,我们通常会用到`<select>`和`<option>`标签来创建基本的下拉列表,但为了达到自定义效果,我们可能需要创建自定义的HTML结构,比如使用`<div>`、`<ul>`和`<li>`等元素来模拟下拉框的外观和行为。...
例如,我们可以用jQuery模拟一个多选下拉框,同时提供搜索、分页等功能。 三、Bootstrap和其他框架 Bootstrap是流行的前端开发框架,它提供了预设的CSS样式和JavaScript插件,可以快速构建美观的多选下拉框。...
例如,一个简单的单元测试可能如下所示: ```java @Test public void testGetDropdownList() { // 测试数据 String entityType = "country"; Map, String> expected = new HashMap(); expected.put("CN", ...
例如,Bootstrap框架提供了`<select>`的插件`bootstrap-select`,它集成了搜索功能,只需简单的配置即可实现。另外,React、Vue等现代前端框架也有对应的组件,如`react-select`、`vuetify`的`v-select`,它们提供了...
然而,浏览器默认的下拉框样式通常较为简单,不符合现代网页设计的要求。因此,我们需要使用JavaScript和CSS来对其进行美化。 1. **自定义样式**:利用CSS,我们可以完全改变下拉框的外观。例如,为`<select>`添加...
为了实现输入功能,我们可以使用一个`<input>`元素配合`<ul>`或`<div>`来模拟下拉框。`<input>`用于输入,`<ul>`或`<div>`用于展示筛选后的选项。 `jqueryEditableSelect`这个文件名可能是一个插件,它提供了现成的...
4. **动态创建和操作DOM**:由于原生的`<select>`元素可能不符合设计需求,开发者可能会选择使用HTML结构和JavaScript来模拟下拉框。这涉及到动态创建元素(如`<ul>`和`<li>`)以及绑定数据到这些元素上。jQuery提供...
在网页设计中,美工有时会因为HTML默认的`<select>`下拉框样式不符合设计需求,特别是默认的下拉箭头图标不美观,而选择使用JavaScript和CSS自定义一个模拟下拉框的效果。本示例是使用jQuery来实现这样一个功能,...
【标题】"模拟select下拉框插件SelectBox"是一个专为网页设计开发的JavaScript插件,主要用于替换原生HTML的`<select>`元素,提供更丰富的交互效果和自定义功能。这种插件通常用于提升用户体验,使得下拉选择框在...
模拟下拉框select,之前穿过一个,是纯div和li写的,现在这个的本质还是select,虽然没有经过实验,不过应该不用怕开发的时候取不到值这个问题,修改起来也很简单,只要有点css基础的都应该没有问题~
// 这里通常是异步获取数据,这里简单模拟一下 var suggestions = getSuggestions(keyword); renderSuggestions(suggestions); }); function getSuggestions(keyword) { // 这里应使用Ajax或其他方式获取数据 ...
3. **CSS模拟**:通过CSS的`position`属性和`z-index`控制,将`<select>`和`<input>`重叠显示,通过JavaScript控制它们的显示和隐藏,模拟出可编辑下拉框的效果。 ### 关键技术点 在实现过程中,需要注意以下关键...
本项目"仿百度模拟ajax下拉框搜索"就是基于jQuery实现的一个功能,旨在模仿百度搜索框的智能提示功能,当用户在输入框中输入关键词时,能够实时通过Ajax从服务器获取并显示相关的搜索建议,同时支持用户使用键盘的上...
然后,通过简单的jQuery选择器和方法调用,即可将普通select元素转化为该插件的下拉框。例如: ```html <option value="1">Option 1 <option value="2">Option 2 ... $(document).ready(function(){ $('#...
以下是一个简单的自定义下拉框样式的步骤: 1. **HTML结构**:创建一个包含`<div>`和`<ul>`的容器,`<div>`作为下拉框的背景和触发器,`<ul>`用于显示选项。 2. **CSS样式**:设置容器、触发器和选项的样式,包括...