jsPanel : jQuery Floating Panels plugin for Bootstrap

Download   Demo

Setting options in the configuration object of the .jsPanel() function will set options for the individual jsPanel. It will not change options globally. To see how to change the defaults globally go down to the defaults section.

This option is one of several ways to load content into the jsPanel. Additional ways to load content are provided by option.content and option.load. Option.load internally uses the native jQuery method .load()

Type: object

Default: false

The settings of the option.ajax configuration object are used the same way as the arguments for jQuery.ajax() are used.

For detailed information about the jQuery.ajax() configuration refer to the jQuery API

1. $(‘#option-ajax’).jsPanel(


2. size:‘auto’,


3. ajax:


4. url:‘files/example-ajax.html’


5. 
   
6. );

The option.ajax settings object accepts the following additional settings:

• done: function( data, textStatus, jqXHR, jsPanel )
  
  A function that will be passed to jQuerys .done() callback and receives the same arguments as jQuerys .done() callback plus the jsPanel as fourth argument.


• fail: function( jqXHR, textStatus, errorThrown, jsPanel )
  
  A function that will be passed to jQuerys .fail() callback and receives the same arguments as jQuerys .fail() callback plus the jsPanel as fourth argument.


• always: function( data|jqXHR, textStatus, jqXHR|errorThrown, jsPanel )
  
  A function that will be passed to jQuerys .always() callback and receives the same arguments as jQuerys .always() callback plus the jsPanel as fourth argument.
  
  In response to a successful request, the function’s arguments are the same as those of .done(): data, textStatus, and the jqXHR object plus the jsPanel as fourth argument.
  
  For failed requests the arguments are the same as those of .fail(): the jqXHR object, textStatus, and errorThrown plus the jsPanel as fourth argument.


• then: function( data, textStatus, jqXHR, jsPanel ) , function( jqXHR, textStatus, errorThrown, jsPanel )
  
  Expects an array of two functions. The first function serves as callback for a successful request, the second one as callback for a failed request.

1. $(‘#option-ajax’).jsPanel(


2. size:‘auto’,


3. position: top:770, left:15,


4. ajax:


5. url:‘files/example-ajax-2.html’,


6. done:function( data, textStatus, jqXHR, jsPanel )


7. console.log(‘jqXHR status: ‘+ jqXHR.status +‘ ‘+ jqXHR.statusText +‘ ‘+ textStatus );


8. ,


9. fail:function( jqXHR, textStatus, errorThrown, jsPanel )


10. $(‘.panel-body’, jsPanel ).append( jqXHR.responseText );


11. ,


12. always:function( arg1, textStatus, arg3, jsPanel )


13. console.log( textStatus );


14. 
    
15. 
    
16. );

1. $(‘#option-ajax’).jsPanel(


2. size:‘auto’,


3. position: top:1187, left:15,


4. ajax:


5. url:‘files/example-ajax-3.html’,


6. then:[


7. function( data, textStatus, jqXHR, jsPanel )


8. jsPanel.title('Example for option.ajax.then');


9. console.log( textStatus )


10. ,


11. function( jqXHR, textStatus, errorThrown, jsPanel )


12. $('.panel-body', jsPanel ).append( jqXHR.responseText );


13. console.log( errorThrown )


14. 
    
15. ]


16. 
    
17. );

option.autoclose

version 1.0

This option allows the jsPanel to close automatically after the specified time in milliseconds.

Type: number

Default: false

1. $(‘#option-autoclose’).jsPanel(


2. autoclose:4000


3. );

and wait a few seconds to see the jsPanel close automatically

option.content

version 1.0

This option is one of several ways to load content into the jsPanel. Additional ways to load content are provided by option.load and option.ajax.

Type: string | function | jQuery object

Default: false

1. $(‘#option-content’).jsPanel(


2. content:“<div class=’preloader’><img src=’images/pl.gif’></div>”,


3. position:‘center’


4. );

1. $(‘#option-content’).jsPanel(


2. content:function()return“<div class=’preloader’><img src=’images/pl.gif’></div>”;,


3. position:‘center’


4. );

1. $(‘#option-content’).jsPanel(


2. content: $(‘<p>Lorem ipsum …</p>’).css(padding:’20px’,‘text-align’:‘center’),


3. position:‘center’


4. );

 

jsPanel : jQuery Floating Panels plugin for Bootstrap