jQuery元素內容放大插件

時間 2019-12-04

原文原文鏈接

先上代碼： javascript

/**
*此插件能夠放在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)

對代碼進行簡要的介紹 css

1.html

config 是對配置事件綁定規則的配置器。

二、java

bindEvents 是整個插件的入口，對相關的元素進行事件綁定

三、jquery

showText 是建立放大元素內容的元素的入口

示例demoapp

<!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>

收工this