Some tricks for keeping JUI style with ColVis and tabletools 2.0

jinjung

Hello,
Here a little code for keeping global JUI style like start, next buttons.
For Tabletools 2.0 :
[code]
"aButtons": [
{
"sExtends": "copy",
"sButtonClass": "DTTT_button_print ui-corner-tl ui-corner-bl",
"sButtonClassHover": "DTTT_button_print_hover ui-corner-tl ui-corner-bl",
},
{
"sExtends": "print",
"sToolTip": "View print view",
"sButtonClass": "DTTT_button_print",
"sButtonClassHover": "DTTT_button_print_hover",

},
{
"sExtends": "collection",
"sButtonText": "Save",
"aButtons": [
// "csv", "xls", "pdf"
{
"sExtends": "csv",
"sButtonClass": "DTTT_button_csv ui-corner-tl ui-corner-all",
"sButtonClassHover": "DTTT_button_csv_hover ui-corner-all",
},
{
"sExtends": "xls",
"sButtonClass": "DTTT_button_xls ui-corner-tl ui-corner-all",
"sButtonClassHover": "DTTT_button_xls_hover ui-corner-all",
},
{
"sExtends": "pdf",
"sButtonClass": "DTTT_button_pdf ui-corner-tl ui-corner-all",
"sButtonClassHover": "DTTT_button_pdf_hover ui-corner-all",
},

],
"sButtonClass": "DTTT_button_print ui-corner-tr ui-corner-br",
"sButtonClassHover": "DTTT_button_print_hover ui-corner-tr ui-corner-br",
}
]
[/code]
and comment "background" and "overflow" for DTTT_collection class in TableTools_JUI.css
[code]
div.DTTT_collection {
width: 150px;
/* background-color: #f3f3f3; */
/* overflow: hidden; */
z-index: 2002;

box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
}
[/code]
- For ColVis :
Add "ui-corner-all" class in _fnDomColumnButton() and in _fnDomBaseButton()

Then we have JUI style...

allan

Nice one :-) Thanks for the post!

Allan

iksela

If you are interested in using JUI icons too, I've published a short blog article here: http://iksela.tumblr.com/post/2727627360/