Permalink
Browse files

Merge branch 'master' of github.com:NebuPookins/jCallout

  • Loading branch information...
2 parents 9a67d30 + fcd6abe commit 5177ed0ce088b108b1d1cd11113210b52de0e7d7 @NebuPookins committed Sep 23, 2011
Showing with 37 additions and 34 deletions.
  1. +37 −34 README.md
View
@@ -2,59 +2,62 @@ Callout is a balloon div that connects text, symbols, images to an element or a
jCallout is jQuery implementation of callouts.
-Here is a <b><a href="http://jsfiddle.net/anupamsm/zdbpj/5/embedded/result/">Live Demo</a></b> (I'll be updating this page with further version releases)
+Here is a **[Live Demo](http://jsfiddle.net/anupamsm/zdbpj/5/embedded/result/)** (I'll be updating this page with further version releases)
-<b>Advantages</b>
-<ul>
-<li>Easy to use and implement</li>
-<li>Only CSS+JQuery implementation (no images required).</li>
-<li>Customizable options</li>
-</ul>
+**Advantages**
-<b>Usage</b>
+* Easy to use and implement
+* Only CSS+JQuery implementation (no images required).
+* Customizable options
+
+**Usage**
Basic:
-<pre>
-$('#testDiv').jCallout({message:"hello there. This is a test"});
-</pre>
+
+```javascript
+ $('#testDiv').jCallout({message:"hello there. This is a test"});
+```
With options:
-<pre>
-$('#testDiv').jCallout({
- message:"hello there. This is a test",
- position:"right", //other possible values- 'top', 'bottom', 'left'
- backgroundColor:"cyan", //hex code can be used
- textColor:"#fff",
- borderColor:"cyan"
- });
-</pre>
+
+```javascript
+ $('#testDiv').jCallout({
+ message:"hello there. This is a test",
+ position:"right", //other possible values- 'top', 'bottom', 'left'
+ backgroundColor:"cyan", //hex code can be used
+ textColor:"#fff",
+ borderColor:"cyan"
+ });
+```
Click to open:
+
```javascript
-var $testDiv = $('#testDiv');
-$testDiv.jCallout('initWithoutShow', { message: 'Hello world!' });
-$testDiv.click(function() { $testDiv.jCallout('show'); });
+ var $testDiv = $('#testDiv');
+ $testDiv.jCallout('initWithoutShow', { message: 'Hello world!' });
+ $testDiv.click(function() { $testDiv.jCallout('show'); });
```
Supressing the "close" button:
+
```javascript
-$testDiv.jCallout({ message: 'Hello world!', $closeElement: $('') });
+ $testDiv.jCallout({ message: 'Hello world!', $closeElement: $('') });
```
+
Using the 'close' icon from JQuery UI:
+
```javascript
-$testDiv.jCallout({
- message: tipText,
- $closeElement: $('<span/>', {'class':'ui-icon ui-icon-circle-close','style':'float: right'})
-})
+ $testDiv.jCallout({
+ message: tipText,
+ $closeElement: $('<span/>', {'class':'ui-icon ui-icon-circle-close','style':'float: right'})
+ })
```
Events:
-<pre>
-$('.test4').jCallout('hide');//hide callout associated with the selected element(s)
-</pre>
-<pre>
-$('.test4').jCallout('show');//show callout associated with the selected element(s)
-</pre>
+```javascript
+ $('.test4').jCallout('hide');//hide callout associated with the selected element(s)
+ $('.test4').jCallout('show');//show callout associated with the selected element(s)
+```
Future releases will have more options and event handling

0 comments on commit 5177ed0

Please sign in to comment.