在 jquery ui 对话框中加载 swf

发布于 2024-10-20 05:20:23 字数 1571 浏览 1 评论 0原文

我正在使用 fusionCharts 套件中的 fusionmaps。我已经搜索了他们所有的文档和知识库来了解如何做到这一点，但没有运气，所以我正在与你们联系。

我有一个地图（swf 文件），它从 xml 文档获取数据来构建其数据。在该 xml 中，对于特定实体，我可以进行 javascript 调用。在 swf 所在的文件中，我有 JS 和 jquery 库。我最终试图在 UI 对话框中弹出另一个 swf 文件。如果可能的话，我不知道该怎么做。我弹出对话框，但它是空的。我希望放置在那里的 swf 文件会加载到我的其他 swf 文件之上。有什么建议吗？

这是我的一些代码。

<script type="text/javascript"><!--
$(document).ready(function() { 
    $("#dialogContainer").dialog({
        bgiframe: true,
        height: 500,
        width: 600,
        modal: true,
        autoOpen: false,
        buttons: { "Close": function() { $(this).dialog("close"); }},
        show: 'fold',
        hide: 'fold'
    });
}); //Close ready function  


function loadDialog(continent) {
    //var url = 'showDetails.cfm?region=' + continent;
    //$("#dialogContainer").html('Loading. Please wait...');
    $.ajax({
        type: "post",
        url: 'showDetails.cfm',
        cache: false,
        //dataType: 'html',
        data: 'region=' + continent,
        beforeSend: function() {$('#dialogContainer').html('Loading. Please wait...').dialog('open');},
        success: function(msg) {$('#dialogContainer').html(msg);},
        error: function(msg) {$('#dialogContainer').html(msg);} 
    });
}

我的 fusionmap 电话

<script type="text/javascript">
var map = new FusionMaps("Maps/FCMap_World8.swf", "Map1Id", "500", "300", "0", "0");
map.setDataURL("WorldData2.xml");
map.render("mapdiv");     
</script>

我知道这个问题的可能性不大，但只是希望。感谢您的查看以及您可能有的任何建议。

克里斯

原文

I am using fusionmaps from the fusionCharts suite. I have searched all their documentation and knowledge base to see how to do this but have had no luck, so I am reaching out to you guys.

I have a map (swf file) that takes data from an xml doc to build its data. Within that xml, for a specific entity, I am able to make a javascript call. In the file that the swf is on, I have my JS and the jquery library. I am ultimately trying to get another swf file to popup within the UI dialog box. I am not sure how to do this, if possible. I get the dialog box to popup, but it is empty. The swf file I am wishing to place in there loads on top of my other swf file. Any suggestions?

Here is some of my code.

<script type="text/javascript"><!--
$(document).ready(function() { 
    $("#dialogContainer").dialog({
        bgiframe: true,
        height: 500,
        width: 600,
        modal: true,
        autoOpen: false,
        buttons: { "Close": function() { $(this).dialog("close"); }},
        show: 'fold',
        hide: 'fold'
    });
}); //Close ready function  


function loadDialog(continent) {
    //var url = 'showDetails.cfm?region=' + continent;
    //$("#dialogContainer").html('Loading. Please wait...');
    $.ajax({
        type: "post",
        url: 'showDetails.cfm',
        cache: false,
        //dataType: 'html',
        data: 'region=' + continent,
        beforeSend: function() {$('#dialogContainer').html('Loading. Please wait...').dialog('open');},
        success: function(msg) {$('#dialogContainer').html(msg);},
        error: function(msg) {$('#dialogContainer').html(msg);} 
    });
}

My fusionmap call

<script type="text/javascript">
var map = new FusionMaps("Maps/FCMap_World8.swf", "Map1Id", "500", "300", "0", "0");
map.setDataURL("WorldData2.xml");
map.render("mapdiv");     
</script>

I know this is a long shot on this question, but just hoping. Thanks for looking and any suggestions you may have.

Chris

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

茶色山野 2024-10-27 05:20:23

我可以向您转发在 jQuery 模式窗口（对话框）上呈现 FusionCharts 所需的资源和示例代码。

FusionCharts 的相同功能（使用 LinkedCharts）的一个非常不同的实现已在 PowerCharts 代码示例文档。

在 jQuery 对话框中渲染 FusionCharts 所需的步骤

第 1 步：创建 HTML 对话框容器

在页面上的任何位置，创建一个空白

。并给它一个唯一的id。

<div id="chart-container"></div>

步骤 2：创建 jQuery 对话框和 FusionCharts 对象

在页面加载（jQuery 文档准备就绪）时，将之前创建的分区转换为 jQuery 对话框。

<script type="text/javascript"><!--

// Globally accessible variable for later use
var jqDialog; 

// Create dialog box on document ready.
$(document).ready(function() {
    jqDialog = $('#chart-container').dialog({
        autoOpen: false,
        width: 550,
        height: 320,
        title : 'FusionCharts in jQuery Dialog'
    });
});

var myChart = new FusionCharts({
    swfUrl: 'Charts/Column2D.swf',
    width: '100%', height: '100%',
    renderAt: 'chart-container'
});

// --></script>

步骤 3：创建一个函数来加载 FusionCharts

现在，我们创建一个 JavaScript 函数来加载 FusionCharts 并打开对话框。

<script type="text/javascript"><!--

function loadChartInDialog () {
    jqDialog.dialog('open'); // open dialog
    myChart.setXMLUrl('Data.xml'); // set data of chart
    myChart.render(); // render the chart.
}
//--></script>

现在，当需要时，用户可以调用此loadChartInDialog函数来打开对话框并加载图表。

I can forward you the resources and sample codes needed to render FusionCharts on jQuery modal window (dialog).

A very different implementation of the same (using the LinkedCharts) feature of FusionCharts, has been put up at PowerCharts code samples documentation.

Steps needed to render FusionCharts within jQuery Dialog

Step 1: Create HTML dialog container

Anywhere on your page, create a blank <div> and give it a unique id.

<div id="chart-container"></div>

Step 2: Create jQuery Dialog and FusionCharts object

On page load (jQuery document ready) convert the afore-created division into jQuery dialog box.

<script type="text/javascript"><!--

// Globally accessible variable for later use
var jqDialog; 

// Create dialog box on document ready.
$(document).ready(function() {
    jqDialog = $('#chart-container').dialog({
        autoOpen: false,
        width: 550,
        height: 320,
        title : 'FusionCharts in jQuery Dialog'
    });
});

var myChart = new FusionCharts({
    swfUrl: 'Charts/Column2D.swf',
    width: '100%', height: '100%',
    renderAt: 'chart-container'
});

// --></script>

Step 3: Create a Function to load FusionCharts

Now, we create a JavaScript function that loads FusionCharts and opens the dialog.

<script type="text/javascript"><!--

function loadChartInDialog () {
    jqDialog.dialog('open'); // open dialog
    myChart.setXMLUrl('Data.xml'); // set data of chart
    myChart.render(); // render the chart.
}
//--></script>

Now, when needed, user can call this loadChartInDialog function to open the dialog and load the chart.

回复收藏 0 原文

暖树树初阳… 2024-10-27 05:20:23

如果您使用的是 FusionCharts 3.2 之前的版本，您需要将图表的 wmode 设置为不透明或透明。

这里有一个示例可以提供帮助：

http://www.igcomm.com/show /maps/drill/jQuery

这里使用了3.1 FusionMaps和3.1.1 FusionCharts。截图如下：

FusionCharts in jQuerydialog opening as drown after mapentity is clicked

代码如下：

<html>
  <head>
    <!-- Load FusionMaps 3.1 JavaScript wrapper -->
    <script language="JavaScript" src="FusionMaps.js"></script>
    <!-- Load FusionCharts 3.1.1 JavaScript wrapper -->
    <script language="JavaScript" src="FusionCharts.js"></script>
    <!-- Load jQuery UI resources to load jQuery dialog -->
    <link href="jquery.ui/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script src="jquery.ui/jquery.min.js" type="text/javascript"></script>
    <script src="jquery.ui/jquery-ui.min.js" type="text/javascript"></script>
  </head>
  <body>
    <!-- Declare map and chart container DIVs -->
    <div id="mapdiv" align="center">FusionMaps will load here!</div>
    <div id="chartContainer" style="width:300px;height:300px;">FusionCharts will load here!</div>

    <script type="text/javascript"><!--

       // Declare jQuery dialog on the chart container
       var dialog;
       $(document).ready(function() {
            dialog = $('#chartContainer').dialog({
                autoOpen: false,
                width: 340,
                height: 370,
            });
        });

       // Define and render map of World
       // In the XML data of the map each entity is linked to a JavaScript function showChart 
       // where respective entity id is passed
       var map = new FusionMaps("FCMap_World.swf", "Map1Id", "700", "450", "0", "0");
       // set map to opaque mode
       map.setTransparent(false);
       // If you wish you can set map to transparent mode uncommenting the line below
       //map.setTransparent(true);
       map.setDataURL("mapdata.xml");          
       map.render("mapdiv");


      // This function is called when a Map entity is clicked
      // It takes id as parameter where respective entity id is passed         
      function showChart(id)
      {

        // Stores the full name of each entity with resepct to the id
        var mapNames = {"NA" : "Noth America" , "SA" : "South America" , "AS" : "Asia" , "EU" : "Europe", "AF" : "Africa", "AU" : "Australia"};

        // Render chart
        var chart = new FusionMaps("Pie2D.swf", "chartId", "300", "300", "0", "0");

        // Set chart to opaque mode
        chart.setTransparent(false);
        // f you wish you can set chart to transparent mode uncommenting the line below
        //chart.setTransparent(true);

        // In this simple same detailed data for each map is stored in different files
        // The files are named as per the id
        chart.setDataURL(id+"Chart.xml");          
        chart.render("chartContainer");

        // Sets the dialog's title with the full name of the clicked entity
        dialog.dialog( "option", "title", 'Chart of ' + mapNames[id] );
        // Show the jQuery dialog which contains the chart
        dialog.dialog('open');
      }
    // -->   
    </script>
  </body>
</html>

有也下载源代码： http://www.igcomm.com/显示/maps/drill/jQuery/download.zip 。

If you are using FusionCharts earlier to 3.2 version you would need to set the wmode of the chart to opaque or transparent.

There is a sample here which can help :

http://www.igcomm.com/show/maps/drill/jQuery

Here 3.1 FusionMaps and 3.1.1 FusionCharts has been used. a screenshot is as follows:

FusionCharts in jQuery dialog opening as drilldown after map entity is clicked

The code is as follows:

<html>
  <head>
    <!-- Load FusionMaps 3.1 JavaScript wrapper -->
    <script language="JavaScript" src="FusionMaps.js"></script>
    <!-- Load FusionCharts 3.1.1 JavaScript wrapper -->
    <script language="JavaScript" src="FusionCharts.js"></script>
    <!-- Load jQuery UI resources to load jQuery dialog -->
    <link href="jquery.ui/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script src="jquery.ui/jquery.min.js" type="text/javascript"></script>
    <script src="jquery.ui/jquery-ui.min.js" type="text/javascript"></script>
  </head>
  <body>
    <!-- Declare map and chart container DIVs -->
    <div id="mapdiv" align="center">FusionMaps will load here!</div>
    <div id="chartContainer" style="width:300px;height:300px;">FusionCharts will load here!</div>

    <script type="text/javascript"><!--

       // Declare jQuery dialog on the chart container
       var dialog;
       $(document).ready(function() {
            dialog = $('#chartContainer').dialog({
                autoOpen: false,
                width: 340,
                height: 370,
            });
        });

       // Define and render map of World
       // In the XML data of the map each entity is linked to a JavaScript function showChart 
       // where respective entity id is passed
       var map = new FusionMaps("FCMap_World.swf", "Map1Id", "700", "450", "0", "0");
       // set map to opaque mode
       map.setTransparent(false);
       // If you wish you can set map to transparent mode uncommenting the line below
       //map.setTransparent(true);
       map.setDataURL("mapdata.xml");          
       map.render("mapdiv");


      // This function is called when a Map entity is clicked
      // It takes id as parameter where respective entity id is passed         
      function showChart(id)
      {

        // Stores the full name of each entity with resepct to the id
        var mapNames = {"NA" : "Noth America" , "SA" : "South America" , "AS" : "Asia" , "EU" : "Europe", "AF" : "Africa", "AU" : "Australia"};

        // Render chart
        var chart = new FusionMaps("Pie2D.swf", "chartId", "300", "300", "0", "0");

        // Set chart to opaque mode
        chart.setTransparent(false);
        // f you wish you can set chart to transparent mode uncommenting the line below
        //chart.setTransparent(true);

        // In this simple same detailed data for each map is stored in different files
        // The files are named as per the id
        chart.setDataURL(id+"Chart.xml");          
        chart.render("chartContainer");

        // Sets the dialog's title with the full name of the clicked entity
        dialog.dialog( "option", "title", 'Chart of ' + mapNames[id] );
        // Show the jQuery dialog which contains the chart
        dialog.dialog('open');
      }
    // -->   
    </script>
  </body>
</html>

There is download of the source too : http://www.igcomm.com/show/maps/drill/jQuery/download.zip .

回复收藏 0 原文

~没有更多了~