wrapSelection
- 授权协议: 未知
- 开发语言:
- 操作系统: 未知
- 软件首页: http://plugins.jquery.com/project/wrapSelection
软件介绍
Overview
wrapSelection wraps highlighted text with valid XHTML span tags and returns as a jQuery object for chaining additional commands.
Originally designed to allow end users to select text (highlight text with their mouse) and change the background style. Unlike other solutions that apply to the whole element, this creates XHTML compliant span tags around the selection area.
Features
- Cross Browser Selections (tested in IE, Firefox, Opera, Safari)
- Create function getRangeAt() to return custom range object
- Create a custom class to identify selections
- Ability to restrict selectable area to a tag (single element)
- jQuery plugin with limited chaining ability
- Must create XHTML compliant code
- Snaps to begining and end or word if selected in the middle of the word
Visit demonstration sitefor a practical example of this plugin.
wrapSelection()
Example Breakdown of Plugin
The following is a basic html p tag and "|" marks the start and the end of the selection.
<p>
A
<b>sm|all</b>
examp|le.
</p>Use the following jQuery:
$(document).ready(function(){
$('p').bind("mouseup", function(){
$().wrapSelection().addClass('h1');
});
});The following is the HTML results:
<p>
A
<b>sm
<span class='sel_123445454 h1'>all</span>
</b>
<span class='sel_123445454 h1'> examp</span>
le.
</p>The function will return a jquery object with span tags for class "sel_123445454".
How to Use wrapSelection
Note: This assumes that the CSS class "h1" is already defined.
1. Include the jQuery and wrapSelection to the page.
<script type="text/javascript" src="jquery.js"> </script>
<script type="text/javascript" src="jquery.wrapSelection.js"> </script>2. Bind wrapSelection to a mouseup event like the following:
$(document).ready(function(){
$('#container').bind("mouseup", function(){
$().wrapSelection().addClass('h1');
});
});Restricting Selection to an Element
Change the above code to include a selector. Only include one element, additional elements will fail miserably; So, don't use more than one!
$('#selectable').wrapSelection().addClass('h1');wrapSelection Options Parameters
There are two optional parameters to wrapSelection, Snap to Word (fitToWord) and Range Object(wrapRange).
Add options using the following syntax.
$().wrapSelection({
fitToWord: false,
wrapRange: rangeObj
});Turning off Snap to word
fitToWord is a boolean indicating if it is on or off. "True" (the default) forces the selection to the whole word. "False" turns off the snap to word functionality.
Range Object
Some cases, you need to store the range object prior to adding a wrapSelection. See $().getRangeAt() function for more information on how to get the range object for wrapSelection to use. One case for this is a floating toolbar that appears after the selection.
By default, "wrapRange" is false and calls getRangeAt() by default. If a range object is passed, it will use that object to create the wrapSelection.
Note when Chaining, selectors do not chain nicely with wrapSelection. For example:
$('#container').bind("mouseup", function(){
$('h3').addClass('header3').wrapSelection().addClass('h1');
}); - Binded to the element with an id of container
- Selector on all h3's adding a class of 'header3'
- wrapSelection() creates xhtml span tags with the class h1 around the selection triggered in the element "container"
The commands to the left of "wrapSelector" is applied to elements found by the h3 selector. All commands to the right of wrapSelector is applied to the span tags that were created.
getRangeAt()
Returns a custom range object, that wrapSelection can use. It is called in the same manner as wrapSelection, with an element container ["$('#container').getRangeAt()"]or the entire document ["$().getRangeAt()"].
$(document).ready(function(){
$('#container').bind("mouseup", function(){
var myRange = $().getRangeAt();
});
});Another function can call wrapSelection like this.
$().wrapSelection({wrapRange : myRange});
创意，未来的工作方式
方军 / 中信出版社 / 2016-11-20 / 58.00元
知识工作者已成过去，创意工作者才是未来 工作的本质是创意 纵观我们身处的世界，除了自然美景，世间或伟大或平凡的事物，几乎都是人观念革新的产物，它们多数是我们在工作过程中群体创意的产物。 从工业时代到知识时代，大多数人通过掌握新知、持续学习，获得社会的认可和回报；但进入以大数据、人工智能、机器人为标志的新时代，单纯的学习已经不能满足社会对人的要求。算法和机器人正在取代人类很多重复性......一起来看看 《创意，未来的工作方式》 这本书的介绍吧!
