Transcript

00:07 hello everyone this is Joe workman and
00:10 today I would like to introduce you to
00:11 tabulous to tabulous has been completely
00:15 rewritten with over 75 amazing updates
00:18 it's still easy as as ever to implement
00:21 and it is absolutely brilliant on mobile
00:24 devices as you see Tablas provides a
00:28 great tabbed slider interface that
00:31 allows your users to easily navigate
00:33 through tabbed content areas now let's
00:39 jump in and see some of the amazing new
00:41 features of tabulous - now I should note
00:44 that tabulous has a lot of settings and
00:46 only going to touch base on just a few
00:49 of them in this video and make sure you
00:51 look at for a more advanced in-depth
00:53 tutorial coming soon the top level
00:56 settings we have tabulous slide
00:58 container this actually affects the
01:00 actual slide container that contains
01:03 each slide that you'd like the first
01:06 setting obviously contains the slide
01:08 count that is the number of slides and
01:10 tab content that you'd like to have next
01:14 down we have the container we actually
01:16 allow tabulous to be either the normal
01:18 tab container or a generic slider which
01:21 actually removes the tabs you can then
01:25 obviously change the background color to
01:26 be solid a tiled image or transparent
01:29 you can change the content padding you
01:32 could add rounded corners you can also
01:36 add a drop shadow
01:38 now the next settings control group is
01:41 the slide transitions
01:43 this allows you to configure the slide
01:45 effects as well as the speed of those
01:47 effects between each slide transition
01:50 you could turn on auto slide which
01:53 allows you to have an automatic
01:54 slideshow or else the users need to
01:57 manually click through the tabs to see
01:59 the content we also support dynamic
02:02 height which allows the tabular stack to
02:05 actually adjust height based on the size
02:08 of the contents within each tab the next
02:13 setting
02:13 is the tabulous tab setting which as you
02:16 may think actually controls this style
02:18 and some other attributes of the actual
02:21 tabs now this first checkbox will allow
02:26 you to actually every time a user clicks
02:27 on a tab or a tab is shown it will
02:31 actually save that tab in the browser
02:33 history so that users can actually go
02:35 back and forth in their browser history
02:38 and navigate between slides you can then
02:42 adjust the position do you want the tabs
02:44 to be on the top as default or do you
02:46 want them to be on the bottom of the
02:47 stack do you want your tab alignment to
02:50 be centered left or right and an amazing
02:55 new feature is the gutter this allows
02:57 you to actually separate the tab
03:00 contents from the container which gives
03:04 you a nice navigation menu type feel
03:07 instead of a tab feel for your stack you
03:11 can then adjust the padding for it as
03:13 well as add rounded corners to each tab
03:17 element you can also inherit the same
03:20 shadow that we generated for the slide
03:23 container you then obviously change text
03:26 size as well as all the various colors
03:28 for each tab now the next settings group
03:33 allows you to customize the actual
03:35 navigation arrows that are shown on the
03:38 tabulous slider we can actually show or
03:42 completely hide our arrows we can just
03:45 show the arrows on hover we can actually
03:48 hide the last and first arrows based on
03:51 the tab that is being shown so if we are
03:55 at the last tab the next arrow will not
03:57 be displayed and if we were on the first
03:59 tab the previous error will not be
04:01 displayed we can configure the size of
04:04 our arrows as well as the vertical
04:06 positioning within the left and right
04:08 sides that we'd like to have our arrows
04:11 and then at last but not least we can
04:13 actually configure our custom arrow
04:15 images rather than the default ones that
04:18 ship with tabulous now if you'd like to
04:22 have some amazing arrow images check out
04:25 our compass stack it ships with three
04:27 beautiful arrows that you can use
04:29 directly within tabulous as well now in
04:34 our last Settings group is really what
04:36 sets tabulous apart from all other
04:38 tabbed containers and this is where we
04:41 configure that how tabulous responds to
04:44 your mobile device now if we were to
04:47 look at tabulous in a mobile sized
04:49 browser we would notice one thing there
04:52 are actually no tabs here tabulous has
04:55 morphed itself into a beautifully usable
04:57 mobile navigation which allows users to
05:01 click on the menu and dynamically
05:04 navigate to the actual tab that they
05:06 would like now if you also noticed our
05:09 two columns actually shrank down to a
05:11 single column because we are using the
05:13 responsive layout stacks now that we've
05:17 seen how tabulous responds in a mobile
05:19 device you'll see that we can actually
05:20 configure many of these things
05:22 attributes of it we could turn on and
05:24 off the mobile navigation change the
05:26 navigation title as well as define our
05:29 own menu image that floats on the right
05:32 side of the menu
05:33 now tabulous does include extra menu
05:36 images within the stacks media library
05:38 for you to use and that is fabulous
05:42 everybody I hope you really enjoy this
05:44 amazing stack it really is revolutionary
05:47 and how it actually manages tabbed
05:49 containers on your mobile device now go
05:52 forth and make your websites great
06:01 you"}]