You are here

README.txt in jQuery UI filter 7

Same filename and directory in other branches
  1. 6 README.txt
CONTENTS OF THIS FILE
---------------------

 * Introduction
 * Usage
 * Features
 * Requirements
 * Installation
 * Customization
 * Similar Modules
 * Todo

INTRODUCTION
------------

The jQueryUI filter converts static HTML to a jQuery UI accordian or tabs widget
and opens links inside a jQuery UI dialog.

For example, this module converts the below HTML code into a
collapsed jQueryUI accordion widget.

<p>[accordion collapsed]</p>

  <h3>Section I</h3>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

  <h3>Section II</h3>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

  <h3>Section III</h3>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

<p>[/accordion]</p>

Learn more about jQueryUI's accordion, dialog, and tabs widget.
- http://jqueryui.com/demos/accordion/
- http://jqueryui.com/demos/dialog/
- http://jqueryui.com/demos/tabs/

Roll your own custom jQueryUI theme
- http://jqueryui.com/themeroller/


USAGE
-----

Use [accordion] and [/accordion] or [tabs] and [/tabs] to create a jQuery UI
Accordian or tabs. Using [accordion collapsed] will start with the accordion
closed.

To open a link inside a jQuery UI dialog set the link\'s the target attribute
to [dialog] or [modal] with optional JSON data with single quotes.

<p><a href="/contact" target="[modal {'width': 400, 'height': 600}]">Contact Us</a></p>


FEATURES
--------

- Full UI for customizing most jQuery UI accordion, dialog, and tabs options.

- Adds option to include paging buttons below tabs.

- Adds history and bookmark support to accordions and tabs.

- Gracefully degrades when JavaScript is disabled.


REQUIREMENTS
------------

- jQuery plugins: An API and home for miscellaneous jQuery plugins.
  http://drupal.org/project/jquery_plugin
  (Optional: Used to store jQuery UI tabs state in a cookie.)


INSTALLATION
------------

IMPORTANT:
Make sure your text formats are configured to support <h3> tags.
The default filter, included with Drupal, removes <H3> tags from filtered text.

1. Copy/upload the jquery_ui_filter.module to the sites/all/modules directory
   of your Drupal installation.

2. Enable the 'jQueryUI filter' modules in 'Modules', (admin/modules)

3. Visit the 'Configuration > [Content authoring] Text formats'
   (admin/config/content/formats). Click "configure" next to the input format you want
   to enable the jQueryUI filter.

4. Enable (check) the jQueryUI filter under the list of filters and save
   the configuration.

5. (optional) Visit the 'Configuration > [Content authoring] jQuery UI filter'
   (admin/config/content/jquery_ui_filter). 


CUSTOMIZATION
-------------

- Besides using the UI for customizing your jQuery UI widget you can define 
  default options by adding the the below JavaScript snippets to your 
  theme's script.js file.

(function ($) {

// Set Jquery UI Filter default options
Drupal.jQueryUiFilter = Drupal.jQueryUiFilter || {}

// Set Jquery UI accordion options: http://jqueryui.com/demos/accordion/
Drupal.jQueryUiFilter.accordionOptions = {
  autoHeight: false
}

// Set Jquery UI dialog options: http://jqueryui.com/demos/dialog/
Drupal.jQueryUiFilter.dialogOptions = {
  modal: true
}

// Set Jquery UI tabs options: http://jqueryui.com/demos/tabs/
Drupal.jQueryUiFilter.tabsOptions = {
  event: 'click',
  fx: {opacity: 'toggle'},
  paging: true
}

})(jQuery);


SIMILAR MODULES
---------------

[Dialog]
- Automodal: Automatically convert certain classed links to modal popups
  and provides an API to add custom modals quickly and easily.
  http://drupal.org/project/automodal

- Automodal URL: Loads a modal frame automatically based on URL parameters.
  http://drupal.org/project/automodal_url

- Dialog API: The module provides an API for creating and updating javascript
  dialog windows using the jQuery UI Dialog widget and the CTools ajax framework.
  http://drupal.org/project/dialog

- Modal Frame API: Provides an API to render an iframe within a modal dialog
  based on the jQuery UI Dialog plugin.
  http://drupal.org/project/modalframe

- Simple Dialog: Provides an API to create simple modal dialogs. Leverages the
  jQuery ui dialog plugin included with Drupal 7.
  http://drupal.org/project/simple_dialog

[Tabs]
- Quick tabs: Create blocks of tabbed views and blocks.
  http://drupal.org/project/quicktabs

- Tabs (jQuery UI tabs): A helper module for creating tabbed pages.
  http://drupal.org/project/tabs


NOTES
-----

- jQuery UI dialog handling could be enhanced by optionally using the Modal
  Frame API, which still has not been ported to D7.


AUTHOR/MAINTAINER
-----------------

- Jacob Rockowitz
  http://drupal.org/user/371407

File

README.txt
View source
  1. CONTENTS OF THIS FILE
  2. ---------------------
  3. * Introduction
  4. * Usage
  5. * Features
  6. * Requirements
  7. * Installation
  8. * Customization
  9. * Similar Modules
  10. * Todo
  11. INTRODUCTION
  12. ------------
  13. The jQueryUI filter converts static HTML to a jQuery UI accordian or tabs widget
  14. and opens links inside a jQuery UI dialog.
  15. For example, this module converts the below HTML code into a
  16. collapsed jQueryUI accordion widget.
  17. [accordion collapsed]

  18. Section I

  19. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

  20. Section II

  21. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

  22. Section III

  23. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

  24. [/accordion]

  25. Learn more about jQueryUI's accordion, dialog, and tabs widget.
  26. - http://jqueryui.com/demos/accordion/
  27. - http://jqueryui.com/demos/dialog/
  28. - http://jqueryui.com/demos/tabs/
  29. Roll your own custom jQueryUI theme
  30. - http://jqueryui.com/themeroller/
  31. USAGE
  32. -----
  33. Use [accordion] and [/accordion] or [tabs] and [/tabs] to create a jQuery UI
  34. Accordian or tabs. Using [accordion collapsed] will start with the accordion
  35. closed.
  36. To open a link inside a jQuery UI dialog set the link\'s the target attribute
  37. to [dialog] or [modal] with optional JSON data with single quotes.
  38. Contact Us

  39. FEATURES
  40. --------
  41. - Full UI for customizing most jQuery UI accordion, dialog, and tabs options.
  42. - Adds option to include paging buttons below tabs.
  43. - Adds history and bookmark support to accordions and tabs.
  44. - Gracefully degrades when JavaScript is disabled.
  45. REQUIREMENTS
  46. ------------
  47. - jQuery plugins: An API and home for miscellaneous jQuery plugins.
  48. http://drupal.org/project/jquery_plugin
  49. (Optional: Used to store jQuery UI tabs state in a cookie.)
  50. INSTALLATION
  51. ------------
  52. IMPORTANT:
  53. Make sure your text formats are configured to support

    tags.

  54. The default filter, included with Drupal, removes

    tags from filtered text.

  55. 1. Copy/upload the jquery_ui_filter.module to the sites/all/modules directory
  56. of your Drupal installation.
  57. 2. Enable the 'jQueryUI filter' modules in 'Modules', (admin/modules)
  58. 3. Visit the 'Configuration > [Content authoring] Text formats'
  59. (admin/config/content/formats). Click "configure" next to the input format you want
  60. to enable the jQueryUI filter.
  61. 4. Enable (check) the jQueryUI filter under the list of filters and save
  62. the configuration.
  63. 5. (optional) Visit the 'Configuration > [Content authoring] jQuery UI filter'
  64. (admin/config/content/jquery_ui_filter).
  65. CUSTOMIZATION
  66. -------------
  67. - Besides using the UI for customizing your jQuery UI widget you can define
  68. default options by adding the the below JavaScript snippets to your
  69. theme's script.js file.
  70. (function ($) {
  71. // Set Jquery UI Filter default options
  72. Drupal.jQueryUiFilter = Drupal.jQueryUiFilter || {}
  73. // Set Jquery UI accordion options: http://jqueryui.com/demos/accordion/
  74. Drupal.jQueryUiFilter.accordionOptions = {
  75. autoHeight: false
  76. }
  77. // Set Jquery UI dialog options: http://jqueryui.com/demos/dialog/
  78. Drupal.jQueryUiFilter.dialogOptions = {
  79. modal: true
  80. }
  81. // Set Jquery UI tabs options: http://jqueryui.com/demos/tabs/
  82. Drupal.jQueryUiFilter.tabsOptions = {
  83. event: 'click',
  84. fx: {opacity: 'toggle'},
  85. paging: true
  86. }
  87. })(jQuery);
  88. SIMILAR MODULES
  89. ---------------
  90. [Dialog]
  91. - Automodal: Automatically convert certain classed links to modal popups
  92. and provides an API to add custom modals quickly and easily.
  93. http://drupal.org/project/automodal
  94. - Automodal URL: Loads a modal frame automatically based on URL parameters.
  95. http://drupal.org/project/automodal_url
  96. - Dialog API: The module provides an API for creating and updating javascript
  97. dialog windows using the jQuery UI Dialog widget and the CTools ajax framework.
  98. http://drupal.org/project/dialog
  99. - Modal Frame API: Provides an API to render an iframe within a modal dialog
  100. based on the jQuery UI Dialog plugin.
  101. http://drupal.org/project/modalframe
  102. - Simple Dialog: Provides an API to create simple modal dialogs. Leverages the
  103. jQuery ui dialog plugin included with Drupal 7.
  104. http://drupal.org/project/simple_dialog
  105. [Tabs]
  106. - Quick tabs: Create blocks of tabbed views and blocks.
  107. http://drupal.org/project/quicktabs
  108. - Tabs (jQuery UI tabs): A helper module for creating tabbed pages.
  109. http://drupal.org/project/tabs
  110. NOTES
  111. -----
  112. - jQuery UI dialog handling could be enhanced by optionally using the Modal
  113. Frame API, which still has not been ported to D7.
  114. AUTHOR/MAINTAINER
  115. -----------------
  116. - Jacob Rockowitz
  117. http://drupal.org/user/371407