zoukankan      html  css  js  c++  java
  • 静态页面菜单栏布局整改使用iframeset

        项目初期静态页面素材是单独分开的独立功能页面,但拥有相同的页面布局规则(头部横幅区域显示logo系统名称,页面左侧区域显示菜单、右侧主题部分显示不同菜单对应内容),最初页面菜单点击是链接到另一个对应内容页面打开新窗口,重新显示头部、菜单、主题;但真正用于系统中需要固定菜单栏,在点击菜单时候只替换主题内容页面区域部分。

       开始改造页面,思路有二:

        一、通过页面中js事件控制页面内容变动 <a href="javascript:$(#xxx).load('/views/xxx/xx.html');">

        二、使用iframeset标签,这里分享使用iframeset时遇到的曲折以作为经验。

    菜单栏html代码如:

    <ul>
    <li id="index1" >
    <a id="index_a1" href="/one/two/three.html" target="mainframe">
    <span >选项一<br>
    <b>Option one</b>
    </span>
    </a>
    </li>
    <li id="index2" >
    <a href="" lay-href="/" target="mainframe">
    <span >选项二<br>
    <b>Option otwo</b>
    </span>
    </a>
    </li>
    <li id="index3" >
    <a href="/content/views/gxxx/gxxx.html" target="mainframe">
    <span >xxx<br>
    <b> xxx</b>
    </span>
    </a>
    </li>
    </ul>

      通过在a标签target属性指定在点击菜单时链接到规划好的页面主体窗口中!

    <iframe id="myiframe" name="mainframe" scrolling="no" frameborder="0" height="auto" width="100%" border="0"></iframe>

      这里iframe中name属性就是a标签中target指向的主体区域部分 ,大概思路就是这样至于样式问题根据具体修改调整。

  • 相关阅读:
    C#深入浅出 修饰符(二)
    HDU 5785 Interesting
    HDU 5783 Divide the Sequence
    HDU 5781 ATM Mechine
    UVA 714 Copying Books
    uva 1471 Defense Lines
    UVA 11134 Fabled Rooks
    UVA 11572 Unique Snowflakes
    UVA 11093 Just Finish it up
    UVA 10954 Add All
  • 原文地址:https://www.cnblogs.com/luoning/p/11106489.html
Copyright © 2011-2022 走看看