|
1 | 1 | /** |
2 | 2 | * jquery-bootstrap-scrolling-tabs |
3 | | - * @version v2.2.1 |
| 3 | + * @version v2.3.1 |
4 | 4 | * @link https://github.com/mikejacobson/jquery-bootstrap-scrolling-tabs |
5 | 5 | * @author Mike Jacobson <michaeljjacobson1@gmail.com> |
6 | 6 | * @license MIT License, http://www.opensource.org/licenses/MIT |
|
71 | 71 | * corresponds to that required tab property if |
72 | 72 | * your property name is different than the |
73 | 73 | * standard name (paneId, title, etc.) |
| 74 | + * tabsLiContent: |
| 75 | + * optional string array used to define custom HTML |
| 76 | + * for each tab's <li> element. Each entry is an HTML |
| 77 | + * string defining the tab <li> element for the |
| 78 | + * corresponding tab in the tabs array. |
| 79 | + * The default for a tab is: |
| 80 | + * '<li role="presentation" class=""></li>' |
| 81 | + * So, for example, if you had 3 tabs and you needed |
| 82 | + * a custom 'tooltip' attribute on each one, your |
| 83 | + * tabsLiContent array might look like this: |
| 84 | + * [ |
| 85 | + * '<li role="presentation" tooltip="Custom TT 1" class="custom-li"></li>', |
| 86 | + * '<li role="presentation" tooltip="Custom TT 2" class="custom-li"></li>', |
| 87 | + * '<li role="presentation" tooltip="Custom TT 3" class="custom-li"></li>' |
| 88 | + * ] |
| 89 | + * This plunk demonstrates its usage (in conjunction |
| 90 | + * with tabsPostProcessors): |
| 91 | + * http://plnkr.co/edit/ugJLMk7lmDCuZQziQ0k0 |
| 92 | + * tabsPostProcessors: |
| 93 | + * optional array of functions, each one associated |
| 94 | + * with an entry in the tabs array. When a tab element |
| 95 | + * has been created, its associated post-processor |
| 96 | + * function will be called with two arguments: the |
| 97 | + * newly created $li and $a jQuery elements for that tab. |
| 98 | + * This allows you to, for example, attach a custom |
| 99 | + * event listener to each anchor tag. |
| 100 | + * This plunk demonstrates its usage (in conjunction |
| 101 | + * with tabsLiContent): |
| 102 | + * http://plnkr.co/edit/ugJLMk7lmDCuZQziQ0k0 |
74 | 103 | * ignoreTabPanes: relevant for data-driven tabs only--set to true if |
75 | 104 | * you want the plugin to only touch the tabs |
76 | 105 | * and to not generate the tab pane elements |
|
1128 | 1157 | return $('<div class="tab-content"></div>'); |
1129 | 1158 | } |
1130 | 1159 |
|
1131 | | - function getNewElTabLi(tab, propNames, forceActiveTab) { |
1132 | | - var $li = $('<li role="presentation" class=""></li>'), |
| 1160 | + function getNewElTabLi(tab, propNames, options) { |
| 1161 | + var liContent = options.tabLiContent || '<li role="presentation" class=""></li>', |
| 1162 | + $li = $(liContent), |
1133 | 1163 | $a = getNewElTabAnchor(tab, propNames).appendTo($li); |
1134 | 1164 |
|
1135 | 1165 | if (tab[propNames.disabled]) { |
1136 | 1166 | $li.addClass('disabled'); |
1137 | 1167 | $a.attr('data-toggle', ''); |
1138 | | - } else if (forceActiveTab && tab[propNames.active]) { |
| 1168 | + } else if (options.forceActiveTab && tab[propNames.active]) { |
1139 | 1169 | $li.addClass('active'); |
1140 | 1170 | } |
1141 | 1171 |
|
| 1172 | + if (options.tabPostProcessor) { |
| 1173 | + options.tabPostProcessor($li, $a); |
| 1174 | + } |
| 1175 | + |
1142 | 1176 | return $li; |
1143 | 1177 | } |
1144 | 1178 |
|
1145 | | - function getNewElTabPane(tab, propNames, forceActiveTab) { |
| 1179 | + function getNewElTabPane(tab, propNames, options) { |
1146 | 1180 | var $pane = $('<div role="tabpanel" class="tab-pane"></div>') |
1147 | 1181 | .attr('id', tab[propNames.paneId]) |
1148 | 1182 | .html(tab[propNames.content]); |
1149 | 1183 |
|
1150 | | - if (forceActiveTab && tab[propNames.active]) { |
| 1184 | + if (options.forceActiveTab && tab[propNames.active]) { |
1151 | 1185 | $pane.addClass('active'); |
1152 | 1186 | } |
1153 | 1187 |
|
|
1250 | 1284 | return; |
1251 | 1285 | } |
1252 | 1286 |
|
1253 | | - tabs.forEach(function(tab) { |
| 1287 | + tabs.forEach(function(tab, index) { |
| 1288 | + var options = { |
| 1289 | + forceActiveTab: true, |
| 1290 | + tabLiContent: settings.tabsLiContent && settings.tabsLiContent[index], |
| 1291 | + tabPostProcessor: settings.tabsPostProcessors && settings.tabsPostProcessors[index] |
| 1292 | + }; |
| 1293 | + |
1254 | 1294 | tabElements |
1255 | | - .getNewElTabLi(tab, propNames, true) // true -> forceActiveTab |
| 1295 | + .getNewElTabLi(tab, propNames, options) |
1256 | 1296 | .appendTo($navTabs); |
1257 | 1297 |
|
1258 | 1298 | // build the tab panes if we weren't told to ignore them and there's |
1259 | 1299 | // tab content data available |
1260 | 1300 | if (!ignoreTabPanes && hasTabContent) { |
1261 | 1301 | tabElements |
1262 | | - .getNewElTabPane(tab, propNames, true) // true -> forceActiveTab |
| 1302 | + .getNewElTabPane(tab, propNames, options) |
1263 | 1303 | .appendTo($tabContent); |
1264 | 1304 | } |
1265 | 1305 | }); |
|
1277 | 1317 | propNames: propNames, |
1278 | 1318 | ignoreTabPanes: ignoreTabPanes, |
1279 | 1319 | hasTabContent: hasTabContent, |
| 1320 | + tabsLiContent: settings.tabsLiContent, |
| 1321 | + tabsPostProcessors: settings.tabsPostProcessors, |
1280 | 1322 | scroller: $scroller |
1281 | 1323 | } |
1282 | 1324 | }); |
|
1336 | 1378 | scrollToActiveTab */ |
1337 | 1379 | function checkForTabAdded(refreshData) { |
1338 | 1380 | var updatedTabsArray = refreshData.updatedTabsArray, |
| 1381 | + updatedTabsLiContent = refreshData.updatedTabsLiContent || [], |
| 1382 | + updatedTabsPostProcessors = refreshData.updatedTabsPostProcessors || [], |
1339 | 1383 | propNames = refreshData.propNames, |
1340 | 1384 | ignoreTabPanes = refreshData.ignoreTabPanes, |
1341 | 1385 | options = refreshData.options, |
|
1355 | 1399 | isInitTabsRequired = true; |
1356 | 1400 |
|
1357 | 1401 | // add the tab, add its pane (if necessary), and refresh the scroller |
1358 | | - $li = tabElements.getNewElTabLi(tab, propNames, options.forceActiveTab); |
| 1402 | + options.tabLiContent = updatedTabsLiContent[idx]; |
| 1403 | + options.tabPostProcessor = updatedTabsPostProcessors[idx]; |
| 1404 | + $li = tabElements.getNewElTabLi(tab, propNames, options); |
1359 | 1405 | tabUtils.storeDataOnLiEl($li, updatedTabsArray, idx); |
1360 | 1406 |
|
1361 | 1407 | if (isTabIdxPastCurrTabs) { // append to end of current tabs |
|
1365 | 1411 | } |
1366 | 1412 |
|
1367 | 1413 | if (!ignoreTabPanes && tab[propNames.content] !== undefined) { |
1368 | | - $pane = tabElements.getNewElTabPane(tab, propNames, options.forceActiveTab); |
| 1414 | + $pane = tabElements.getNewElTabPane(tab, propNames, options); |
1369 | 1415 | if (isTabIdxPastCurrTabs) { // append to end of current tabs |
1370 | 1416 | $pane.appendTo($currTabContentPanesContainer); |
1371 | 1417 | } else { // insert in middle of current tabs |
|
1638 | 1684 | refreshData = { |
1639 | 1685 | options: options, |
1640 | 1686 | updatedTabsArray: instanceData.tabs, |
| 1687 | + updatedTabsLiContent: instanceData.tabsLiContent, |
| 1688 | + updatedTabsPostProcessors: instanceData.tabsPostProcessors, |
1641 | 1689 | propNames: instanceData.propNames, |
1642 | 1690 | ignoreTabPanes: instanceData.ignoreTabPanes, |
1643 | 1691 | $navTabs: $navTabs, |
|
1846 | 1894 | cssClassRightArrow: 'glyphicon glyphicon-chevron-right', |
1847 | 1895 | leftArrowContent: '', |
1848 | 1896 | rightArrowContent: '', |
| 1897 | + tabsLiContent: null, |
| 1898 | + tabsPostProcessors: null, |
1849 | 1899 | enableSwiping: false, |
1850 | 1900 | enableRtlSupport: false, |
1851 | 1901 | bootstrapVersion: 3 |
|
0 commit comments