Search code examples
htmlcssiosweb-applicationsuitabbar

How do you create a raised tab bar item, like the one found in Instagram or Dailybooth with css / html


I work on a webapp project with HTML5 / CSS. I would like to incorporate a iOS style tab bar. There are several plugin such iTabBar / BarTender / ... but I'd like to incorporate a custom center button like Instagram or Dailybooth.

Do you use an existing solution? or ideas to achieve it ?

in advance, thank you for your answer.

John


Solution

  • I haven't actually found ready to use solution, but what i can recommend is to either use sencha or jquery mobile and check existing apps!

    jquery mobile example

    and here is sencha touch apps

    These two frameworks requires quite different level of experience, and it will take a while to adopt sencha approach (easier if you familiar with ExtJS ) but it provides really solid platform also featuring compiler tool to get ready for market app for both ios and android

    also if all you need really is just this toolbar, consider just code it yourself , just check how docked toolbar is implemented in either of these two frameworks, as it is a bit of headache on iphone