Firstly, I am not an expert in jQuery plugins, plus the IMHO coding style is not very readable. Also, I'm not sure if I understand what exactly you are asking, but I will try to answer nonetheless.
data-target appears to be an undocumented attribute of the close / link button. It allows you to select an element that acts as a warning, except for the parent of the clsoe / link button, which should be closed.
Example: usually you should write HTML for a warning like this:
<div class="alert"> <a class="close" data-dismiss="alert">×</a> Some message </div>
The last part ("Alert Data-API") sets up a click event for the close link, which invokes the Alert.prototype.close function (without actually launching an instance of the Alert class).
In this function, first $this.attr('data-target') used to check if the close button has a data-target attribute. If not, then it uses a possible segment of the URL hash in the href attribute as an identifier selector. In this example, there are none, so the line
$parent.length || ($parent = $this.hasClass('alert') ? $this : $this.parent())
the parent of the close button is selected as a warning to close.
If you, however, wanted the close button to be outside the warning, you should use the data-target or href attributes:
<div id="my-alert" class="alert"> Some message </div> <a class="close" data-dismiss="alert" href="#my-alert">Close "my-alert"</a> <a class="close" data-dismiss="alert" data-target=".alert">Close all "alerts" with the class "alert"</a>
About functionality in general:
Despite the fact that it is short, unfortunately, it is quite difficult. I will try to briefly explain this:
As mentioned above: the last part places the click event handler on any warning close buttons defined by the data-dismiss="alert" attribute. It uses the Alert.prototype.close function as an event handler, without actually initiating an instance of the Alert class.
The second part ("Plugin Definition") defines the $().alert() jQuery plugin. This does not do much, just creates an instance of Alert, and if the plugin argument ( option ) is โclosedโ, it will call the close method. Creating an instance on it is a little pointless. The only reason for this is to match the pattern of other plugins.
The first part defines the Alert class, which as soon as one task is: Close (delete) an element ("warning") when another element is clicked ("close" button).
One thing you must understand is this. "Alerts" are not special. They can be any type of HTML element without special requirements. You explicitly โdeclareโ the element as a warning by calling $().alert() on it, but this is not necessary. Instead, you can directly call $().alert("close") on it when you want to close an element using a script, or define a close button using data-dismiss="alert" , which then closes any element that it points to using data-target , its href or being a warning child.
EDIT: (Sorry, not done before)
if (!selector) { selector = $this.attr('href') selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7 }
If the data-target attribute was not set (or was empty), then the script tries to use the href attribute as a selector. The hash syntax of the URL matches the CSS identifier selector, so it can be used as a selector. Part of IE7 is that even if the attribute contains only the hash part, the browser still returns the full URL.
$parent.length || ($parent = $this.hasClass('alert') ? $this : $this.parent())
Yes, it can be written as
if (!$parent.length) {
I do not know why they chose this syntax. IMHO this is unnecessary mysterious and, therefore, unreadable.
If you have href="#" , then this line will ignore it, because $("#") will not return any results ( $parent.length will be 0) and will choose it yourself (if it has an Alert class) or the parent element of the element as a warning that should be closed.