智能应用程序横幅与jQuery移动不兼容

Question

我们正在使用以下代码：

    <meta name="apple-itunes-app" content="app-id=1234"/>
    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="jquery.mobile-1.2.0.min.js"></script>
    <meta name="google-play-app" content="app-id=abc.mobileapp">
    <link rel="stylesheet" href="css/jquery.smartbanner.css" type="text/css" media="screen">

    <script src="jquery.smartbanner.js"></script>
    <script type="text/javascript">
        var jQuery_1_3_2 = $.noConflict(true);
    </script>
    <script type="text/javascript">
      jQuery_1_3_2(function() { jQuery_1_3_2.smartbanner() } )
    </script>

然而，它不工作，我们不能看到在移动网站上的横幅。

所以我们已经做了这样的改变，并且能够看到顶部的横幅，但是我们站点上的jquery按钮的css已经崩溃了，所有的设计看起来都很糟糕。

    <meta name="apple-itunes-app" content="app-id=1234"/>
    <script type="text/javascript" src="jquery.mobile-1.2.0.min.js"></script>
    <meta name="google-play-app" content="app-id=abc.mobileapp">
    <link rel="stylesheet" href="css/jquery.smartbanner.css" type="text/css" media="screen">
    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>

    <script src="jquery.smartbanner.js"></script>
    <script type="text/javascript">
        var jQuery_1_3_2 = $.noConflict(true);
    </script>
    <script type="text/javascript">
      jQuery_1_3_2(function() { jQuery_1_3_2.smartbanner() } )
    </script>

什么是最好的解决方案，这样我们就可以在我们的移动站点上使用app横幅，使用jquery设计我们的移动站点将不会崩溃。

提前谢谢。

Answer 1

到目前为止，这个我发现最好的工作。简单，整洁，可配置。

https://github.com/ain/smartbanner.js

您只需添加<meta>标记，如下所示：

<meta name="smartbanner:title" content="Smart Application">
<meta name="smartbanner:author" content="SmartBanner Contributors">

然后添加对JS和CSS文件的引用。

<link rel="stylesheet" href="path/to/component/dist/smartbanner.min.css">
<script src="path/to/component/dist/smartbanner.min.js"></script>