Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Added a couple of features #1

Merged
merged 6 commits into from

2 participants

@NebuPookins
  • Can now initialize the plugin without necessarily showing it.
  • Added an example of how to use plugin to implement "click to open".
  • Added an optional "close" button.
  • Added an example of integrating with JQuery UI.
  • Fixed formatting of README.md
@anupamsmaurya

Great!!

@anupamsmaurya anupamsmaurya merged commit 27c9651 into from
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
Showing with 55 additions and 29 deletions.
  1. +48 −26 README.md
  2. +7 −3 jCallout.js
View
74 README.md
@@ -2,40 +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'); });
+```
+
+Supressing the "close" button:
+
+```javascript
+ $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'})
+ })
+```
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
View
10 jCallout.js
@@ -1,12 +1,17 @@
(function($) {
var methods = {
init: function(options) {
+ methods.initWithoutShow.apply(this, arguments);
+ methods.show.apply(this, arguments);
+ },
+ initWithoutShow: function(options) {
var defaults = {
message: "no message given",
position: 'top',
backgroundColor: '#8F8F8F',
borderColor: '7992B0',
textColor: '#fff',
+ $closeElement: $('<span style="float: right">(X)</span>')
};
var options = $.extend(defaults, options);
@@ -16,8 +21,8 @@
var obj = $(this);
var msg = o.message;
var obj_position = obj.position();
-
- var containerDiv = $('<div class="callout">').append('<b class="notch"></b>' + msg);
+ var containerDiv = $('<div class="callout">').append(o.$closeElement).append('<b class="notch"></b>' + msg);
+ o.$closeElement.click(function() { methods.hide.apply(obj) });
containerDiv.css({
'background-color': o.backgroundColor,
'border-color': o.borderColor,
@@ -87,7 +92,6 @@
break;
}
containerDiv.hide();
- containerDiv.fadeIn(3000);
});
},
hide: function() {
Something went wrong with that request. Please try again.