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});
深入浅出Web设计（中文版）
（美）瓦特罗尔、（美）西罗托 / O'Reilly Taiwan公司 / 东南大学出版社 / 2010-11 / 99.00元
你将从《深入浅出Web设计(中文版)》学到什么？你曾经希望看看书就能学到真正的网站设计吗？曾经想过该如何同时达成让网站看起来美观，又能有效率地沟通信息，还要通过可访问性与可用性的策略吗？《深入浅出Web设计》正是精通上述主题的秘笈。我们将学到如何设计一个绝佳、用户友好的网站，上谈客户需求，下说手绘分镜表，乃至完成在线所需的HTML与css主文件……而且会有一个真正可以运作的网站！一起来看看 《深入浅出Web设计（中文版）》 这本书的介绍吧!
