I have the following jQueryUI dialog. How can I print the content of the dialog? The content could be any HTML such as a table, image, etc. There were several earlier answers to this question,however, they appear to be out of date.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog</title>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script>
$(function() {
$("#openDialog").click(function(){$("#myDialog").dialog('open')});
$( "#myDialog" ).dialog({
modal: true,
autoOpen : false,
buttons: {Ok: function() {alert('print');}}
});
});
</script>
</head>
<body>
<button id="openDialog">Click</button>
<div id="myDialog" title="My Dialog">
<p>Print this text!</p>
<img alt="And print this image" src="myImg.png">
</div>
</body>
</html>
I developed my own plugin with code is below, and a live example is located at http://jsfiddle.net/fyu4P/embedded/result/.
On FF 26.0, it works, however, after printing a couple of times, FF asks the user if popups should be disabled which I wish not to happen. Also, it doesn't work with older IE, and likely other browsers. Don't worry, when printing, you still need to click the operating system print dialog, so you won't waste any paper! I've asked https://codereview.stackexchange.com/questions/39235/critique-of-jquery-plugin-which-will-print-to-a-printer-an-element-or-a-jqueryui for any recommendations.
Actual Plugin:
/*
* jQuery printIt
* Print's the selected elements to the printer
* Copyright Michael Reed, 2014
* Dual licensed under the MIT and GPL licenses.
*/
(function($){
var defaults = {
elems :null, //Element to print HTML
copy_css :false,//Copy CSS from original element
external_css :null //New external css file to apply
};
var methods = {
init : function (options) {
var settings = $.extend({}, defaults, options)
elems=$(settings.elems);
return this.each(function () {
$(this).click(function(e) {
var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
$(iframe).load(function(){
elems.each(function(){
iframe.contentWindow.document.body.appendChild(this.cloneNode(true));
});
if(settings.copy_css) {
var arrStyleSheets = document.getElementsByTagName("link");
for (var i = 0; i < arrStyleSheets.length; i++){
iframe.contentWindow.document.head.appendChild(arrStyleSheets[i].cloneNode(true));
}
var arrStyle = document.getElementsByTagName("style");
for (var i = 0; i < arrStyle.length; i++){
iframe.contentWindow.document.head.appendChild(arrStyle[i].cloneNode(true));
}
}
if(settings.external_css) {
var style = document.createElement("link")
style.rel = 'stylesheet';
style.type = 'text/css';
style.href = settings.external_css;
iframe.contentWindow.document.head.appendChild(style);
}
var script = document.createElement('script');
script.type = 'text/javascript';
script.text = 'window.print();';
iframe.contentWindow.document.head.appendChild(script);
$(iframe).hide();
});
});
});
},
destroy : function () {
//Anything else I should do here?
delete settings;
return this.each(function () {});
}
};
$.fn.printIt = function(method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || ! method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on jQuery.printIt');
}
};
}(jQuery)
);
To configure:
$(function () {
$("#openDialog").click(function () {
$("#myDialog").dialog('open')
});
$("#myDialog").dialog({
modal: true,
autoOpen: false
});
$('#printIt').printIt({
elems: $("#myDialog"),
copy_css: true,
external_css: 'test2.css'
});
});
This will add a printable area, and puts modal html into it.
$(function () {
$("#openDialog").click(function () {
$("#myDialog").dialog('open')
});
$("#myDialog").dialog({
modal: true,
autoOpen: false,
buttons: {
Ok: function (e) {
$('#divToPrint').html($(this)[0].innerHTML).printArea();
}
}
});
});
You need to create a new <div id="divToPrint"></div> if you want to not display the new div, just use style="display: none;"
Then when you press CTRL+P it will print what you created...
Try like below.....and call your div id. You should be good to go.
buttons: {
"Print": function() {
$("#dialog").printArea();
},
"Close": function() {
$(this).dialog("close");
}
}
Related
I have to admin a quite small web presentation with only some javascript. It was written some years ago and now I try to implement a mobile compatible menu.
This are the versions of jQuery which were installed before I started with the new menu:
jQuery.min.js : jQuery JavaScript Library v1.6.1
jQuery.tools.overlay.min.js : jQuery Tools v1.2.7 - The missing UI library for the Web
jQuery-ui.min.js : jQuery UI 1.8.13
Now I try several newer jQuery code, and at the moment I use this versions:
<script src="scripts/jquery-1-12-3.min.js" type="text/javascript"></script>
<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
The plug in I want to use for the menu is "doubletaptogo.js":
(function($) {
/*
Responsive Flat Menu
http://cssmenumaker.com/menu/responsive-flat-menu
*/
$.fn.menumaker = function(options) {
var cssmenu = $(this),
settings = $.extend({
title: "Menu",
format: "dropdown",
sticky: false
}, options);
return this.each(function() {
cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
$(this).find("#menu-button").on('click', function() {
$(this).toggleClass('menu-opened');
var mainmenu = $(this).next('ul');
if (mainmenu.hasClass('open')) {
mainmenu.hide().removeClass('open');
} else {
mainmenu.show().addClass('open');
if (settings.format === "dropdown") {
mainmenu.find('ul').show();
}
}
});
cssmenu.find('li ul').parent().addClass('has-sub');
multiTg = function() {
cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
cssmenu.find('.submenu-button').on('click', function() {
$(this).toggleClass('submenu-opened');
if ($(this).siblings('ul').hasClass('open')) {
$(this).siblings('ul').removeClass('open').hide();
} else {
$(this).siblings('ul').addClass('open').show();
}
});
};
if (settings.format === 'multitoggle') multiTg();
else cssmenu.addClass('dropdown');
if (settings.sticky === true) cssmenu.css('position', 'fixed');
resizeFix = function() {
if ($(window).width() > 768) {
cssmenu.find('ul').show();
}
if ($(window).width() <= 768) {
cssmenu.find('ul').hide().removeClass('open');
}
};
resizeFix();
return $(window).on('resize', resizeFix);
});
};
})(jQuery);
/*
By Osvaldas Valutis, www.osvaldas.info
Available for use under the MIT License
*/
;
(function($, window, document, undefined) {
$.fn.doubleTapToGo = function(params) {
if (!('ontouchstart' in window) &&
!navigator.msMaxTouchPoints &&
!navigator.userAgent.toLowerCase().match(/windows phone os 7/i)) return false;
this.each(function() {
var curItem = false;
$(this).on('click', function(e) {
var item = $(this);
if (item[0] != curItem[0]) {
e.preventDefault();
curItem = item;
}
});
$(document).on('click touchstart MSPointerDown', function(e) {
var resetItem = true,
parents = $(e.target).parents();
for (var i = 0; i < parents.length; i++)
if (parents[i] == curItem[0])
resetItem = false;
if (resetItem)
curItem = false;
});
});
return this;
};
})(jQuery, window, document);
/**
* doubleTapToGoDecorator
* Adds the ability to remove the need for a second tap
* when in the mobile view
*
* #param {function} f - doubleTapToGo
*/
function doubleTapToGoDecorator(f) {
return function() {
this.each(function() {
$(this).on('click', function(e) {
// If mobile menu view
if ($('#menu-button').css('display') == 'block') {
// If this is not a submenu button
if (!$(e.target).hasClass('submenu-button')) {
// Remove the need for a second tap
window.location.href = $(e.target).attr('href');
}
}
});
});
return f.apply(this);
}
}
// Add decorator to the doubleTapToGo plugin
jQuery.fn.doubleTapToGo = doubleTapToGoDecorator(jQuery.fn.doubleTapToGo);
/**
* jQuery
*/
(function($) {
$(document).ready(function() {
$("#cssmenu").menumaker({
title: "Menu",
format: "multitoggle"
});
$('#cssmenu li:has(ul)').doubleTapToGo();
});
})(jQuery);
The menu looks like:
<nav id='cssmenu' role='navigation'>
Show navigation
Hide navigation
<ul>...
...and when I debug with Firebug I always see the error mentioned in subject of this post!
Are there still problems with the versions of jQuery? I'm very sorry, but I'm not used to programming very much in javascript.
Thanks a lot for your help in advance!
I added now
<script type="text/javascript" src="scripts/jquery-ui.min.js" ></script> // v1.11.4
I bind the doubletaptogo with that code to the body of my html:
<script type="text/javascript">
$(function () {
$('.cssmenu').doubleTapToGo();
});
</script>
So far, it unfortunately does not work.
With this doubletaptogo.min.js I have a fine menu on my Laptop, without an error in Firebug, but no menu on my mobile Units:
;(function(e,t,n,r){e.fn.doubleTapToGo=function(r){if(!("ontouchstart"in t)&&!navigator.msMaxTouchPoints&&!navigator.userAgent.toLowerCase().match(/windows phone os 7/i))return false;this.each(function(){var t=false;e(this).on("click",function(n){var r=e(this);if(r[0]!=t[0]){n.preventDefault();t=r}});e(n).on("click touchstart MSPointerDown",function(n){var r=true,i=e(n.target).parents();for(var s=0;s<i.length;s++)if(i[s]==t[0])r=false;if(r)t=false})});return this}})(jQuery,window,document);
With that doubletaptogo.js there is an error in Firebug (like mentioned in the subject), but a fine menu on my Laptop, and a "Menu" on my mobile Units which does not react on anything. I tried also to Change the find() against a filter(), but then the filter() was "not a function".
What else can be the Problem?
I also tried to use only the code of that site as a menu, just to Show it on my site:
http://codepen.io/dmitrykiselyov/pen/XJwqZM
...and this did not work also. There was only the "Menu" on my mobile Units which did not react.
So, may be Problem with the jQuery? I use now the jquery-1-12-3.min.js and the ui is Version v1.11.4.
May be a bad combination?
I got same error, solution is please use the latest jQuery version from 1.x.y serie (you can pick here: https://code.jquery.com/jquery/ 1.12.4 is working well for me).
I have a jqgrid that I am trying to use tinyMCE in the text area to send/store html in my database and reload to my grid. I have a custom column with tinyMCE for the text area but after I open editform once and close it next time it is opened tinymce does not initialize and a regular textarea appears. (Also when url modal it looses focus and focuses on editform. The text is pasted to the back "Project" field instead(picture below).)What I'm I doing wrong?
Reason why my TineMCE "Links" was losing focus was because of a simple syntax error. I had modal:true in the editgrid code.
UPDATE FOR WORKING INLINE EDIT IMPLEMENTATION
Here are examples for correct implementation for inline edit(Thank you #Oleg): DEMO1 | DEMO2
INLINE EDIT WORKING CODE SAMPLE:
{ name: "note", width: 260, sortable: false, editable: true,
//edittype: "textarea"
edittype:'custom',
editoptions: {
custom_element: function (value, options) {
var elm = $("<textarea></textarea>");
elm.val(value);
// give the editor time to initialize
setTimeout(function () {
try {
tinymce.remove("#" + options.id);
} catch(ex) {}
tinymce.init({selector: "#" + options.id, plugins: "link"});
}, 50);
return elm;
},
custom_value: function (element, oper, gridval) {
var id;
if (element.length > 0) {
id = element.attr("id");
} else if (typeof element.selector === "string") {
var sels = element.selector.split(" "),
idSel = sels[sels.length - 1];
if (idSel.charAt(0) === "#") {
id = idSel.substring(1);
} else {
return "";
}
}
if (oper === "get") {
return tinymce.get(id).getContent({format: "row"});
} else if (oper === "set") {
if (tinymce.get(id)) {
tinymce.get(id).setContent(gridval);
}
}
}}
}
jqGrid column:
<script src="js/jquery-1.9.0.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.10.3.custom.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
<script src="tinymce/tinymce.min.js"type="text/javascript"></script>
<script src="tinymce/jquery.tinymce.min.js"type="text/javascript"></script>
<script src= "tinymce/plugins/link/plugin.min.js" type="text/javascript"></script>
<script type="text/javascript">
...
{ name:'notes',
index:'notes',
edittype:'custom', editable:true,
editoptions:{
"custom_element":function( value , options) {
var elm = $('<textarea></textarea>');
elm.val( value );
// give the editor time to initialize
setTimeout( function() {
tinymce.init({selector: "textarea#notes",plugins: "link"});
}, 100);
return elm;
},
"custom_value":function( element, oper, gridval) {
if(oper === 'get') {
return tinymce.get('notes').getContent({format: 'row'});
} else if( oper === 'set') {
if(tinymce.get('notes')) {
tinymce.get('notes').setContent( gridval );
}
}
}}}
Try to replace the code of custom_element to the following
custom_element: function (value, options) {
var elm = $("<textarea></textarea>");
elm.val(value);
// give the editor time to initialize
setTimeout(function () {
try {
tinymce.remove("#" + options.id);
} catch(ex) {}
tinymce.init({selector: "#" + options.id, plugins: "link"});
}, 50);
return elm;
}
One more simpel
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
This code is not working. I don't know what resource I need to add. I am following a link for Datepicker here: http://jsfiddle.net/rMhVz/1030/ And my code is down below. I really need to get it to work. I appreciate any help. Thanks in Advance.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js"></script>
<link rel="stylesheet" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.7/themes/black-tie/jquery-ui.css"></link>
<link rel="stylesheet" href="/resources/demos/style.css"></link>
<style type="text/css">
.event > a {
background-color: gray !important;
background-image:none !important;
}
</style>
<script>
// hookup jquery ready function
$(document).ready(function () {
var Event = function(text, desc) {
this.text = text;
this.desc = desc;
};
var events = {};
events[new Date("07/06/2014")] = new Event("hello world test 1");
events[new Date("08/8/2014")] = new Event("hello world test 2");
events[new Date("09/26/2014")] = new Event("hello world test 3");
$("#dates").datepicker({
beforeShowDay: function(date) {
var event = events[date];
if (event) {
return [true, 'event', event.text];
}
else {
return [true, '', ''];
}
},
onSelect: function(dateText) {
var event = events[new Date(dateText)];
if (event) {
alert(event.text + "\n" + event.desc);
}
}
});
});
</script>
</head>
<body>
<div id="dates"></div>
</body>
</html>
Actually, I don't believe the script load order was the only problem. You're using incompatible versions of jQuery and jQuery UI. Your code breaks on a call to $.browser.msie. $.browser was removed in jQuery 1.9.
Source of error in jquery.ui:
html += buttonPanel + ($.browser.msie && parseInt($.browser.version,10) < 7 && !inst.inline ? '<iframe src="javascript:false;" class="ui-datepicker-cover" frameborder="0"></iframe>' : '');
Try using a more recent version of jQuery UI that is compatible with jQuery 1.9+.
See Uncaught TypeError: Cannot read property 'msie' of undefined - jQuery tools.
EDIT: For clarification, your script includes should be
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.1/jquery-ui.js"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.1/themes/black-tie/jquery-ui.css"></link>
Consider using jQuery 1.9.1, but it appears to work fine with 1.9.0.
You didn't include jQuery. Include it before any other js or jquery file and you should be good.
Include jQuery in the following order : jQuery - jQueryUI - jQueryUIcss.
Include css files using <link>.
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js"></script>
<link rel="stylesheet" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.7/themes/black-tie/jquery-ui.css"> </link>
Use $(document).ready(..) for your JS - so that all the execution happens after all the DOM elements are loaded.
<script>
$(document).ready(function(){
var Event = function(text, desc) {
this.text = text;
this.desc = desc;
};
var events = {};
events[new Date("07/06/2014")] = new Event("hello world test 1");
events[new Date("08/8/2014")] = new Event("hello world test 2");
events[new Date("09/26/2014")] = new Event("hello world test 3");
$("#dates").datepicker({
beforeShowDay: function(date) {
var event = events[date];
if (event) {
return [true, 'event', event.text];
}
else {
return [true, '', ''];
}
},
onSelect: function(dateText) {
var event = events[new Date(dateText)];
if (event) {
alert(event.text + "\n" + event.desc);
}
}
});
});
</script>
Just add jQuery before jQuery UI, use <link> instead of <script> for the css and use jQuery function from document.ready:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.1.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.1/jquery-ui.js"></script>
<link rel="stylesheet" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.7/themes/black-tie/jquery-ui.css"></link>
<link rel="stylesheet" href="/resources/demos/style.css"></link>
<style type="text/css">
.event > a {
background-color: gray !important;
background-image:none !important;
}
</style>
<script>
// hookup jquery ready function
$(document).ready(function () {
var Event = function(text, desc) {
this.text = text;
this.desc = desc;
};
var events = {};
events[new Date("07/06/2014")] = new Event("hello world test 1");
events[new Date("08/8/2014")] = new Event("hello world test 2");
events[new Date("09/26/2014")] = new Event("hello world test 3");
$("#dates").datepicker({
beforeShowDay: function(date) {
var event = events[date];
if (event) {
return [true, 'event', event.text];
}
else {
return [true, '', ''];
}
},
onSelect: function(dateText) {
var event = events[new Date(dateText)];
if (event) {
alert(event.text + "\n" + event.desc);
}
}
});
});
</script>
</head>
<body>
<div id="dates"></div>
</body>
</html>
I struggled and finally got [this] to work. now, I wanted to break it up as shown below but it doesn't work... is there some voodoo here I don't understand?
<!DOCTYPE html>
<html>
<head>
<!-- jQuery -->
<script type="text/javascript" src="http://goo.gl/XQPhA"></script>
<script type="text/javascript">
(function($) {
$.test = function(options) {
options = $.extend({}, $.test.settings, options);
this.whiten = function() {
$(this).css('background-color', options.bg);
};
};
$.test.settings = { bg: 'white' };
$.fn.test = function(options) {
return this.each(function(index, el) {
$.test(options);
});
};
})(jQuery);
$(document).ready(function() {
$('ul').test().css('background-color', 'wheat');
$('#go').click(function() {
$('ul').whiten();
});
});
</script>
</head>
<body>
<button id="go">whiten</button>
<ul id="list1">
<li>Aloe</li>
<li>Bergamot</li>
<li>Calendula</li>
<li>Damiana</li>
<li>Elderflower</li>
<li>Feverfew</li>
</ul>
<ul id="list2">
<li>Ginger</li>
<li>Hops</li>
<li>Iris</li>
<li>Juniper</li>
<li>Kavakava</li>
<li>Lavender</li>
<li>Marjoram</li>
<li>Nutmeg</li>
<li>Oregano</li>
<li>Pennroyal</li>
</ul>
</body>
</html>
as compared with the previous code, inside of the each() loop I call now $.test(options) instead of $.fn.test(options) - so why does one work and not the other (actually, why/how does the first one work to begin with)?
I would restructure your plugin to follow the guidelines outlined in the plugin authoring guide, most notably storing the data for the settings for your widget with .data() and making method calls to your plugin with .test("method"):
(function($) {
/* Default plugin settings: */
var settings = {
bg: 'white'
};
/* Method definitions: */
var methods = {
init: function(options) {
options = $.extend({}, options, settings);
return this.each(function () {
$(this).data("test", options);
});
},
whiten: function() {
var options = this.data("test");
this.css('background-color', options.bg);
}
};
/* Plugin definition and method calling logic: */
$.fn.test = function(method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist');
}
}
})(jQuery);
Usage: $("elem").test(), $("elem").test("whiten")
Here's a working example: http://jsfiddle.net/z4R3X/
An additional resource for plugin authoring guidance is the jQueryUI source code (take the autocomplete widget for example). These widgets are pretty good examples of how to create reusable, readable jQuery plugins.
I'm creating a simple jQuery editor, nothing complicated, and just can't seem to find out why the events do not work. See code below.
var $editor = $('<div>').addClass('editor')
.insertBefore(this.$element)
.append(this.$element);
var $b = $('<div>').addClass('button-wrapper')
.appendTo($editor);
this.$element.css({height:this.opts.height,width:this.opts.width});
//Load up each button.
$.each(this.opts.buttons.split(' '), function(i, button)
{
//If its an empty string keep going.
if(button == '')return true;
//Generate a button.
$('<div>').data('buttonName', button)
.addClass(button.toLowerCase())
.click(clicked)
.hover(hover, hover)
.appendTo($b);
});
To go over it, simply, $element represents the textarea that I am using as the base element, $b represents the button wrapper, and $editor is the div to wrap around all of these things. When I append the buttons to $editor none of the events fire, however, when I append to document.body it works perfectly fine. For the record, the event clicked and hover are nothing special, just testers to see if the events are working.
I guess the issue is actually at all places you are using <div> but it should be just div
like below -
var $editor = $('div').addClass('editor')
.insertBefore(this.$element)
.append(this.$element);
I've rewritten your code a little bit, just to figure out what you're doing. This seems to work for me, unless I didn't understand what the problem is that you're describing. The buttons react to hover as well as click events. Aside from writing the things you're doing differently, there's no substantial change in the code.
I suppose there's a chance that Val was right in that there may be other elements overlaying your buttons. You haven't shown us your CSS, so it's hard to tell what's going on on your side.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style>
.bold, .italic, .underline{ width: 50px; height: 20px; background: green; margin: 10px; }
</style>
</head>
<body>
<textarea class="demo">
</textarea>
<script type="text/javascript">
jQuery(
function($)
{
(function($){
//Constructor to make a new editor.
function TEditor(element, opts)
{
//Load in the element.
this.$element = $(element);
this.opts = opts;
//Let the browser know the object is ready.
this.enabled = true;
}
//The actual editor class.
TEditor.prototype = {
display: function()
{
var
$editor = this.$element.wrap('<div class="editor" />').parent(),
$b = $('<div class="button-wrapper" />').appendTo($editor);
this.$element.css({height:this.opts.height,width:this.opts.width});
//Load up each button.
$.each(this.opts.buttons.split(' '), function(i, button)
{
//If its an empty string keep going.
if(button == '') return true;
//Generate a button.
$('<div class="' + button.toLowerCase() + '" />')
.data('buttonName', button)
.appendTo($b)
.click(clicked)
.hover(hover, hover);
});
},
enable: function()
{
this.enabled = true;
},
disable: function()
{
this.enabled = false;
},
validate: function()
{
if(!this.$element[0].parentNode)
{
this.destroy();
this.$element = null;
this.options = null;
}
}
}
//JQuery function extension.
$.fn.teditor = function(options)
{
options = $.extend({}, $.fn.teditor.defaults, options);
//On load create a new editor.
function get(ele)
{
var editor = $.data(ele, 'editor');
if(!editor)
{
editor = new TEditor(ele, options);
editor.display();
$.data(ele, 'editor', editor);
}
return editor;
}
//Initialize.
this.each(function(){get(this);})
return this;
};
$.fn.teditor.defaults = {
buttons: 'Bold Italic Underline',
height: '150px',
width: '500px'
};
function clicked(e)
{
alert(e);
}
function hover(e)
{
console.log('hover');
}
})(jQuery);
$('.demo').teditor();
}
);
</script>
</body>
</html>