使用phonegap插件链接tabbar项目

时间:2012-03-16 00:58:42

标签: javascript ios cordova phonegap-plugins

基本上我正在使用phonegap来创建一个iPhone应用程序,我使用原生控件插件来集成一个原生tabbar - 我已经有了工作但是我不确定如何制作它以便每个标签栏项目选中它会将用户转发到链接 - 在本应用程序的情况下,我打算将用户发送到特定的div id #element。我也试图使用标签栏项目的图像,但这似乎不起作用......

我该如何做到这一点,到目前为止我的代码如下。

                                <script type="text/javascript" charset="utf-8">

                                function onBodyLoad()
                                {
                                    document.addEventListener("deviceready",onDeviceReady,false);
                                }

                                /* When this function is called, PhoneGap has been initialized and is ready to roll */
                                function onDeviceReady()
                                {

                                    // Initializating TabBar
                                    nativeControls = window.plugins.nativeControls;
                                    nativeControls.createTabBar();

                                    // Item 1 tab
                                    nativeControls.createTabBarItem(
                                                                    "item1",
                                                                    "Item1",
                                                                    "/themes/images/item1@2x.png",
                                                                    {"onSelect": function() {
                                                                    location.href = "#section1"
                                                                    }}
                                                                    );

                                    // Item 2 tab
                                    nativeControls.createTabBarItem(
                                                                    "item2",
                                                                    "Item2",
                                                                    "/themes/images/item2@2x.png",
                                                                    {"onSelect": function() {
                                                                    location.href = "#section2"
                                                                    }}
                                                                    );

                                    // Item 3 tab
                                    nativeControls.createTabBarItem(
                                                                    "item3",
                                                                    "Item3",
                                                                    "/themes/images/item3@2x.png",
                                                                    {"onSelect": function() {
                                                                    location.href = "#section3"
                                                                    }}
                                                                    );

                                    // Item 4 tab
                                    nativeControls.createTabBarItem(
                                                                    "item4",
                                                                    "Item4",
                                                                    "/themes/images/item4@2x.png",
                                                                    {"onSelect": function() {
                                                                    location.href = "#section4"
                                                                    }}
                                                                    );

                                    // Item 5 tab
                                    nativeControls.createTabBarItem(
                                                                    "item5",
                                                                    "Item5",
                                                                    "/themes/images/item5@2x.png",
                                                                    {"onSelect": function() {
                                                                    location.href = "#section5"
                                                                    }}
                                                                    );

                                    // Compile the TabBar
                                    nativeControls.showTabBar();
                                    nativeControls.showTabBarItems("mechanics", "materials", "waves", "electricity", "light");
                                    nativeControls.selectTabBarItem("mechanics");
                                }

                                </script>

1 个答案:

答案 0 :(得分:0)

我建议您使用此标签https://github.com/groovetrain/jQuery.mobile-Tabs#readme

这是关于如何做你想做的事的小提琴 http://jsfiddle.net/coderslay/85aUX/