<!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样式**：设置容器、触发器和选项的样式，包括...