jQuery 选择文字显示操作框插件,可用于分享文字到各大社区。

先上效果图
jQuery 选择文字显示操作框插件,可用于分享文字到各大社区。 - huangeniu - 程序猿-aniu
  (选择该段文字显示分享框)

jQuery 选择文字显示操作框插件,可用于分享文字到各大社区。 - huangeniu - 程序猿-aniu
(选择文字显示操作框)
 
本来js和样式是要自己写的,后来自己直接封装成插件,方便调用。
详细如下代码:

/* * name:selectBox * by :aniu * 选择文字显示隐藏层插件 */ ; (function($) { var methods = { text: undefined, init: function(options) { return this.each(function() { var $this = $(this); var $default = { text: "p", items: [{ title: "", style: "", onClick: function() {} }] }; var $settings = $.extend({}, $default, options); var html = "<span class='closeBox'></span><div class='selectBox_con'><span>选择操作:</span>"; $this.append(html); var $selectBox_con = $('.selectBox_con'); $.each($settings.items, function(index, it) { html = "<a href='#' class='box_icon " + it.style + "' title='" + it.title + "' id='" + it.style + "_id'></a>"; $selectBox_con.append(html); $("#" + it.style + "_id").click(function() { it.onClick() }); }); $selectBox_con.append("<div>"); $($settings.text).bind("mouseup", function(e) { var selObj if (document.selection) { selObj = document.selection.createRange(); text = document.selection.createRange().text; // for IE } else { selObj = document.getSelection(); text = document.getSelection().toString(); } if (text.length > 0) { var left = e.pageX + $this.width() > $(document).width() ? e.pageX - $this.width() : e.pageX; $this.css({ "left": left, "top": e.pageY + 3, "display": "block" }); } }); $(document).bind("mousedown", function() { if ($this.is(":visible")) { $this.fadeOut(); } }); return true; }); }, getSelectText: function() { return text; }, destroy: function() {} }; jQuery.fn.selectBox = function() { var method = arguments[0]; if (methods[method]) { method = methods[method]; arguments = Array.prototype.slice.call(arguments, 1); } else if (typeof(method) == 'object' || !method) { method = methods.init; } else { alert('插件selectBox没有方法为: \"' + method + '\" 的方法!'); return this; } //return method.call(this); return method.apply(this, arguments); } })(jQuery)



测试页面:

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> 无标题文档 </title> <script src="js/jquery.js" type="text/javascript"> </script> <script src="js/selectBox.js" type="text/javascript"> </script> <style type="text/css"> body{ font-size:14px;} <!--注意 position:absolute--> .selectBox{ position:absolute; z-index:1000; background-color:#eee;border: 2px solid #999; padding:3px 5px; float:left; display:none} <!--插件所需要的样式--> .closeBox{ width:16px; height:16px; background:url(images/cross_circle.png); cursor:pointer; float:right; margin:-3px -5px 0 0;} .selectBox_con{float:left} .selectBox_con span{ background:url(images/pencil.png) no-repeat; padding-left:18px; float:left} .box_icon{ width:18px; height:18px; margin:0 3px; float:left; border:1px #666666 solid;} <!--要添加item图标,必须在这里写上样式--> .edit{ background:url(images/credit_card.png)} .add{ background:url(images/pencil.png)} .remove{ background:url(images/userMg.gif)} .view{ background:url(images/grid.png)} </style> <script type="text/javascript"> $(function() { $(".selectBox").selectBox({ text: "#testText", //要绑定事件的DOM对象,格式为jquery选择器格式 //items对象是选择框显示的按钮 // style是样式的class名称 //onClick 自定义点击事件 //调用selectBox('getSelectText')方法获取选择文本 items: [{ title: "新增", style: "add", onClick: function() { alert("新增"); } }, { title: "编辑", style: "edit", onClick: function() { window.open("http://www.baidu.com"); } }, { title: "移除", style: "remove", onClick: function() { alert("移除"); } }, { title: "获取选择文本", style: "view", onClick: function() { alert($(this).selectBox('getSelectText')); } } ] }); // alert($(".selectBox").html()); }); </script> </head> <body> <div style="font-size:16px" id="testText">   数据显示,从2003年至2011年,中国GDP实际增长了1.5倍,年均增速10.7%。随着中国经济体量的增大(2012年GDP已超过50万亿元),如今GDP每增长一个百分点的分量与过去已大不相同。中国经济进入转型的“深水区”后,发展的内涵也出现了新变化。普遍的观点是,中国经济的高速增长时代已经结束,未来的经济增速将保持在7%-8%的“中速增长区间”。“十二五”中国不再“保8”,设定了年均GDP增长7%的新目标,就是出于经济中长期发展的考量和开启战略性调整和加快转变发展方式主线的规划要求。 </div> <br/> <h2> 下面的文字没有绑定事件 </h2> <p>  数据显示,从2003年至2011年,中国GDP实际增长了1.5倍,年均增速10.7%。随着中国经济体量的增大(2012年GDP已超过50万亿元),如今GDP每增长一个百分点的分量与过去已大不相同。中国经济进入转型的“深水区”后,发展的内涵也出现了新变化。普遍的观点是,中国经济的高速增长时代已经结束,未来的经济增速将保持在7%-8%的“中速增长区间”。“十二五”中国不再“ </p> <div class="selectBox"> </div> </body> </html>


你可能感兴趣的:(jquery插件,js选中文字,网页分享代码)