javascript - native Tab bar of iphone in phonegap - Stack Overflow

admin管理员组

文章数量:1024128

I want to use native tab bar of iphone using phonegap. I have used the code and plugin shown in :-UIControls-%28TabBar%29. But the tab bar did not display. Can anyone help me to get tab bar in my application?

I want to use native tab bar of iphone using phonegap. I have used the code and plugin shown in http://wiki.phonegap./w/page/16494801/iPhone:-UIControls-%28TabBar%29. But the tab bar did not display. Can anyone help me to get tab bar in my application?

• javascript
• iphone
• cordova

Share Improve this question Follow edited Aug 2, 2011 at 13:19 The_Fox 7,06222 gold badges4747 silver badges7070 bronze badges asked Jul 15, 2011 at 6:30 HimaHima 20711 gold badge66 silver badges1414 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

It is quite easy. Normally this will not happen, because you are adding a forth parameter.

The TabBar is expecting this forth parameter or null. But the test if this exist is buggy.

So just put in forth dummy item --> {( foo : "bar" )} <---

plugins.tabBar.createItem("Advent Calendar", 
                          "Sven Elch", 
                          "abc.png", 
                          { foo : "bar" }  // <-----
);

or patch if condition in TabBar.m (line 334 or so).

if(options != [NSNull null])
{
    id badgeOpt = [options objectForKey:@"badge"];

    if(badgeOpt && badgeOpt != [NSNull null])
        item.badgeValue = [badgeOpt stringValue];
}

Just try this:

<script>
    var moreNum = 1;
    plugins.nativeControls.createToolBar();
    plugins.nativeControls.setToolBarTitle("hello");

    plugins.nativeControls.createTabBar();  
    plugins.nativeControls.createTabBarItem("search","search","tabButton:Search");
    plugins.nativeControls.createTabBarItem("book","book","tabButton:Contacts");
    plugins.nativeControls.createTabBarItem("more","more","tabButton:More",{"onSelect":function(){
                                            plugins.nativeControls.updateTabBarItem("more",{"badge":((++moreNum).toString())});
                                            }});
    plugins.nativeControls.showTabBar();
    plugins.nativeControls.showTabBarItems("book","search","more");
</script>

I believe that plugin got deprecated. Go to http://github./phonegap/phonegap-plugins/. In there you will see a plugin called native control under iPhone. That is the plugin you want to use.

After you download it, add the nativecontrols files to your plugin folder in your project. Add NativeControls as a key and value in phonegap.plist file. Add the nativecontrols js file to your www directory. Then you can create, show, etc your tabbar

Steps (might be the same for any plugin):

• Get the plugin iOS NativeControls
• Copy *.xib, *.m and *.h files to your project's "Plugins" folder (should already exist and contain a README file)
• They have to be added to the project as well, so drag them from the "Plugins" folder (in Finder) to the same folder (in Xcode) and select to create references
• Open "Resources/Cordova.plist" and under "Plugins", add a key with the plugin name "NativeControls" and a string value of "NativeControls" (I guess it's the plugin's main class name)

• Try the following example (NOTE: this example is from 2012-06-28, I'm actually working on an improved version that removes the toolbar functionality and replaces it with an actually working navigation bar – see here)

  window.plugins.nativeControls.createTabBar()
  window.plugins.nativeControls.createTabBarItem('home', 'Home', 'tabButton:Contacts')
  window.plugins.nativeControls.showTabBar()
  window.plugins.nativeControls.showTabBarItems('home')
  window.plugins.nativeControls.createToolBar()
  window.plugins.nativeControls.setToolBarTitle('Hello toolbar!')
  window.plugins.nativeControls.showToolBar()
  alert("Tabs and toolbar should now bee visible")
  

I can't get the title of the toolbar to work, though, but both the tab and the toolbar itself (without text) is showing.

I want to use native tab bar of iphone using phonegap. I have used the code and plugin shown in :-UIControls-%28TabBar%29. But the tab bar did not display. Can anyone help me to get tab bar in my application?

I want to use native tab bar of iphone using phonegap. I have used the code and plugin shown in http://wiki.phonegap./w/page/16494801/iPhone:-UIControls-%28TabBar%29. But the tab bar did not display. Can anyone help me to get tab bar in my application?

• javascript
• iphone
• cordova

Share Improve this question Follow edited Aug 2, 2011 at 13:19 The_Fox 7,06222 gold badges4747 silver badges7070 bronze badges asked Jul 15, 2011 at 6:30 HimaHima 20711 gold badge66 silver badges1414 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

It is quite easy. Normally this will not happen, because you are adding a forth parameter.

The TabBar is expecting this forth parameter or null. But the test if this exist is buggy.

So just put in forth dummy item --> {( foo : "bar" )} <---

plugins.tabBar.createItem("Advent Calendar", 
                          "Sven Elch", 
                          "abc.png", 
                          { foo : "bar" }  // <-----
);

or patch if condition in TabBar.m (line 334 or so).

if(options != [NSNull null])
{
    id badgeOpt = [options objectForKey:@"badge"];

    if(badgeOpt && badgeOpt != [NSNull null])
        item.badgeValue = [badgeOpt stringValue];
}

Just try this:

<script>
    var moreNum = 1;
    plugins.nativeControls.createToolBar();
    plugins.nativeControls.setToolBarTitle("hello");

    plugins.nativeControls.createTabBar();  
    plugins.nativeControls.createTabBarItem("search","search","tabButton:Search");
    plugins.nativeControls.createTabBarItem("book","book","tabButton:Contacts");
    plugins.nativeControls.createTabBarItem("more","more","tabButton:More",{"onSelect":function(){
                                            plugins.nativeControls.updateTabBarItem("more",{"badge":((++moreNum).toString())});
                                            }});
    plugins.nativeControls.showTabBar();
    plugins.nativeControls.showTabBarItems("book","search","more");
</script>

I believe that plugin got deprecated. Go to http://github./phonegap/phonegap-plugins/. In there you will see a plugin called native control under iPhone. That is the plugin you want to use.

After you download it, add the nativecontrols files to your plugin folder in your project. Add NativeControls as a key and value in phonegap.plist file. Add the nativecontrols js file to your www directory. Then you can create, show, etc your tabbar

Steps (might be the same for any plugin):

• Get the plugin iOS NativeControls
• Copy *.xib, *.m and *.h files to your project's "Plugins" folder (should already exist and contain a README file)
• They have to be added to the project as well, so drag them from the "Plugins" folder (in Finder) to the same folder (in Xcode) and select to create references
• Open "Resources/Cordova.plist" and under "Plugins", add a key with the plugin name "NativeControls" and a string value of "NativeControls" (I guess it's the plugin's main class name)

• Try the following example (NOTE: this example is from 2012-06-28, I'm actually working on an improved version that removes the toolbar functionality and replaces it with an actually working navigation bar – see here)

  window.plugins.nativeControls.createTabBar()
  window.plugins.nativeControls.createTabBarItem('home', 'Home', 'tabButton:Contacts')
  window.plugins.nativeControls.showTabBar()
  window.plugins.nativeControls.showTabBarItems('home')
  window.plugins.nativeControls.createToolBar()
  window.plugins.nativeControls.setToolBarTitle('Hello toolbar!')
  window.plugins.nativeControls.showToolBar()
  alert("Tabs and toolbar should now bee visible")
  

I can't get the title of the toolbar to work, though, but both the tab and the toolbar itself (without text) is showing.

本文标签： javascriptnative Tab bar of iphone in phonegapStack Overflow