Question

我正在开发新闻信件网络应用程序，它由4个内部选项卡组成，他可以在一个选项卡中选择布局，并选择他想要在另一个选项卡中发送的人员以及所选布局内容的预览，最后提交选项卡。

我希望将tab1（布局）的内容部分加载到另一个HTML页面的内容（其中创建页眉和页脚部分以显示第3个选项卡中的预览），因为此HTML页面链接到第3个选项卡。我可以使用jquery将整个页面加载到HTML页面，但我想将动态生成的布局加载到tab1到HTML页面的内容。

以下是4个内部标签

<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a id="templ_code_tab" data-toggle="tab" href="#templ_code">1. Select teh layout</a></li>
    <li class=""><a id="templ_preview_tab" data-toggle="tab" href="#templ_list">2. List o fthe people</a></li>
    <li class=""><a id="templ_preview_tab" data-toggle="tab" href="#temp_preview">3. preview</a></li>
    <li class=""><a id="templ_preview_tab" data-toggle="tab" href="#templ_preview1">4. send</a></li>
</ul>

在Tab1中，客户可以选择他的布局并在其中发布内容/图像

<select id="templ_editor_theme1" class="form-control input-sm" >
    <option value="" disabled selected>Select Layout</option>
    <option value="1">TextboxandImage</option>
    <option value="2">Imageonly</option>
 </select>

以下是选项1和2的Tab1布局DIV部分

<div class="row" id ="TextboxandImage" style="display:none" >
  <div class="col-sm-12">

    <div class="row">
      <div class="col-sm-6">
        <textarea class="form-control" rows="10"></textarea>
      </div>
      <div class="col-sm-6">
        <img src="http://www.jail.se/hardware/digital_camera/canon/ixus_800is-powershot_sd700/images/sample_photos/sample3.jpg"  class="img-thumbnail" rows="10"/>
      </div>
    </div>

  </div>
  <div class="hover-btn">
    <button type="button" class="close" data-dismiss="alert">

    </button>
  </div>
</div>


<div class="row" id ="Imageonly" style="display:none">
  <div class="col-sm-12">
    <input type="image" src="http://www.jail.se/hardware/digital_camera/canon/ixus_800is-powershot_sd700/images/sample_photos/sample3.jpg"  class="img-thumbnail" rows="5" onclick="chooseFile();"/>
    <input type="file" id="my_file" style="display: none" />
    <input type="submit" id="Up" style="display: none;" />
  </div>
  <div class="hover-btn">
    <button type="button" class="close" data-dismiss="alert">
      <span aria-hidden="true">×</span>
      <span class="sr-only">Close</span>
    </button>
  </div>
</div>

在第二个标签中，客户可以选择要发送新闻信的人员列表。

<div id="templ_list" class="tab-pane fade">              
  <h1>Listor</h1>
  <div class="row">
    <div class="col-sm-12">
      <label>Välj de listor du vill skicka till:</label>
      <br />
      <br />
      <input type="checkbox" />&nbsp;&nbsp;Test/utveckling
      <br />
      <input type="checkbox" />&nbsp;&nbsp;Intern korr
      <br />
      <input type="checkbox" />&nbsp;&nbsp;Kunder
    </div>
  </div>
</div>

单击第三个选项卡（预览选项卡）时，应显示选定的布局，其中包含带有页眉和页脚的Tab1。

我创建了带有页眉，页脚和div内容（空内容）的HTML，通过iframe将其链接到第三个标签。

基本HTML页面

<div id="temp_preview" class="tab-pane fade">
  <iframe src="~/Templates/LgCollection/Basic.html" style="width: 90%; height: 700px"></iframe>
</div>

现在我想将选定的布局和内容加载到HTML内容的空内容Div页面，该页面链接到第3个标签页。

<body>
  <div class ="header" >
    <div class ="container">
      <div class ="logo">
        <img src="/images/logo1.png" />
      </div>
    </div>
  </div>

  <div id ="content">

这里我想加载tab1动态选择带内容的布局

  </div>


  <div class=" footer">

  </div>

</body>

将动态生成的布局加载到HTML页面的DIV内容部分

0 个答案: