JQuery Listings Operations Buttons: Difference between revisions

From Littledamien Wiki
Jump to navigation Jump to search
(Created page with "==Overview== Description of markup, DOM elements and attributes involved in displaying operations buttons within CMS listings pages. ==Markup== * Example: <syntaxhighlight la...")
 
Line 16: Line 16:
* Inner DIV element class “listops”.
* Inner DIV element class “listops”.
* Each button is created with an anchor tag.
* Each button is created with an anchor tag.
:* <code>href="javascript:void(0)" rel="nofollow"</code> for buttons that have AJAX handlers.


:* The class attribute of the anchor determines its button style and its AJAX handler. (Buttons implemented with the JQuery UI library.)
==Button element attributes==
:** Some common button classes handled by the <code>$.bindListingsButtons()</code> routine of the <code>LITTLED.Listings</code> library:
* <code>href="javascript:void(0)" rel="nofollow"</code> for buttons that have AJAX handlers.
:** <code>details-btn</code> Links to stand-alone page containing detailed information about the individual record.
:** <code>preview-btn</code> Links to stand-along page on the public site driven by that individual record.
:** <code>print-btn</code> Prints the record, or opens a page specially formatted for printing the individual record.
:** <code>update-cache-btn</code> Invokes AJAX that updates the cached content for the individual record.
:** <code>edit-btn</code> Opens record edit dialog/page.
:** <code>delete-btn</code> Opens delete record dialog/page.


:* Configure the AJAX handlers for listings operations with JQuery within the page’s <code>$(document).ready();</code> handler.  
* The <code>class</code> attribute of the anchor determines its button style and its AJAX handler. (Buttons implemented with the JQuery UI library.)
:** See [[JQuery_Initialization_on_Listings_Pages|JQuery Initialization on Listings Pages]]
** Some common button classes handled by the <code>$.bindListingsButtons()</code> routine of the <code>LITTLED.Listings</code> library:
:* <code>“data-*”</code> attributes of the anchor tags specify which records to operate on when calling AJAX handlers. Some examples:
** <code>details-btn</code> Links to stand-alone page containing detailed information about the individual record.
:** <code>data-id</code> – record id
** <code>preview-btn</code> Links to stand-along page on the public site driven by that individual record.
:** <code>data-tid</code> – record content type id
** <code>print-btn</code> Prints the record, or opens a page specially formatted for printing the individual record.
:** <code>data-pid</code> – record parent id
** <code>update-cache-btn</code> Invokes AJAX that updates the cached content for the individual record.
:** <code>data-op</code> – operation name
** <code>edit-btn</code> Opens record edit dialog/page.
:* Each anchor tag has a title attribute which serves as a tooltip.
** <code>delete-btn</code> Opens delete record dialog/page.
:* The innerhtml of the anchor tag is not displayed if the JQuery UI button is successfully loaded.
 
* Configure the AJAX handlers for listings operations with JQuery within the page’s <code>$(document).ready();</code> handler.  
** See [[JQuery_Initialization_on_Listings_Pages|JQuery Initialization on Listings Pages]]
* <code>“data-*”</code> attributes of the anchor tags specify which records to operate on when calling AJAX handlers. Some examples:
** <code>data-id</code> – record id
** <code>data-tid</code> – record content type id
** <code>data-pid</code> – record parent id
** <code>data-op</code> – operation name
* Each anchor tag has a title attribute which serves as a tooltip.
* The innerhtml of the anchor tag is not displayed if the JQuery UI button is successfully loaded.
[[Category:CMS Documentation]]
[[Category:CMS Documentation]]
[[Category:JQuery/AJAX]]
[[Category:JQuery/AJAX]]

Revision as of 17:38, 17 May 2012

Overview

Description of markup, DOM elements and attributes involved in displaying operations buttons within CMS listings pages.

Markup

  • Example:
<td class="centered">
    <div class="listops"><!--
        --><a class="preview-btn" href="<?=$row->local_url?>" target="_blank" title="live content">live content</a><!--
        --><a class="trash-btn" href="javascript:void(0)" rel="nofollow" data-id="<?=$row->id?>" data-tid="<?=press_class::SECTION_ID?>" data-op="delete" title="delete">delete</a>
    </div>
</td>
  • Outside TD element has class “centered”.
  • Inner DIV element class “listops”.
  • Each button is created with an anchor tag.

Button element attributes

  • href="javascript:void(0)" rel="nofollow" for buttons that have AJAX handlers.
  • The class attribute of the anchor determines its button style and its AJAX handler. (Buttons implemented with the JQuery UI library.)
    • Some common button classes handled by the $.bindListingsButtons() routine of the LITTLED.Listings library:
    • details-btn Links to stand-alone page containing detailed information about the individual record.
    • preview-btn Links to stand-along page on the public site driven by that individual record.
    • print-btn Prints the record, or opens a page specially formatted for printing the individual record.
    • update-cache-btn Invokes AJAX that updates the cached content for the individual record.
    • edit-btn Opens record edit dialog/page.
    • delete-btn Opens delete record dialog/page.
  • Configure the AJAX handlers for listings operations with JQuery within the page’s $(document).ready(); handler.
  • “data-*” attributes of the anchor tags specify which records to operate on when calling AJAX handlers. Some examples:
    • data-id – record id
    • data-tid – record content type id
    • data-pid – record parent id
    • data-op – operation name
  • Each anchor tag has a title attribute which serves as a tooltip.
  • The innerhtml of the anchor tag is not displayed if the JQuery UI button is successfully loaded.
Retrieved from "https://wiki.dbarchowsky.com/index.php?title=JQuery_Listings_Operations_Buttons&oldid=204"