1

にアンカータグを動的に追加したいdiv="myDiv"。
別のダイビングでそれを囲まない限り、それはかなり機能しdata-role="page"ます。
ボタンリンクのページとして呼び出せるように、ページで囲みたいのですが、何が問題なのでしょう。
以下はコードです。

<html>
    <head>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
        <!--<script type="text/javascript" src="http://swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js"></script> -->
        <style>
            figure{
                float:left
            }
            figcaption{
                font-size: small;
            }
            img {
                float:left; 
            }
            a {
                color: black;
                text-decoration: none;
            }
            a:hover {
                color:black; 
                text-decoration:none; 
                cursor:pointer;  
            }
        </style>        
    </head>
    <body>
        <div data-role="page">   //remove this and it will start working.
            <div data-role="div" id="myDiv" ></div>
            <div data-role="popup" id="popupMap1" class="ui-content" data-overlay-theme="a" data-theme="a" data-corners="false" data-tolerance="15,15"></div>
        </div>
        <script>
            function play(id){
                document.getElementById("popupMap1").innerHTML="<a href='#' data-rel='back' data-role='button' data-theme='a' data-icon='delete' data-iconpos='notext' class='ui-btn-right'>Close</a><iframe src='http://www.youtube.com/embed/"+id+"' width='480' height='320' seamless='' id='plyerIframe1'></iframe>";                    
            }
        </script>
        <script type="text/javascript" 
        src="http://gdata.youtube.com/feeds/api/standardfeeds/most_popular?time=today&alt=json-in-script&callback=showMyVideos2&max-results=15&format=5">
    </script>
    <script type="text/javascript">
        var title=new Array();
        var thumbnailUrl=new Array();
        var playerUrl=new Array();
        var mydiv = document.getElementById("myDiv");
        var duration=new Array();
        var views=new Array();
        var idi=new Array();

        function showMyVideos2(data) {
            var feed = data.feed;
            var entries = feed.entry || [];
            var html = ['<ul class="videos">'];

            for (var i = 0; i < entries.length; i++) {
                var entry = entries[i];
                title[i] = entry.title.$t.substr(0,20);
                thumbnailUrl[i] = entry.media$group.media$thumbnail[0].url;
                playerUrl[i] = entry.media$group.media$content[0].url;
                duration[i]= entry.media$group.media$content[0].duration;
                views[i]= entry.yt$statistics.viewCount;
                var aTag = document.createElement('a');
                aTag.setAttribute('href','#popupMap1');
                aTag.setAttribute('data-rel','popup');
                aTag.setAttribute('data-position-to','window');
                aTag.setAttribute('data-theme','b');
                aTag.setAttribute('data-inline','true');

                //idi[i]=playerUrl[i].substring(25,36);
                idi[i]=entry.media$group.yt$videoid.$t;

                aTag.innerHTML ="<figure  onclick='play(idi["+i+"])'><figcaption>"+title[i]+"...</figcaption><img src="+thumbnailUrl[i]+"  width='200px' height='150px' ><footer>Duration: "+duration[i]+" seconds<br><span>Total Views: "+views[i]+"</span></footer></figure>" ;
                mydiv.appendChild(aTag);    
            }                   
        }       
        </script>
    </body>
</html>
4

1 に答える 1

1

私はあなたの問題の解決策でjsFiddleを作りました。

説明：

divを使用すると、data-role="page"jQuery-Mobileフレームワークを使用することになります。これにより、DOMでいくつかの操作が実行され、いくつかの要素が再配置されます。舞台裏で何が起こっているのか正確にはわからないので、これについてはこれ以上詳しく説明しませんが、YouTubeスクリプトが試行した時点で、jQuery-Mobileがまだページのレンダリングを完了していないことが起こっているようです。呼び出すshowMyVideos2。

そこで、そのスクリプトを含めたタグを削除し、<script>代わりに次のjavascriptコードを追加しました。

$(document).on('pageshow', function() {
    $.getScript("http://gdata.youtube.com/feeds/api/standardfeeds/most_popular?time=today&alt=json-in-script&callback=showMyVideos2&max-results=15&format=5");
});

これについて知っておくべき2つのこと：

  1. このコードをpageshowイベントのコールバックに入れて、DOM操作を開始する前に、jQuery-Mobileがページで実行する必要のあるすべての作業を完了したことを確認します。その他のjQuery-pagechangeやなどのモバイルイベントpagecreateも機能します。

  2. jQueryのgetScript（）メソッドを使用してYouTubeスクリプトをロードしました。これにより、外部スクリプトを動的に取得して実行できます。これは、実際には、次の$ .ajax（）メソッドの場合の省略表記です。

    $.ajax({
  url: "http://gdata.youtube.com/feeds/api/standardfeeds/most_popular?time=today&alt=json-in-script&callback=showMyVideos2&max-results=15&format=5",
  dataType: "script"
});
于 2012-11-29T14:44:37.390 に答える