Michael Janea

 

 

MJ TAB

A single content area with multiple panels, each associated with a header in a list.

  • Compatible with jQuery 1.9 and up.
  • Available in 66 languages
  • Manage contents using popup CKEditor

 

Demo

 

Dependencies

It requires the following plugins to work:

 

How to Install

  1. Extract the downloaded file (mjTab.zip)
  2. Copy the "mjTab" folder to "ckeditor/plugins/" folder
  3. Open the file "ckeditor/config.js"
  4. Add these lines:
    config.extraPlugins = 'widget,lineutils,mjTab';
    config.contentsCss = 'http://michaeljanea.com/plugins/tab/mjTab.css';
    config.mjTab_managePopupTitle = true;
    config.mjTab_managePopupContent = true;
    config.allowedContent = true;
    config.mj_variables_allow_html = false;
  5. Use the toolbargroupname: "MJTab" in your toolbar (see the example below)
    config.toolbar = [
        { name: 'insert', items: [ 'MJTab', 'Source' ] }
    ];
  6. Open the file "ckeditor.html"
  7. Configure the CKEditor's options to your own preferences
  8. Update the source path of "ckeditor.js"
    <script type="text/javascript" src="//cdn.ckeditor.com/4.5.9/standard/ckeditor.js"></script>
  9. Make sure to clear your browser's cache
  10. Done
  1. Extract the downloaded file (mjTab.zip)
  2. Copy the "mjTab" folder to "sites/all/modules/ckeditor/plugins/" folder
  3. Open the file "sites/all/modules/ckeditor/ckeditor.config.js"
  4. Add these lines:
    config.allowedContent = true;
    config.mjTab_managePopupTitle = true;
    config.mjTab_managePopupContent = true;
    config.mj_variables_allow_html = false;
  5. Open the file "sites/all/modules/ckeditor/css/ckeditor.css"
  6. Add this line at the top:
    @import  url('https://michaeljanea.com/plugins/tab/mjTab.css');
  7. Open the file "sites/all/modules/ckeditor/plugins/mjTab/ckeditor.html"
  8. Configure the CKEditor's options to your own preferences
  9. Update the source path of "ckeditor.js"
    <script type="text/javascript" src="//cdn.ckeditor.com/4.5.9/standard/ckeditor.js"></script>
  10. Make sure to clear your browser's cache
  11. Go to your Drupal's admin side -> Configuration -> Content Authoring -> CKEditor -> Profile -> Choose any profile you want and click "Edit" link -> Editor Appearance -> Available buttons -> Drag & drop mjTab icon to "Current Toolbar" -> click "Save"
  12. Done
Not yet supported
  1. Go to your IPS's admin side -> Customization -> Toolbars -> Add Button -> browse mjTab.zip -> click "Save"
  2. Go to your IPS's admin side -> Customization -> Toolbars -> Buttons not on editor -> Drag & Drop mjTab icon to "Editor"
  3. Go to your IPS's admin side -> Customization -> Settings -> Advanced -> Add the following classes:
    • mj_tab
    • mj_tab_items
    • mj_tab_contents
    • active
  4. click "Save"
  5. Go to your IPS's admin side -> Customization -> Themes -> Templates -> open globalTemplate and the following code before </body>
    <script src="https://michaeljanea.com/plugins/tab/mjTab.js"></script>
    <script>
        CKEDITOR.config.mjTab_managePopupTitle = true;
        CKEDITOR.config.mjTab_managePopupContent = true;
        CKEDITOR.config.mj_variables_allow_html = false;
        CKEDITOR.config.allowedContent = true;
    </script>
  6. Go to your IPS's admin side -> Customization -> Themes -> CSS -> open core/front/custom/custom.css
  7. Add this line at the top:
    @import  url('https://michaeljanea.com/plugins/tab/mjTab.css');
  8. Done

 

More Set-up Information

Option Description
config.mjTab_managePopupTitle

set this to true to enable editing title in a popup CKEditor

Default Value: true
Choices: true, false
config.mjTab_managePopupContent

set this to true to enable editing content in a popup CKEditor

Default Value: true
Choices: true, false
config.mj_variables_allow_html

to switch on/off escaping of HTML tags

Default Value: false
Choices: true, false

 

Logs

  • 1.6
    • ADDED: allowing HTML tags in titles when config.mjTab_managePopupTitle is set to true, overriding config.mj_variables_allow_html
    • ADDED: allowing HTML tags in contents when config.config.mjTab_managePopupContent is set to true, overriding config.mj_variables_allow_html
  • 1.5.1
    • FIXED: default field's popup bug
    • FIXED: escape HTML bug for new lines
    • CHANGED: popup editor layout
  • 1.5
    • ADDED: Drag and drop sorting
  • 1.4
    • ADDED: validation for required fields
    • FIXED: tab index
    • FIXED: function() default parameter value bug for IE and Safari
    • FIXED: multiple instances bug
  • 1.3
    • ADDED: config.mj_variables_allow_html variable to switch on/ff escaping of HTML tags
  • 1.2.5
    • FIXED: nested mj tab bug
  • 1.2.4
    • FIXED: Drupal 7 compatibility issue
  • 1.2.3
    • ADDED: nested mj tab support
  • 1.2.2
    • FIXED: HTML tag escaping bug
  • 1.2.1
    • FIXED: multiple instances bug
  • 1.2.0
    • ADDED: new feature which you can edit contents using popup CKEditor
  • 1.1.1
    • UPDATE: Greek and English translation (Thanks to Κιοσσές Γιώργος)
  • 1.1
    • ADDED: UI language support
  • 1.0
    • Initial release

 

Package Details

INDIVIDUAL 

$3.00

 

  • Free updates for 6 months
  • Full functionality
  • Install on any number of web sites
  • Sell with your product
  • Free support
  • One time payment only
  • Plugins included:
    1. MJ Tab

MJ BUNDLE

$32.00

 

  • Free updates for 6 months (?)
  • Full functionality
  • Install on any number of web sites
  • Sell with your product
  • Free support
  • One time payment only
  • Plugins included:
    1. MJ Accordion
    2. MJ Breadcrumbs
    3. MJ Buttons
    4. MJ Carousel
    5. MJ Tab
    6. MJ Ribbons
    7. MJ Word Art
    8. MJ Accordion Banner

ULTIMATE BUNDLE

$99.00 (?)

$437.00

  • Free updates for 1 year (?)
  • Full functionality
  • Install on any number of web sites
  • Sell with your product
  • Free support
  • One time payment only
  • Plugins included:
    1. MJ Bundle
      • MJ Accordion
      • MJ Breadcrumbs
      • MJ Buttons
      • MJ Carousel
      • MJ Tab
      • MJ Ribbons
      • MJ Word Art
      • MJ Accordion Banner
    2. Bootstrap Bundle
      • Bootstrap Breadcrumbs
      • Bootstrap Buttons
      • Bootstrap Carousel
      • Bootstrap Collapse
      • Bootstrap List Group
      • Bootstrap Panel
      • Bootstrap Tab
      • Bootstrap Alert
      • Bootstrap Grid
      • Bootstrap Dropdown Buttons
    3. Foundation Bundle
      • Foundation Accordion
      • Foundation Alert
      • Foundation Breadcrumbs
      • Foundation Buttons
      • Foundation Panel
      • Foundation Tab
    4. Social Media Bundle
      • Facebook Like
      • Facebook Share
      • Twitter Share
      • Google +1
      • Google+ Share
    5. jQuery UI Bundle
      • jQuery UI Accordion
      • jQuery UI Tabs
    6. Semantic UI Bundle
      • Semantic UI Accordion
      • Semantic UI Tab
      • Semantic UI Icons
    7. Text Shadow
    8. Box Shadow
    9. FontAwesome Premium
    10. Nivo Slider
    11. BlueImp Gallery
    12. YouTube Search

CONTACT ME

Your opinion is important to me. Take part on my goal to continuously improve my work by giving your suggestions and comments. You may also send your concerns or inquiries here.