將可變HTML文件加載到Javascript對話框中

我有一個在網頁上顯示的文件列表。（使用Cherrypy和Jinja2的基於瀏覽器的Python應用程序）我想要的是，當用戶點擊列表中的一個項目時，彈出一個漂亮的小Jquery對話框，併爲他們提供關於他們點擊的任何項目的附加信息。我有對話框設置和功能，減去進入內部的具體信息。這是我需要幫助的地方。將可變HTML文件加載到Javascript對話框中

我寫了一個Python腳本，爲頁面上顯示的列表中的每個項目創建HTML文件。如何在用戶點擊顯示列表中的foo.pdf時加載foo.html？

我有以下的Javascript代碼（@Sander魚卵提供）：

$(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然後加載基於該id .html文件分配，但我不知道如何在Javascript中做到這一點，或者如果我甚至可以/應該在Javascript中做到這一點？謝謝！

更新：
由@ user1598086提供的代碼工作很大。我也投入那HTML5shiv好措施。不知道是否需要，但認爲它不會受傷。

來源

2012-11-28 Dryden Long

可以使用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-28 00:52:10 flyingjamus

哇，我不能相信這是多麼容易。我期待一些精心製作的JS/Python腳本，但這很簡單。謝謝！ –

將可變HTML文件加載到Javascript對話框中

回答

相關問題