移动web，上下拉列表的实现，模态视窗的使用。。。

╰半夏微凉° 2022-05-18 23:07 106阅读 0赞

效果图：

![70][]![70 1][]

相关代码如下：

upDropDownMenu.js

function upDropDownMenu() {
    	var mask, ul, li,arrow;
    	var arrowHeight = 10;
    	this.btn;
    	this.liDatas = ["顺义区", "北京市", "京津翼", "2+26城市"];
    	this.liValues = ["shunyi", "beijing", "jingjinyi", "226"];
    	this.fontSize = "12px";
    	var bodyHeight = document.body.offsetHeight ? document.body.offsetHeight : document.documentElement.clientHeight;
    	var bodyWidth = document.body.offsetWidth ? document.body.offsetWidth : document.documentElement.clientWidth;
    	var ulMaxWith = bodyWidth - 20;
    
    	this.Direction = {
    		top: 0,
    		bottom: 1,
    		auto: 2
    	}
    	var _this = this;
    
    	String.prototype.width = function(font) {
    		var f = font || '12px',
    			o = $('<div>' + this + '</div>')
    			.css({
    				'position': 'absolute',
    				'float': 'left',
    				'white-space': 'nowrap',
    				'visibility': 'hidden',
    				'font': f
    			})
    			.appendTo($('body')),
    			w = o.offsetWidth;
    		o.remove();
    		if(w > ulMaxWith) {
    			w = ulMaxWith;
    		}
    		return w;
    	};
    
    	function maxStr(datas) {
    		var mStr = "";
    		for(var i = 0; i < datas.length; i++) {
    			if(mStr.length < datas[i].length) {
    				mStr = datas[i];
    			}
    		}
    		return mStr;
    	};
    
    	function getAbsPoint(e) {
    		var x = e.offsetLeft,
    			y = e.offsetTop;
    		while(e = e.offsetParent) {
    			x += e.offsetLeft;
    			y += e.offsetTop;
    		}
    		x = x - document.body.scrollLeft;
    		y = y - document.body.scrollTop;
    		return {
    			x: x,
    			y: y
    		};
    	}
    
    	this.selectedIndex = function(index) {
    		_this.btn.innerText = _this.liDatas[index];
    	}
    
    	this.show = function(Direction, CallBack) {
    		if(Direction == null) {
    			Direction = _this.Direction.auto;
    		}
    
    		var clientRect = _this.btn.getBoundingClientRect();
    		var bodyTop = clientRect.top + document.body.scrollTop;
    
    		if(Direction == _this.Direction.auto) {
    			var topHeight = (bodyTop - 45);
    			var bottomHeight = (bodyHeight - bodyTop - clientRect.height - 51);
    
    			if(topHeight > bottomHeight) {
    				Direction = _this.Direction.top;
    			} else {
    				Direction = _this.Direction.bottom;
    			}
    			console.log("Direction:" + bodyHeight);
    		}
    
    		if(document.getElementById("upDropDownMenu_mask") != null) {
    			document.body.removeChild(document.getElementById("upDropDownMenu_mask"));
    		}
    
    		mask = document.createElement("div");
    		document.body.appendChild(mask);
    
    		mask.setAttribute("id", "upDropDownMenu_mask");
    		var maskStyle = mask.style;
    		maskStyle.position = "absolute";
    		maskStyle.top = 0;
    		maskStyle.left = 0;
    		maskStyle.height = bodyHeight + "px";
    		if(bodyHeight == 0) {
    			maskStyle.height = 100 + "vh";
    		}
    		maskStyle.width = "100vw";
    		maskStyle.backgroundColor = "rgba(0,0,0,0)";
    		maskStyle.zIndex = 9999;
    		maskStyle.fontSize = _this.fontSize; 
    
    		ul = document.createElement("ul"); 
    		ul.setAttribute("id", "upDropDownMenu_ul");
    		ul.style.backgroundColor = "white";
    		ul.style.overflow = "auto";
    		ul.style.borderRadius = "5px";
    		ul.style.paddingTop = "5px";
    		ul.style.paddingBottom = "5px";
    		ul.style.boxShadow = " 0 0 50px #888888";
    		ul.style.width = maxStr(_this.liDatas).width(_this.fontSize) + "px";
    		ul.style.maxWidth = ulMaxWith + "px";
    		ul.style.position = "absolute";
    
    		var ulStyprMaxHeight;
    		if(Direction == _this.Direction.bottom) {
    			ulStyprMaxHeight = (bodyHeight - bodyTop - clientRect.height - 51) + "px";
    		} else if(Direction == _this.Direction.top) {
    			ulStyprMaxHeight = (bodyTop - 45) + "px";
    		}
    		ul.style.maxHeight = ulStyprMaxHeight;
    
    		for(var i = 0; i < _this.liDatas.length; i++) {
    			li = document.createElement("li");
    			li.setAttribute("value", _this.liValues[i]);
    			li.style.listStyleType = "none";
    			li.style.padding = "5px"
    			li.style.textAlign = "center";
    			if(i != _this.liDatas.length - 1) {
    				li.style.border = "1px solid #ccc";
    				li.style.borderTop = "none";
    				li.style.borderLeft = "none";
    				li.style.borderRight = "none";
    			}
    			li.style.height = "auto";
    			li.style.wordBreak = "break-all";
    			li.style.wordWrap = "break-word";
    			li.innerText = _this.liDatas[i];
    			ul.appendChild(li);
    		}
    		var ulHeight = ul.style.height;
    		mask.appendChild(ul);
    
    		var ulStyleTop;
    		if(Direction == _this.Direction.bottom) {
    			ulStyleTop = bodyTop + clientRect.height + arrowHeight;
    		} else if(Direction == _this.Direction.top) {
    			ulStyleTop = bodyTop - ul.offsetHeight - arrowHeight;
    		}
    		ul.style.top = ulStyleTop +"px";
    
    		var ulLeft = 0;
    		if(ul.offsetWidth > clientRect.width) {
    			ulLeft = (ul.offsetWidth - clientRect.width) / 2;
    		} else {
    			ul.style.width = clientRect.width + "px";
    		}
    		if(clientRect.left - ulLeft < 10) {
    			ul.style.left = 10 + "px";
    		} else {
    			if((clientRect.left - ulLeft + ul.offsetWidth - 20) > ulMaxWith) {
    				ul.style.right = 10 + "px";
    			} else {
    				ul.style.left = (clientRect.left - ulLeft) + "px";
    			}
    		}
    		
    		arrow = document.createElement("div");
    		arrow.style.width = 0;
    		arrow.style.height = 0;
    		arrow.style.display = "block";
    	    arrow.style.position = "absolute";
    		arrow.style.left = (clientRect.left + clientRect.width/2 - arrowHeight) + "px";
    		if(Direction == _this.Direction.bottom) {
    			arrow.style.top = (ulStyleTop - arrowHeight) + "px";
    			arrow.style.borderBottom = arrowHeight + "px solid white";
    		} else if(Direction == _this.Direction.top) {
    			arrow.style.top = (ulStyleTop + ul.offsetHeight) + "px";
    			arrow.style.borderTop = arrowHeight + "px solid white";
    		}
    		arrow.style.borderLeft = arrowHeight + "px solid transparent";
    		arrow.style.borderRight = arrowHeight + "px solid transparent"; 
    		mask.appendChild(arrow);
    	
    		
    		function closeMenu() {
    			if(mask) {
    				document.body.removeChild(mask);
    				mask = null;
    			}
    		}
    
    		mask.addEventListener("click", function(ev) {
    			closeMenu();
    		});
    
    		$("#upDropDownMenu_ul li").on("click", function(ev) {
    			_this.btn.innerText = this.innerText;
    			closeMenu();
    			var index = $(this).index(); //获取索引下标 也从0开始
    			var text = $(this).text(); //文本内容
    			var value = this.getAttribute("value");
    			if(CallBack){ 
    				CallBack(index, text, value);
    			}
    		});
    	}
    }

使用：

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="utf-8">
    		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    		<title></title>
    		<script src="js/mui.min.js"></script>
    		<link href="css/mui.min.css" rel="stylesheet" />
    		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    		<script src="js/fastclick.js" type="text/javascript" charset="utf-8"></script>
    		<script src="js/upDropDownMenu.js" type="text/javascript" charset="utf-8"></script>
    
    		<script type="text/javascript" charset="utf-8">
    			mui.init();
    		</script>
    		<style type="text/css">
    			* {
    				margin: 0;
    				padding: 0;
    				border: 0;
    			}
    			
    			.box {
    				background-color: red;
    				position: relative;
    				top: 70vh;
    				display: inline-block;
    				padding: 10px;
    				left: 80%;
    				max-width: 200px;
    				min-width: 60px;
    				overflow: auto;
    			}
    			body {
    				height: 100vh;
    				width: 100%;
    			}
    		</style>
    	</head>
    
    	<body>
    
    		<div id="one" style="position: relative;height: 100px;background-color: blue;">
    			aaaa
    		</div>
    
    		<div id="box" class="box">
    			aaaa
    		</div>
    
    		<script type="text/javascript">
    			mui.init();
    			mui.ready(function() {
    				var box = document.getElementById("box");
    				box.addEventListener("click", function(ev) {
    					var menu = new upDropDownMenu();
    					menu.btn = this;
    					menu.show();
    				});
    
    				document.getElementById('one').addEventListener("click", function(ev) {
    					var menu = new upDropDownMenu();
    					menu.btn = document.getElementById('one');
    					menu.liDatas = ["a", "b", "c", "a", "b", "c", "a", "b", "c", "a", "b", "c", "a", "b", "c", "a", "b", "c", "a", "b", "c"];
    					menu.show(menu.Direction.bottom);
    				});
    			})
    			
    		</script>
    	</body>
    </html>

[70]: https://img-blog.csdn.net/20180717165239622?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rhc2hlbmlk/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: /images/20220519/c444f3e817ff42338eccdbb5282b7d28.png

发表评论取消回复

表情：

评论列表（有 0 条评论，106人围观）

还没有评论，来说两句吧...

相关阅读

相关 jquery创建下拉列表_使用jQuery创建Twitter样式的下拉列表

jquery创建下拉列表 ![Twitter Dropdown][] Twitter does some great stuff with JavaScript. What

爱被打了一巴掌/ 2023年02月22日 01:25/ 0 赞/ 37 阅读

相关如何实现省市关联的下拉列表

![format_png][] ![format_png 1][] 前言：在某些电商网站或者APP中，通常填写地址时，会有这样的功能：当我们选择的省份是“山东”时，则城市的

朴灿烈づ我的快乐病毒、/ 2022年12月27日 09:12/ 0 赞/ 179 阅读

相关 Spinner下拉列表的使用

直接来一个效果 ![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAc2ljaHVhbnd3dw_

绝地灬酷狼/ 2022年09月15日 11:47/ 0 赞/ 256 阅读

相关 android--多级下拉列表菜单的实现

原文链接：[http://blog.csdn.net/minimicall/article/details/39484493][http_blog.csdn.net_minim

ゝ一纸荒年。/ 2022年08月12日 16:08/ 0 赞/ 317 阅读

相关实现下拉列表的一种方法

如下图，这种点击可以展开详细列表的表视图，下面阐释一种简单的实现方法: ![Center][] 实现思路如下：首先，给表视图初始化N个分区，给每个分区用一个布尔值参数来

桃扇骨/ 2022年07月28日 09:31/ 0 赞/ 193 阅读

相关纯CSS实现下拉列表

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xh

向右看齐/ 2022年07月12日 06:40/ 0 赞/ 310 阅读

相关移动web，上下拉列表的实现，模态视窗的使用。。。

效果图： ![70][]![70 1][] 相关代码如下： upDropDownMenu.js function upDropDownMenu() {

╰半夏微凉°/ 2022年05月18日 23:07/ 0 赞/ 107 阅读

相关下拉列表和滚动条的使用

下拉列表和滚动条的使用每当我准备认真看书的时候，这个世界就变得非常有趣，任何风吹草动都能吸引我下拉列表JComboBox的使用 1、创建一个数组 2

向右看齐/ 2022年05月06日 12:00/ 0 赞/ 228 阅读

相关润乾的下拉列表和下拉数据集的使用

下拉列表的代码值和显示值是什意思？代码值就是你写回数据库的值，比如代码值为"金融类",那么填报数据提交后，相应字段的值就是金融类。注意一定要保证代码值的数据类型和数据库的数

傷城~/ 2022年04月10日 08:28/ 0 赞/ 313 阅读

相关 jquery 实现的select下拉列表

效果如下: ![20200602153152578.png][] html <div class="select_item"> <

浅浅的花香味﹌/ 2021年07月26日 19:05/ 0 赞/ 491 阅读