带有 jqTouch 的原生 UIControls

Question

在尝试了一堆 javascript 标签栏（大多数在使用表单时失败）之后，我决定采用原生可能是一个好主意。

有人知道如何在 jqTouch 应用程序中合并本机 UIControls（选项卡栏和标题）。我仍然需要保留对标题中“后退”和“信息”按钮的控制。

谢谢！ 格伦

Answer 1

此时您需要确定的是混合方法的好处是什么？在花费所有时间编写本机代码来支持导航、选项卡和标题栏之后，您将编写相当多的代码。

然后尝试以某种方式将该代码组合在一起以连接回 Phonegap UIWebview，恕我直言，它会变得过于复杂......但是它可以完成。

我建议您首先编写本机应用程序并使其正常运行，然后将该代码集成回 PhoneGap 应用程序委托中

这是一个 完整教程 这将是一个很好的起点

Answer 2

我已经找到了实现此功能的最佳方法，并认为我应该分享代码。

这就是组合：jQTouch + Phonegap = Native Tabbar，它将与 jQTouch 协同工作。 IE。当您单击选项卡栏图标时，它将带您进入相应的 jQTouch 页面。
<代码>

document.addEventListener("deviceready",setupToolbars);

function setupToolbars() {
 // Add these if you want the toolbar
 // window.uicontrols.createToolBar();
 // window.uicontrols.setToolBarTitle("Toolbar");

var activeTab;
activeTab = "#home"; // Better to have intro screen at home, and then make tab1 the first tab.

window.uicontrols.createTabBar();

window.uicontrols.createTabBarItem("tab1", "Tab1", "/www/images/tabs/yourimage1.png", {
  onSelect: function() {
    myName = "#home"
    if (activeTab != myName)
    {
        jQT.goTo("#home", "fade");
        activeTab = myName;
    }
  }
});

window.uicontrols.createTabBarItem("tab2", "Tab2", "/www/images/tabs/yourimage2.png", {
  onSelect: function() {
    myName = "#tab2"
    if (activeTab != myName)
    {
        jQT.goTo("#tab2", "fade");
        activeTab = myName;
    }
  }
});

window.uicontrols.createTabBarItem("tab3", "Tab3", "/www/images/tabs/yourimage3.png", {
  onSelect: function() {
    myName = "#tab3"
    if (activeTab != myName)
    {
        jQT.goTo("#tab3", "fade");
        activeTab = myName;
    }
  }
});

 window.uicontrols.createTabBarItem("tab4", "Tab4", "/www/images/tabs/yourimage4.png", {
  onSelect: function() {
    myName = "#tab4"
    if (activeTab != myName)
    {
        jQT.goTo("#tab4", "fade");
        activeTab = myName;
    }
  }
});

 window.uicontrols.showTabBar();
 window.uicontrols.showTabBarItems("tab1", "tab2", "tab3", "tab4");
}

<代码>