jquery-widgets

Details difference between jQuery plugin and Widget

由 巧了我就是萌 提交于 2021-01-29 08:32:22
问题 I found the difference between jQuery plugin and widget herelink. It states that "This is different from a standard jQuery plugin in two important ways. First, the context is an object, not a DOM element. Second, the context is always a single object, never a collection." My question is : How does Widget hold the states? Here what does it mean by the context and single object? Yes After reading books JQuery UI in Action I got answer of my question. *"A widget’s differentiating feature is its

jQuery plugins vs widgets

由 本秂侑毒 提交于 2020-01-01 01:12:46
问题 Few months ago I started some experiments with jQuery plugin. I found some tutorials on the Interenet and I started to put something together. A couple of days ago I had the need to build my own "plugin" and got back to my old project. Trying to find some more informations on the internet, I bumped in these new "things" called widgets. For what I understand I should forget about plugins and start developing widgets. Are the plugins an old concept or are still valid? What is the best approach

Inherit jQuery widgets and call some base widget's method from outside

由 孤街浪徒 提交于 2019-12-12 01:56:05
问题 I have two jQuery widgets, Widget A is the base one and the Widget B inherits Widget A. Widget A: $(function () { $.widget("custom.widgetA", { _create: function () { this.element .addClass('ui-widget-a') .append( $(document.createElement('div')).text('Widget A') ); }, someMethod: function() { return 'widget A'; } }); }(jQuery)); Widget B: $(function () { $.widget("custom.widgetB", $.custom.widgetA, { _create: function () { this.element .addClass('ui-widget-b') .append( $(document

overriding a jquery ui widget string option with an object

由 依然范特西╮ 提交于 2019-12-11 10:53:53
问题 I want to have a jquery ui widget option be a string by default, but I want it to be able to overridden by an object. When I do this, I actually get the string converted to an object in some strange way, and then extended with whatever object I pass in. $.widget("ui.test", { options: { anOption: "a,b,c" }, _create: function() { console.log(this.options); } }); $('div').test({ anOption: { a: 'A' } }); If I skip passing in the option to the widget, it will be received as a string in the _create

Best way to make jquery ui with typescript

由 寵の児 提交于 2019-12-10 03:50:12
问题 I'm making a jquery widget with widget factory typed in typescript. How to provide a good intellisense without having to write .d.ts ? ex: /*mywidget.ts*/ $.widget("ui.mywidget", { options: { myoption: "" }, doSomething: function () { this._hasDoSomething = true; /*do doSomething*/ }, hasDoSomething: function (): bool { return <bool>this._hasDoSomething; } }); /*mywidget.d.ts*/ interface MyWidgetOptions { myoption: string; } interface MyWidget extends Widget, MyWidgetOptions {} interface NLIB

Best way to make jquery ui with typescript

由 拜拜、爱过 提交于 2019-12-05 04:22:34
I'm making a jquery widget with widget factory typed in typescript. How to provide a good intellisense without having to write .d.ts ? ex: /*mywidget.ts*/ $.widget("ui.mywidget", { options: { myoption: "" }, doSomething: function () { this._hasDoSomething = true; /*do doSomething*/ }, hasDoSomething: function (): bool { return <bool>this._hasDoSomething; } }); /*mywidget.d.ts*/ interface MyWidgetOptions { myoption: string; } interface MyWidget extends Widget, MyWidgetOptions {} interface NLIB { mywidget: MyWidget; } interface JQuery { mywidget(): JQuery; mywidget(methodName: string): JQuery;

Accessing widget instance from outside widget

由 让人想犯罪 __ 提交于 2019-12-03 06:45:50
问题 This is a simple widget mock: (function ($) { $.widget("ui.myDummyWidget", { options: { }, _create: function () { }, hide: function () { this.element.hide(); }, _setOption: function (key, value) { $.Widget.prototype._setOption.apply(this, arguments); }, destroy: function () { $.Widget.prototype.destroy.call(this); } }); } (jQuery)); It only adds a method hide that you can call to hide the element. Easy if done from within widget this.hide(); But a common scenario is that you want to call

Accessing widget instance from outside widget

由 别来无恙 提交于 2019-12-02 20:24:37
This is a simple widget mock: (function ($) { $.widget("ui.myDummyWidget", { options: { }, _create: function () { }, hide: function () { this.element.hide(); }, _setOption: function (key, value) { $.Widget.prototype._setOption.apply(this, arguments); }, destroy: function () { $.Widget.prototype.destroy.call(this); } }); } (jQuery)); It only adds a method hide that you can call to hide the element. Easy if done from within widget this.hide(); But a common scenario is that you want to call methods on a widget instance from the outside (Ajax update, or other external events) So what is the best

How to get the input element triggering the jQuery autocomplete widget?

由 血红的双手。 提交于 2019-11-29 16:32:49
问题 I have several input fields that are enhanced with jQuery auto-complete functionality. How to get the corresponding input field when a select event is triggered? <input name="1" value=""> <input name="2" value=""> <input name="3" value=""> $('input[type=text]').autocomplete({ source: 'suggestions.php', select: function(event, ui) { // here I need the input element that have triggered the event } }); 回答1: Try using $(this) $('input[type=text]').autocomplete({ source: 'suggestions.php', select:

How to change this jQuery widget (written for jQueryUI 1.7) so that it works with jQueryUI 1.8

由 北城以北 提交于 2019-11-29 08:43:19
This jQuery plugin , which lets users draw rectangles in a div, works with jQueryUI 1.7.2. I need to get it working with jQueryUI 1.8.4 . From reading the widget upgrade guide , I can't work out what needs to change. I tried renaming _init() to _create(), but that didn't do anything. What else do I need to change to get it working? Thanks for reading. The $.widget signature changed to do the extend internally, so change this: $.widget("ui.boxer", $.extend({}, $.ui.mouse, { To this: $.widget("ui.boxer", $.ui.mouse, { And at the bottom, remove the extra ) as well, changing })); to }); Also, to
订阅 jquery-widgets