Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Misc updates (mainly browser history API) #161

Open
wants to merge 18 commits into
base: master
Choose a base branch
from
Open
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,4 @@ node_modules/
demo/
.idea/
_site/
package-lock.json
4 changes: 3 additions & 1 deletion AUTHOR.txt
Original file line number Diff line number Diff line change
@@ -1,2 +1,4 @@
Author: Jelle Kralt <[email protected]>
Date: 2013-07-27
Date: 2013-07-27
Author: Kim Steinhaug <[email protected]>
Date: 2020-06-09
82 changes: 61 additions & 21 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,29 @@
jQuery Responsive Tabs
jQuery Responsive Tabs+
==============

This jQuery plugin provides responsive tab functionality. The tabs transform to an accordion when it reaches a CSS breakpoint.
Check out a demo at http://jellekralt.github.io/Responsive-Tabs/
Check out a demo at https://steinhaug.github.io/Responsive-Tabs/

Version log
=========
__v1.6.7__ - updated 17.01.2022

- Upgraded all node modules
- Updated Gulp script from 3.x to 4.x syntax

__v1.6.6__ - updated 09.06.2020

- Overhaulted documentation and files.

__v1.6.5__ - updated 05.06.2020

+ activate method, supports selector name

__v1.6.4__ - updated 05.06.2020

+ Browser history buttons now working

__v1.6.3__ Forked

Features
=========
Expand All @@ -20,14 +41,13 @@ Features
+ Cross browser compatibility (IE7+, Chrome, Firefox, Safari and Opera)
+ Multiple device support (Web, Tablet, Mobile, etc)


How to use
==========

* Requires jQuery (minimaly jQuery 1.7.0)
* Include jquery.responsiveTabs.js
* Include jquery.responsiveTabs.min.js
```html
<script src="js/jquery.responsiveTabs.js"></script>
<script src="js/jquery.responsiveTabs.min.js"></script>
```
* Include responsive-tabs.css for the basic Tabs to Accordion switching
```html
Expand All @@ -54,31 +74,45 @@ How to use
</div>
```

* Use this jQuery function to enable responsive tabs on the selected element:
* Use this jQuery function to enable responsive tabs on the selected element that works correctly with the History API and when initiated as accordion for mobile:

```javascript
$('#responsiveTabsDemo').responsiveTabs({
startCollapsed: 'accordion'
var $selTab;
$(document).ready(function () {
$tabs = $('#responsiveTabsDemo');
$tabs.responsiveTabs({
startCollapsed: 'accordion',
activate: function(event, elTab){
$selTab = elTab.selector;
}
});
if(typeof($selTab) === "undefined"){
var winHash = window.location.hash;
if(winHash.length)
$tabs.responsiveTabs('activate', winHash);
}
});
```

Get
=======
Get this version
================

### bower.json

"responsive-tabs": "steinhaug/Responsive-Tabs#^1.6.x"

### Bower

bower install responsive-tabs
bower install steinhaug/Responsive-Tabs#^1.6.x --save

### NPM
### Github clone

npm install responsive-tabs

### CDN
git clone https://github.com/steinhaug/Responsive-Tabs.git

Responsive Tabs is available on [jsDelivr](http://www.jsdelivr.com/)
### Github release

https://github.com/steinhaug/Responsive-Tabs/releases/tag/v1.6.7

http://www.jsdelivr.com/#!jquery.responsive-tabs

API
===

Expand Down Expand Up @@ -274,6 +308,12 @@ This method activates/opens a tab by using a zero based tab reference
```javascript
$('#responsiveTabsDemo').responsiveTabs('activate', 1); // This would open the second tab
```
or using the tab selector name reference

```javascript
$('#responsiveTabsDemo').responsiveTabs('activate', '#tab-1'); // This would open the tab with given selector
```


### Deactivate
This method deactivates/closes a tab by using a zero based tab reference
Expand Down Expand Up @@ -339,9 +379,9 @@ This event is triggered when the state of the plugin changes

Credits
=========
The idea for this plugin is based on 'Easy Responsive Tabs to Accordion' by samsono (github.com/samsono)

https://github.com/samsono/Easy-Responsive-Tabs-to-Accordion
+ The idea for this plugin is based on 'Easy Responsive Tabs to Accordion' by [samsono](https://github.com/samsono/Easy-Responsive-Tabs-to-Accordion)
+ Patches and updates applied by [Kim Steinhaug](//github.com/steinhaug/)
+ Fork me on Github ribbons made by [Aral Balkan](https://ar.al/scribbles/fork-me-on-github-retina-ribbons/)

Support
=======
Expand Down
5 changes: 5 additions & 0 deletions _config.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
remote_theme: pages-themes/[email protected]
plugins:
- jekyll-remote-theme
google_analytics: G-8ZC36LC0HH
show_downloads: true
35 changes: 35 additions & 0 deletions assets/css/style.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
---
---

@import 'jekyll-theme-leap-day';

body {
color:#2b2b2b;
background: url(../images/body-background.png) #e9eae6;
}
header {
background: url(../images/background.png) #faff0c;
}
header h1 {
color: #373835;
text-shadow: 0px 2px 0px #fdffac;
}
header p {
color: #3b3b3b;
}
#banner {
background: #9b9b9b;
border: 1px solid #747474;
}
#banner .downloads span {
color: #eae2c1;
}
#banner .button {
border: 1px solid #d5d40c;
background: linear-gradient(#fffc84, #d5d40c);
background-color: #fffc84;
border-radius: 10px;
}
#banner .fork {
background-color: #fffc84;
}
Binary file added assets/images/background.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/body-background.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
31 changes: 18 additions & 13 deletions css/style.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
:root {
--main-tab-color: #5a9ef7;
--border-tab-color: #0956bb;
}

body {
font-family: Arial, Helvetica, Verdana, sans-serif;
font-size: 12px;
Expand All @@ -9,20 +14,20 @@ body {
.r-tabs {
position: relative;

background-color: #00c5ad;
background-color: var(--main-tab-color);

border-top: 1px solid #00c5ad;
border-right: 1px solid #00c5ad;
border-left: 1px solid #00c5ad;
border-bottom: 4px solid #00c5ad;
border-top: 1px solid var(--main-tab-color);
border-right: 1px solid var(--main-tab-color);
border-left: 1px solid var(--main-tab-color);
border-bottom: 4px solid var(--main-tab-color);
border-radius: 4px;

}

/* Tab element */
.r-tabs .r-tabs-nav .r-tabs-tab {
position: relative;
background-color: #00c5ad;
background-color: var(--main-tab-color);
}

/* Tab anchor */
Expand All @@ -44,7 +49,7 @@ body {

/* Active state tab anchor */
.r-tabs .r-tabs-nav .r-tabs-state-active .r-tabs-anchor {
color: #00c5ad;
color: var(--main-tab-color);
text-shadow: none;

background-color: white;
Expand All @@ -69,7 +74,7 @@ body {
display: block;
padding: 10px;

background-color: #00c5ad;
background-color: var(--main-tab-color);
color: #fff;
font-weight: bold;
text-decoration: none;
Expand All @@ -83,7 +88,7 @@ body {
/* Active accordion anchor */
.r-tabs .r-tabs-accordion-title.r-tabs-state-active .r-tabs-anchor {
background-color: #fff;
color: #00c5ad;
color: var(--main-tab-color);
text-shadow: none;
}

Expand Down Expand Up @@ -111,8 +116,8 @@ button {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #00c5ad;
box-shadow: 0px 3px 0px 0px #00ab94;
background-color: var(--main-tab-color);
box-shadow: 0px 3px 0px 0px var(--border-tab-color);

cursor: pointer;
}
Expand All @@ -128,8 +133,8 @@ button {

font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
font-size: 14px;
color: #00c5ad;
border: 2px solid #00ab94;
color: var(--main-tab-color);
border: 2px solid var(--border-tab-color);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
Expand Down
55 changes: 46 additions & 9 deletions demo.html
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
<link type="text/css" rel="stylesheet" href="css/style.css" />
</head>
<body>

<a href="https://github.com/steinhaug/Responsive-Tabs/"><img style="position: absolute; top: 0; right: 0; border: 0; width: 149px; height: 149px; z-index: 1" src="img/[email protected]" alt="Fork me on GitHub"></a>

<!--Horizontal Tab-->
<div id="horizontalTab">
Expand All @@ -22,16 +22,21 @@
</ul>

<div id="tab-1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu scelerisque eros. Fusce ante orci, hendrerit sit amet metus sit amet, venenatis sodales felis. Morbi vel mi in leo dignissim convallis in a neque. Suspendisse sollicitudin nibh non dapibus condimentum. Etiam sit amet arcu ultricies, porttitor justo eget, scelerisque urna. Praesent non ligula nec ligula euismod condimentum eget sed augue. Ut feugiat, turpis id sollicitudin vestibulum, tellus massa adipiscing nisl, quis cursus nisl arcu vel ipsum.</p>
<h2>V1.6.6</h2>
<p>Tested in Chrome, Edge and Firefox with desktop and mobile display with history API.</p>
<p>Display screen smaller to enable accordion, and use theese links for testing:</p>
<p><a href="demo.html#tab-3">demo.html#tab-3</a></p>
</div>
<div id="tab-2">
<p>Quisque sodales sodales lacus pharetra bibendum. Etiam commodo non velit ac rhoncus. Mauris euismod purus sem, ac adipiscing quam laoreet et. Praesent vulputate ornare sem vel scelerisque. Ut dictum augue non erat lacinia, sed lobortis elit gravida. Proin ante massa, ornare accumsan ultricies et, posuere sit amet magna. Praesent dignissim, enim sed malesuada luctus, arcu sapien sodales sapien, ut placerat eros nunc vel est. Donec tristique mi turpis, et sodales nibh gravida eu. Etiam odio risus, porttitor non lacus id, rhoncus tempus tortor. Curabitur tincidunt molestie turpis, ut luctus nibh sollicitudin vel. Sed vel luctus nisi, at mattis metus. Aenean ultricies dolor est, a congue ante dapibus varius. Nulla at auctor nunc. Curabitur accumsan feugiat felis ut pretium. Praesent semper semper nisi, eu cursus augue.</p>
</div>
<div id="tab-3">
<p>Mauris facilisis elit ut sem eleifend accumsan molestie sit amet dolor. Pellentesque dapibus arcu eu lorem laoreet, vitae cursus metus mattis. Nullam eget porta enim, eu rutrum magna. Duis quis tincidunt sem, sit amet faucibus magna. Integer commodo, turpis consequat fermentum egestas, leo odio posuere dui, elementum placerat eros erat id augue. Nullam at eros eget urna vestibulum malesuada vitae eu mauris. Aliquam interdum rhoncus velit, quis scelerisque leo viverra non. Suspendisse id feugiat dui. Nulla in aliquet leo. Proin vel magna sed est gravida rhoncus. Mauris lobortis condimentum nibh, vitae bibendum tortor vehicula ac. Curabitur posuere arcu eros.</p>
<p>Please use the browser back buttons to see that the plugin correctly remembers the history and places the tabs in correct order.</p>
<p>Suspendisse eu sapien aliquam, tempus ex molestie, laoreet ex. Aenean auctor aliquam hendrerit. Proin nec consequat turpis, at suscipit leo. Aliquam vulputate vitae nisl eget posuere. Sed egestas ut tortor eu egestas. Phasellus iaculis volutpat ipsum vitae pellentesque. Sed blandit mollis placerat.</p>
</div>
<div id="tab-4">
<p>Donec egestas facilisis sapien sit amet euismod. Donec mollis lectus neque, in consectetur magna sodales et. Nam rutrum libero vitae magna sollicitudin aliquet. In tristique ultrices euismod. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse pretium congue sodales. Curabitur egestas, metus sed ultrices suscipit, metus nibh vehicula ligula, vel volutpat sapien nibh sed quam. Etiam elementum nisi eu risus congue, ut eleifend lectus ultricies. Vivamus in ligula fermentum, bibendum sapien eget, pretium est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec ut ante non risus rutrum faucibus.</p>
<p>Nunc ut tortor a elit commodo posuere. Nullam cursus orci at venenatis congue. Curabitur facilisis cursus mauris, quis pharetra enim pharetra vitae. Etiam sed elit dolor. Maecenas blandit sapien ut elit feugiat imperdiet. Duis libero magna, tempor vel efficitur in, malesuada ac sapien. Aenean hendrerit ligula non placerat aliquam. Pellentesque ante libero, commodo id tempus eget, accumsan eget enim. Pellentesque nec sodales dui, eget mollis nisi. Duis tellus nisl, elementum vitae tempor ac, convallis et dolor. Fusce dapibus dolor neque, eget ornare ante dignissim ut.</p>
</div>
<div id="tab-5">
<p>Proin dignissim faucibus odio sollicitudin sagittis. Phasellus aliquet, erat vitae mollis consectetur, enim lectus ornare libero, et porta mi dui eu tellus. Morbi lobortis, elit at euismod porta, magna lacus mattis massa, a lacinia ligula risus et lectus. Sed et aliquam ligula. Nunc venenatis orci magna, quis facilisis sem porta non. Nunc sodales arcu in consectetur malesuada. Maecenas varius justo lacus, scelerisque viverra tellus luctus eu. Nam imperdiet ultricies suscipit. Ut urna mauris, eleifend quis lacinia non, mollis id libero. Praesent pharetra viverra ipsum at posuere. Quisque commodo tortor nec hendrerit faucibus. Fusce convallis urna et vehicula tincidunt. Duis sed vehicula justo, eu placerat nisi. Donec facilisis augue non turpis semper, eget condimentum mauris malesuada. Nunc in dignissim mi, sed laoreet felis.</p>
Expand All @@ -54,24 +59,47 @@

<!-- jQuery with fallback to the 1.* for old IE -->
<!--[if lt IE 9]>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/jquery-1.12.4.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="js/jquery-2.1.0.min.js"></script>
<script src="js/jquery-2.2.4.min.js"></script>
<!--<![endif]-->

<!-- Responsive Tabs JS -->
<script src="js/jquery.responsiveTabs.js" type="text/javascript"></script>
<script src="js/jquery.responsiveTabs.min.js" type="text/javascript"></script>
<script src="js/demo.js" type="text/javascript"></script>

<script type="text/javascript">

var $selTab;

$(document).ready(function () {
var $tabs = $('#horizontalTab');
$tabs.responsiveTabs({
rotate: false,
startCollapsed: 'accordion',
collapsible: 'accordion',
startCollapsed: 'accordion',
scrollToAccordion: true,
setHash: true,
disabled: [3,4],
rotate: false,
activate: function(event, elTab){
$selTab = elTab.selector;
console.log('Tab set: ' + $selTab);
},
click: function(e, tab) {
$('.info').html('Tab <strong>' + tab.id + '</strong> clicked!');
}
});

if(typeof($selTab) === "undefined"){
var winHash = window.location.hash;
if(winHash.length){
console.log('URL fragment present, we initiate tab if it exists: ' + winHash);
$tabs.responsiveTabs('activate', winHash);
}
}

/*
click: function(e, tab) {
$('.info').html('Tab <strong>' + tab.id + '</strong> clicked!');
},
Expand All @@ -82,7 +110,8 @@
//console.log(state);
$('.info').html('Switched from <strong>' + state.oldState + '</strong> state to <strong>' + state.newState + '</strong> state!');
}
});
*/


$('#start-rotation').on('click', function() {
$tabs.responsiveTabs('startRotation', 1000);
Expand All @@ -103,6 +132,14 @@
$tabs.responsiveTabs('activate', $(this).val());
});

$('.info').html('Tabs v' + $tabs.responsiveTabs('getversion') + ' running!');

/*
if( compareVer("1.6.5", $tabs.responsiveTabs('getversion')) < 0 ){
alert('You need to update bower!');
}
*/

});
</script>
</body>
Expand Down
Binary file added favicon.ico
Binary file not shown.
Loading