动态加载和控制多个内容区域

如果我在这里不熟悉，请提前致歉。我是一个设计师试图学习。我试图让我的设计可行，但我看过各种方法（jQuery，AJAX，灯箱），但我不知道用什么来适合我的设计。链接是在底部，但这里的基本问题：动态加载和控制多个内容区域

对于投资组合中的每个项目，我有主图像区域，一些副本和选择区域有一个图像的短标题，你可以选择（以数字表示），我想要做的是既能够更改图像，并在选择区域中改变标题和数字，还可以在悬停在不同的数字上时显示它们，无需重新加载页面。（我很抱歉，我让这个声音太复杂了，当你看到实际的页面时，它会有更多的电报信息）。理想情况下，我希望找到一种方法，当你改变的时候，允许一个细微的/短暂的淡入淡出，而不是一个尖锐，粗暴的开关，但这是锦上添花。

如果任何人有任何想法指向正确的方向，我将非常感激！非常感谢你的帮助！

http://personal.justgooddesign.net/draft/work.html

来源

2011-06-15 Justin

嗯，这可以使用Ajax来完成。事实上，使用Jquery相当容易。我会建议你有不同的“部分”分解成页面。

我的意思是，例如，您将有一个print.html页面，其中只包含打印页面的标记，网页也相同，运动页面也相同。（只有标记=“主图像区域，一些副本，以及图像标题较短的选择区域”，否<html>,<head>或<body>标记，因为我们实际上正在为您的页面创建“分段”

主要页面容器的标记几乎是相同的，只不过你目前的ID为content3和content4的div将是空的（因为这是我们插入页面的地方，实际上你甚至可以将这两个div分别放到你的页面上并替换他们由一个<div id='dynamic'></div>（更好，因为你有更好地控制在你的细分市场的项目的位置）

从这里我假设你有一些jquery的知识，所以如果你不明白你的东西可以查询或询问。

你可以让每个链接（web/print/motion）都有一个“load_segment”类和一个web/print/motion标识。为了方便起见，我将这些ID命名为与我上面讨论的页面段相同（当然没有.html扩展名）以使一些工作自动化。

这是这样做后，包括jQuery脚本，做一些类似下面的

<script> 
    $(function(){ // shorthand document.ready, ensures dom is loaded before starting 

     $('.load_segment').click(function(){ // binds a click event handler to your links 

      var page = $(this).attr("id") + '.html' 

      /* 
       here is why we named our id the same as our page segments, we auto generate 
       filenames, and thus only need to write this code once for all 3 links. you could 
       even add more later and as long as you have the corresponding html file segment 
       it will still work all the same 
      */ 

      $.get(page,function(segment){ 
      // perform ajax request, fetch page, and then execute function 

       $("#dynamic").html(segment); 
       // the segment is inserted in the dynamic div created above. 

      }); //end ajax request 

     }); // end .load_segment click event 

    }) // end of jquery document.ready 
</script>

请注意，在每个部分中的编号链接，您也可以创建嵌入AJAX取程序，如在上述你的段（不需要再在每个段中包含jquery）并且为每个页面创建......“子段”，但是如果页面要增长，那么从长远来看，这可能会有点复杂。

来源

2011-06-15 20:26:47 kyushiro

动态加载和控制多个内容区域

回答

相关问题