This option indicates **Server** trigger start event automatically.
* **show** : true / false, default: true * **src** : URL of widget * **options** : { //custom widget specification }Extra options will pass to **Server** object
Getting widget options in a **Widget** ```js this.options ``` ###Methods * **show()**Manually show a widget
* **hide()**Manually hides a widget
* **toggle()**Display or hide the widget
* **close()**Manually destroy a widget
* **isShow()**Detect if a widget is visible
* **getId()**Get widget Id
* **on('custom-event',callbackFunction)**Bind a callback function to a **Widget**
```js myWidget.on('chooseFiles', function(files){ // do something... }); ``` * **off('custom-event')**Remove all previously-bound callback function from a **Widget**
* **trigger('custom-event',eventData)**Trigger **Server** callbacks for the given event. Subsequent arguments to trigger will be passed along to the **Server** callback function. ```js mywidget.trigger('hello',{name: 'world'}); ``` ##Widgetfly.Modal ###Widget Options * **container** : id / class / HTML tag * **backdrop** : true / false * **autoGrow** : true / false , default: false * **autoStart** : true / false , default: true
This option indicates **Server** trigger start event automatically.
* **show** : true / false, default: false * **src** : URL of widget * **size** : small / medium / large * **options** : { //custom widget specification }Extra options will pass to **Server** object
Getting widget options in a **Widget** ```js this.options ``` ###Methods * **show()**Manually show a widget
* **hide()**Manually hides a widget
* **toggle()**Display or hide the widget
* **close()**Manually destroy a widget
* **isShow()**Detect if a widget is visible
* **getId()**Get widget Id
* **on('custom-event',callbackFunction)**Bind a callback function to a **Widget**
```js myWidget.on('chooseFiles', function(files){ // do something... }); ``` * **off('custom-event')**Remove all previously-bound callback function from a **Widget**
* **trigger('custom-event',eventData)**Trigger **Server** callbacks for the given event. Subsequent arguments to trigger will be passed along to the **Server** callback function. ```js mywidget.trigger('hello',{name: 'world'}); ``` ##Widgetfly.Popover ###Widget Options * **target** : id / class / HTML tag * **placement** : top / left / bottom / right / auto * **autoGrow** : true / false , default: false * **autoStart** : true / false , default: true
This option indicates **Server** trigger start event automatically.
* **show** : true / false, default: false * **src** : URL of widget * **styles** : extra css styles (ex. width:500px; height:500px;) * **options** : { //custom widget specification }Extra options will pass to **Server** object
Getting widget options in a **Widget** ```js this.options ``` ###Methods * **show()**Manually show a widget
* **hide()**Manually hides a widget
* **toggle()**Display or hide the widget
* **close()**Manually destroy a widget
* **isShow()**Detect if a widget is visible
* **getId()**Get widget Id
* **on('custom-event',callbackFunction)**Bind a callback function to a **Widget**
```js myWidget.on('chooseFiles', function(files){ // do something... }); ``` * **off('custom-event')**Remove all previously-bound callback function from a **Widget**
* **trigger('custom-event',eventData)**Trigger **Server** callbacks for the given event. Subsequent arguments to trigger will be passed along to the **Server** callback function. ```js mywidget.trigger('hello',{name: 'world'}); ``` ##Default events callback binding for widgets * onShow * onHide * onBeforeClose ```js myWidget.onBeforeClose(function(){ return window.confirm('are your sure?'); }); ``` #Widgets development ##Widgetfly.Server In widget, we seems you will be a user, the widget provider(developer) generate a widget and provide some actions for you, like hide, widget provide controll a method ```onHide()```, so when you controll the view and set hide, thec action will work with method ```onHide()``` and work. ###Using Server instance ```js var myServer = Widgetfly.Server.get(); myServer.trigger('your-event',{//event data}); ``` ###Custom your Server and Widget Extending **Server** class ```js var CustomServer = Widgetfly.Server.extend({ //extend to add your features hello : function(name){ this.trigger('hello',{name: name}); } }); var myCustomServer = new CustomServer({//custom options}); myCustomServer.hello('world'); ``` Extending **Widget** class ```js var CustomPanel = Widgetfly.Panel.extend({ //extend to add support Server features onHello : function(callback){ this.on('hello',callback); } }); var myCustomPanel = new CustomPanel({ /*custom widget options*/ options : { '...' : '...', 'your_parameters_obj': 'passing parameters to Server' } }); myCustomPanel.onHello(function(name){ alert('hello ' + name); }); ``` ###Server options * **origin** : The Widget origin * **autoGrow** : true / false
Expanding height to fit the widget content when widget is initialized.
* **autoStart** : true / false, default: trueThis option indicates **Server** trigger start event automatically.
* **options** : {//custom widget specification}Custom options will pass from Widget to Server object
Get custom options passing from a **Widget** object. ```js this.options.options ``` ###Methods * **show()**Manually **Server** trigger to show a **Widget**
```js Widgetfly.Server.get().show(); ``` * **hide()**Manually **Server** trigger to hide a **Widget**
```js Widgetfly.Server.get().hide(); ``` * **toggle()**Display or hide the widget
```js Widgetfly.Server.get().toggle(); ``` * **start()**Manually **Server** trigger to start a **Widget**
```js Widgetfly.Server.get().start(); ``` * **close()**Manually **Server** trigger to destroy a **Widget**
```js Widgetfly.Server.get().close(); ``` * **expand()**This method helps you to expand **Widget** height to fit the widget content, This method is usually used after widget is loaded and render HTML finished.
``` Widgetfly.Server.get().expand(); ``` * **compact()**This method helps you to compact **Widget** height to fit the widget content, This method is usually used after widget is loaded and render HTML finished.
``` Widgetfly.Server.get().compact(); ``` * **isShow(callback)**check if **Widget** is shown
``` Widgetfly.Server.get().isShow(function(show){ console.log(show); }); ``` * **onShow(callback)**bind a callback function to listen the show event from **Widget**.
``` Widgetfly.Server.get().onShow(function(){ Widgetfly.Server.get().expand(); }); ``` * **on('custom-event',callbackFunction)**Bind a callback function to listen event from **Widget**
```js myServer.on('doSomething', function(data){ // do something... }); ``` * **off('custom-event')**Remove all previously-bound callback function from a **Server**
* **trigger('custom-event',eventData)**Trigger **Widget** callbacks for the given event. Subsequent arguments to trigger will be passed along to the **Widget** callback function. ```js myServer.trigger('hello',{name: 'world'}); ```