0

約 50 のラジオ局を一覧表示するインターフェイスを作成するプロジェクトがあります。これで、50 の無線すべてを一覧表示するインターフェイスと、ページをリロードせずにステーションを切り替えることができるようになりました。私は現在、Div を非表示にしてページの下部にドッキングされた DIV を使用しています。ユーザーがステーションのロゴをクリックすると、div コンテンツが変更され、要求されたステーションのコンテンツがプレーヤーと共に表示されます。しかし、すべてのステーションの Div がコンテンツとともに非表示になっている状態でページが読み込まれるため、読み込みに非常に時間がかかります。そのため、クリック時にページをリロードできないように単純に再生したいと思いますが、今回は PHP、jQuery、Ajax などの動的スクリプトを使用します。以下は、ここの善良な人々の助けを借りて私が実現したいことの例です: http://www.radioways.fr/webradios/radio-fm.html

すべてのステーションをロードする代わりに、MySQL にそれらをリストし、PHP/jQuery/Ajax スクリプトを使用して、要求されたステーション データを DB から取得し、それを下部のドッキング DIV の現在のデータに置き換えます (ステーション)名前、再生 URL、連絡先など...)

私は、すでに同様のスクリプトを持っているか、従うべき方法をアドバイスしてくれる優しい人たちに助けを求めています....

前もって感謝します、

TymeJV さん、お返事ありがとうございます。しかし、私は PHP コーディングが非常に限られているため、完全なサンプル コードを求めていました。

現在使用している HTML/JavaScript コードは次のとおりです。ヘッダーの JS:

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    var speed = 500; 
    var animating = false;

    $("a.nav").click(function(){
        if ((!animating) && $("#"+$(this).attr("rel")).is(":hidden"))
        {
            animating = true;
            var requestedDiv = "#"+$(this).attr("rel");
            $("#radiolisting").children("div").each(function(){$(this).fadeOut(speed/2)});
            $("#radiolisting").animate({height: $(requestedDiv).height()}, speed);
            $(requestedDiv).delay(speed/1.5).fadeIn(speed);
            setTimeout(function(){animating = false}, speed*2);
        }
        return false;
    });
});
</script>

ラジオ局を一覧表示するための HTML:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <title>000000</title>



    <style type="text/css">
    #radiolisting div{display:none}
    #radiolisting div#001{display:block}
    </style>


     <link href="css/melo.css" rel="stylesheet" type="text/css" />



     </head>

    <body>
    <!--start container -->
    <div id="container">



    <div class="content" align="center">
         <div height="160" width="430"><img class="float-center" src="images/logo.png" align="center"  /></a>
         <br />
    </div>    



         <main>    



            <!--station logo listing with rel to change the content without reloading the page -->


          <div class="box" id="box">
          <a href="#" class="nav" title="Radio" rel="001"><img class="float-left" src="radio/002.jpg" alt="Click here to listen to this Station" align="center" height="83" width="160" /></a>
            </div>

          <div class="box" id="box">
          <a  href="#" class="nav" title="Radio" rel="003"><img class="float-left" src="radio/003.gif" alt="Click here to listen to this Station" align="center" height="83" width="160" /></a>   
          </div>

          <div class="box" id="box">
          <a href="#" class="nav" title="Radio" rel="004"><img class="float-left" src="radio/004.jpg" alt="Click here to listen to this Station" height="83" width="160" /></a>  
          </div>

          <div class="box" id="box">
          <a href="#" class="nav" title="Radio" rel="005"><img class="float-left" src="radio/005.png" alt="Click here to listen to this Station" height="83" width="160" /></a>  
          </div>

          <div class="box" id="box">
          <a href="#" class="nav" title="Radio Cenner FM Dakar" rel="ceeneer"><img class="float-left" src="radio/006.jpg" alt="Click here to listen to this Station" height="83" width="160" /></a>  
          </div>

          <div class="box" id="box">
          <a href="#" class="nav" title="Radio Jant bi FM Touba" rel="jantbifm"><img class="float-left" src="radio/007.jpg" alt="Click here to listen to this Station" height="83" width="160" /></a>  
          </div>

           <div class="box" id="box">
          <a href="#" class="nav" title="Radio 000" rel="008"><img class="float-left" src="radio/008jpg" alt="00" height="83" width="160" /></a>  
          </div>

          <div class="box" id="box">
          <a href="#" class="nav" title="Radio 000" rel="lampfm"><img class="float-left" src="radio/009" alt="Click here to listen to this Station" height="83" width="160" /></a>  
          </div>







    </div>
        </main>


    </div>
    <!--end container -->
    <!--station content listing -->
    <div id="radiolisting">

        <div id="002" class="rajo">
        <p class="leeral"> 
        Nom De la Station: 000<br />
        Frequence FM  MHz: n/a <br />
        Site de Transmission: Italie <br />
        Contact : Skype en Direct: <a href="skype:000?call"><img src="http://download.skype.com/share/skypebuttons/buttons/call_blue_transparent_34x34.png" style="border: none;" width="34" height="34" alt="000" /></a>

        </p>

    <p style="float:left; padding-left: 5px;">
    radio player embed code</div>

        <div id="002" class="rajo">
        <p class="leeral"> 
        Nom De la Station: 000<br />
        Frequence FM  MHz: n/a <br />
        Site de Transmission: Italie <br />
        Contact : Skype en Direct: <a href="skype:000?call"><img src="http://download.skype.com/share/skypebuttons/buttons/call_blue_transparent_34x34.png" style="border: none;" width="34" height="34" alt="000" /></a>

        </p>

    <p style="float:left; padding-left: 5px;">
    radio player embed code</div>

        <div id="003" class="rajo">
        <p class="leeral"> 
        Nom De la Station: 000<br />
        Frequence FM  MHz: n/a <br />
        Site de Transmission: Italie <br />
        Contact : Skype en Direct: <a href="skype:000?call"><img src="http://download.skype.com/share/skypebuttons/buttons/call_blue_transparent_34x34.png" style="border: none;" width="34" height="34" alt="000" /></a>

        </p>

    <p style="float:left; padding-left: 5px;">
    radio player embed code</div>

        <div id="004" class="rajo">
        <p class="leeral"> 
        Nom De la Station: 000<br />
        Frequence FM  MHz: n/a <br />
        Site de Transmission: Italie <br />
        Contact : Skype en Direct: <a href="skype:000?call"><img src="http://download.skype.com/share/skypebuttons/buttons/call_blue_transparent_34x34.png" style="border: none;" width="34" height="34" alt="000" /></a>

        </p>

    <p style="float:left; padding-left: 5px;">
    radio player embed code</div>

        <div id="005" class="rajo">
        <p class="leeral"> 
        Nom De la Station: 000<br />
        Frequence FM  MHz: n/a <br />
        Site de Transmission: Italie <br />
        Contact : Skype en Direct: <a href="skype:000?call"><img src="http://download.skype.com/share/skypebuttons/buttons/call_blue_transparent_34x34.png" style="border: none;" width="34" height="34" alt="000" /></a>

        </p>

    <p style="float:left; padding-left: 5px;">
    radio player embed code</div>

        <div id="006" class="rajo">
        <p class="leeral"> 
        Nom De la Station: 000<br />
        Frequence FM  MHz: n/a <br />
        Site de Transmission: Italie <br />
        Contact : Skype en Direct: <a href="skype:000?call"><img src="http://download.skype.com/share/skypebuttons/buttons/call_blue_transparent_34x34.png" style="border: none;" width="34" height="34" alt="000" /></a>

        </p>

    <p style="float:left; padding-left: 5px;">
    radio player embed code</div>

    <div id="007" class="rajo">
        <p class="leeral"> 
        Nom De la Station: 000<br />
        Frequence FM  MHz: n/a <br />
        Site de Transmission: Italie <br />
        Contact : Skype en Direct: <a href="skype:000?call"><img src="http://download.skype.com/share/skypebuttons/buttons/call_blue_transparent_34x34.png" style="border: none;" width="34" height="34" alt="000" /></a>

        </p>

    <p style="float:left; padding-left: 5px;">
    radio player embed code</div>

        <div id="008" class="rajo">
        <p class="leeral"> 
        Nom De la Station: 000<br />
        Frequence FM  MHz: n/a <br />
        Site de Transmission: Italie <br />
        Contact : Skype en Direct: <a href="skype:000?call"><img src="http://download.skype.com/share/skypebuttons/buttons/call_blue_transparent_34x34.png" style="border: none;" width="34" height="34" alt="000" /></a>

        </p>

    <p style="float:left; padding-left: 5px;">
    radio player embed code</div>
    </div>  

      </body>

    </html>
4

1 に答える 1

0

実際には非常に簡単です。上記のコードはないので、サンプル コードを示します。したがって、下部ドックの div はおそらく次のようなものになります。

<div id="ajaxContainer"></div>

また、ラジオには、valueクエリを実行するためにサーバーに送り返すステーションの が含まれている必要があります。

<input type="radio" name="station" value="rock101.7" /> Rock Radio!

ここでchange、ラジオがクリックされたときにトリガーされるイベントが必要になります。

$(":radio[name=station]").change(function() {
    //Lets start that AJAX
    $.ajax({
        url: url, //url to php func
        data: {radio: this.value}, //this.value will be whatever the value attr of the radio element is, in this case: "rock101.7"
        dataType: 'json', //change to whatever datatype your RECEIVING from the server
        success: function(data) {
            //data is the data received back from the server, so just send it to your container
            $("#ajaxContainer").html(data); //replace all content in  #ajaxContainer with your content back from the server
        }
    });
});

PHP 側では、次の簡単な方法で POST 変数を受け取ることができます。

$param = $_POST['radio']; //radio is the key we defined above in the 'data' portion of the AJAX call.

そして、それは基本的にそれです！

于 2013-10-03T17:08:41.250 に答える