0

Web ページに表示されているファイルのリストがあります。(Cherrypy と Jinja2 を使用したブラウザー ベースの Python アプリ) 私が望むのは、ユーザーがリストの 1 つの項目をクリックすると、素敵な小さな Jquery ダイアログ ボックスがポップアップして、クリックした項目に関する追加情報を提供することです。ダイアログボックスをセットアップして機能させましたが、中に入る特定の情報はありません。ここで助けが必要です。

ページに表示されるリストの各項目の HTML ファイルを作成する Python スクリプトを作成しました。たとえば、ユーザーが表示されたリストで foo.pdf をクリックしたときに foo.html を読み込むにはどうすればよいですか?

次のJavascriptコードがあります（@Sander Roesの厚意による）：

$(document).ready(function(){
  $("#selectable").children("li").each(function() {
      $(this).mouseover(function(){
          $(this).css("background-color","#FECA40");
      });
      $(this).mouseout(function(){
          $(this).css("background-color","white");
      });
      $(this).click(function(){
          if (!$(this).data('dialog')) {
              $(this).data('dialog', 
                  $('<div />')
                      .load('whatever.html')    // <-- This HTML file should  
                      .dialog({autoOpen: false, // coordinate with user selection
                   show: "slide",
                               hide: "fade",
                       width: 500,
               height: 500})
              );
          }
          var dlg = $(this).data('dialog');
          dlg.dialog( "open" );
          return false;
    });
  });
});

私の考えは、リスト内の各項目に一意のものを割り当て、idそれに基づいて.htmlファイルをロードすることidでしたが、Javascriptでそれを行う方法、またはJavascriptでそれを行うことができる/行うべきかどうかはわかりませんか? ありがとうございました！

更新:
@ user1598086 によって提供されたコードはうまく機能しました。また、適切な手段としてそのHTML5shivを投入しました。必要かどうかはわかりませんが、害はないと考えています。

4

1 に答える 1

1

data-IDの代わりに属性 を使用できます：http： //ejohn.org/blog/html-5-data-attributes/

例えば：

<li data-externalfile="whatever.html">Whatever</li>

次に（コードからjQueryを使用していると仮定して）、.load('whatever.html')例ではなく、

.load(($this).attr("data-externalfile"))
于 2012-11-28T00:52:10.220 に答える