jQuery元素内容放大插件

最新推荐文章于 2022-04-14 19:45:48 发布

weixin_34313182

最新推荐文章于 2022-04-14 19:45:48 发布

阅读量195

点赞数

文章标签： javascript xhtml python ViewUI

原文链接：https://my.oschina.net/u/1262428/blog/196895

版权

2019独角兽企业重金招聘Python工程师标准>>>

先上代码：

/**
*此插件可以放在html文档最后面，自动绑定添加了magnifier属性的的元素。
*否者需要需要在文档加载完之后调用（$.initBigShow()）显示初始化。
*/
(function ($) {
	/**
	 *@attr 需要放大提示的元素添加属性
	 *@attrPrefix_event key:属性值前缀 value:放大提示事件（必须是jquery支持的事件）
	 *@position attr属性值 key:属性值前缀 value：放大提示元素，定制化的css（class）todo该名称
	 *@splitChar 属性attr的值前后缀连接符
	 */
	config = {
		attr : "magnifier", //属性，需要放大镜效果的必须加上此属性值，且值的前缀必须是attrPrefix的值
		//key:属性值前缀(属性值命名规范(前缀_后缀(后缀为展示的位置))) ,value:属性事件
		attrPrefix_event : {
			keyup : "keyup",
			mov : "mouseover",
			clk : "click"
		},
		position : {
			clkSuffix : "youStyle"
		}, //key 属性后缀  value 自定义的class样式 例如：clkSuffix:youStyle,youStyle必须是你自己定义的class样式
		splitChar : "_"
	};
	var getMagnifierElem = function (attrPrefix) {
		return $("*[" + config.attr + "^=" + attrPrefix + "]"); //获取目标对象
	};
	//返回属性后缀
	var getElemSuffix = function (attrValue) {
		var splitChar = config.splitChar;
		var spiltFlag = attrValue.indexOf(splitChar);
		if (spiltFlag > 0) {
			var spiltArr = attrValue.split(splitChar);
			return spiltArr[1];
		};
		return false;
	};
	//绑定事件
	var bindEvents = function () {
		var attrPrefix_event = config.attrPrefix_event;
		for (var prefix in attrPrefix_event) {
			var targets = getMagnifierElem(prefix);
			if (targets.length) {
				event = attrPrefix_event[prefix];
				targets.unbind(event).bind(event, function () {
					removeTipDiv();
					showText($(this));
				});
			}
		};
	};
	bindEvents(); //自动初始化
	
	$.initBigShow = function(){//显示初始化
	   bindEvents(); 
	};

	//创建放大提示元素
	var showText = function (target) {
		$("body").append("<div obj='obj' " + createCss(target) + ">" + getTargetValue(target) + "</div>");
	};

	//获取目标对象需要放大提示的文本
	var getTargetValue = function (target) {
		var value = target.val();
		var targetDomName = target.context.localName;
		switch (true) {
		case targetDomName == "div":
			value = target.text();
			break;
		}
		return value;
	};

	//删除放大提示的元素
	var removeTipDiv = function () {
		var tipObj = $("div[obj=obj]");
		tipObj && tipObj.remove();
	};
	/**
	 *创建放大提示元素的css
	 *可以再这里针对特定的元素，搞定制化的css
	 */
	var createCss = function (target) {
		var defautCss = "position:absolute;top:" + target.context.offsetTop + "px;left:" + (target.context.offsetLeft + target.context.offsetWidth) + "px;background:#fffae5;font-size:20px;";
		var cls = "style='" + defautCss + "'";

		var attrValue = target.attr(config.attr);
		var suffix = getElemSuffix(attrValue);
		var clsValue = suffix;
		if (clsValue) {
			cls = "class='" + clsValue + "'";
		};
		return cls;
	}
})(jQuery)

对代码进行简要的介绍

config 是对配置事件绑定规则的配置器。

2、

bindEvents 是整个插件的入口，对相关的元素进行事件绑定

3、

showText 是创建放大元素内容的元素的入口

示例demo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <script type="text/javascript" src="jquery-1.8.3.js"></script>
    <script type="text/javascript" src="bigShow.js"></script>
    <script type="text/javascript">
$(function(){
  $.initBigShow()
  })
	</script>
	
</head>
<body>        
      <input magnifier="keyup" type="text" style="width:400px;height:50px" value='键盘点击触发示例'/>
    <input magnifier="mov_test2" type="text" value="鼠标移动触发示例" style="width:400px;height:50px;border:1px solid"/>
	<div magnifier="clk_test3" style="width:200px;">龙王（点击触发示例）</div>
</body>
</html>

收工

转载于:https://my.oschina.net/u/1262428/blog/196895