2

我在 ASP.NET MVC 中使用了 kendo UI 移动版本来显示 iframe 中的更改。在我的 html 中,我有几个视图,其中我想要页眉、包含区域、页脚区域我需要在包含区域中的滚动条,我在每个视图中都使用了“”,它只在一个视图中工作,而不是在其他视图中,所以有什么问题吗?我错过了。

        <div data-role="header"  class="header-home3" >
                <span class="headerContent1"> Opening Hours </span>
        </div>


                <div id="divLayout" data-role="scroller" class="scroller-content middle-home3">
            <div id="divOpeningHoursPageBackgroundImage" class="inner-container">
                <div id="divOpeningHoursheaderImg" class="inner-imgheader"> <img  id="OpeningHoursHeaderImage" style="width:100%;"/></div>
                 <div id="divOpeningHoursHeaderText" class="inner-txtheader"></div>
                <div class="inner-midcontainer">
                     <div id="divOpeningHoursContainer" style="height:80%;min-height:400px;position:static;"></div>
                     <div id="div5" style="float: left;height: 20%;position: relative;width: 100%;"></div>
                </div>
                <div id="divOpeningHoursFooterText" class="inner-txtfooter" > </div>
                <div id="divOpeningHoursFooterImg" class="inner-imgfooter"> <img  id="OpeningHoursFooterImage" style="width:100%;"/></div>
            </div>
        </div>
        <div data-role="footer" class="footer-common footerimg" ></div>
  </div>



    <div data-role="view" id="tabstrip-share">

        <div data-role="header" class="header-map3" >

            <span class="headerContent1"> Map & Direction </span>
        </div>
          <div id="div1" data-role="scroller" class="scroller-content middle-home3">
            <div id="divMapPageBackgroundImage" class="inner-container">
                <div   class="inner-imgheader"> <img id="MapHeaderImage" style="width:100%;"/></div>
                 <div id="divMapHeaderText" class="inner-txtheader"></div>
                <div id="divMapContainer" class="inner-midcontainer">
                    <div id="divgooglemap" style="height:80%;min-height:400px;position:static;"></div>
                     <div id="divMapRoute" style="float: left;height: 20%;position: relative;width: 100%;"></div>
                </div>
                <div id="divMapFooterText" class="inner-txtfooter" > </div>
                <div class="inner-imgfooter"><img id="MapFooterImage"  style="width:100%;"/></div>
            </div>
        </div>
         <div data-role="footer" class="footer-common footerimg" ></div>

    </div>

    <div data-role="view" id="tabstrip-Twitter">
          <div data-role="header" class="header-mile3" >

             <span class="headerContent1"> Twitter </span>
        </div>
           <div data-role="footer" class="footer-common footerimg" ></div>
    </div>

    <div data-role="view" id="tabstrip-History">

        <div data-role="header" class="header-history3" >

            <span class="headerContent1"> Contact Form</span>
        </div>

        <div id="divContactFormMain" data-role="scrollview" class="scroller-content middle-home3">
            <div id="divContactFormPageBackgroundImage" class="inner-container">
                <div id="divContactFormheaderImg"  class="inner-imgheader"> <img id="ContactFormHeaderImage" style="width:100%;"/></div>
                 <div id="divContactFormHeaderText" class="inner-txtheader"></div>
                <div id="divContactFormContainer" class="inner-midcontainer">
                <div id="div6" style="height:80%;min-height:400px;">
                <div style="width: 100%; height: 20%; margin-bottom: 13%;">
                <div style="float: left; padding-left: 5%; width: 25%; text-align: left;"> Name</div>
                <div style="float: left; width: 55%; padding-left: 5%;"> <input type="text" id="txtHtmlName" class="newstyle" name="name"></div>
                </div>

                    <div style="width: 100%; height: 20%; margin-bottom: 13%;">
                <div style="float: left; padding-left: 5%; width: 25%; text-align: left;"> Address</div>
                <div style="float: left; width: 55%; padding-left: 5%;"> <input type="text" id="txtHtmlAddress" class="newstyle" name="name"></div>
                </div>


                    <div style="width: 100%; height: 20%; margin-bottom: 13%;">
                <div style="float: left; padding-left: 5%; width: 25%; text-align: left;"> Country</div>
                <div style="float: left; width: 55%; padding-left: 5%;"> <input type="text" id="txtHtmlCountry" class="newstyle" name="name"></div>
                </div>


                     <div style="width: 100%; height: 20%; margin-bottom: 13%;">
                <div style="float: left; padding-left: 5%; width: 25%; text-align: left;"> Email</div>
                <div style="float: left; width: 55%; padding-left: 5%;"> <input type="text" id="txtHtmlEmail" class="newstyle" name="name"></div>
                </div>


                     <div style="width: 100%; height: 20%; margin-bottom: 13%;">
                <div style="float: left; padding-left: 5%; width: 25%; text-align: left;"> Phone</div>
                <div style="float: left; width: 55%; padding-left: 5%;"> <input type="text" id="txtHtmlPhone" class="newstyle" name="name"></div>
                </div>

                    <div style="width: 100%; height: 20%; margin-bottom: 13%;text-align:center;margin-top:20%;">
                       <input type="button" id="btnHtmlSaveContactForm" class="newButton" value="SAVE"/>
                        </div>
                </div>
                </div>
                <div id="divContactFormFooterText" class="inner-txtfooter" > </div>
                <div id="divContactFormFooterImg" class="inner-imgfooter"><img id="ContactFormFooterImage"  style="width:100%;"/></div>
            </div>
        </div>
         <div data-role="footer" class="footer-common footerimg" ></div>
    </div>

    <div data-role="view" id="tabstrip-news">

        <div data-role="header" class="header-news3" >

             <span class="headerContent1"> News & Articles </span>
        </div>
          <div id="divNewsMain" data-role="scroller" class="scroller-content middle-home3">
            <div id="divNewsPageBackgroundImage" class="inner-container">
                <div id="divNewsheaderImg"  class="inner-imgheader"> <img id="NewsHeaderImage" style="width:100%;"/></div>
                 <div id="divNewsHeaderText" class="inner-txtheader"></div>
                <div id="divNewsContainer" class="inner-midcontainer">
               This is News and Article Page
                </div>
                <div id="divNewsFooterText" class="inner-txtfooter" > </div>
                <div id="divNewsFooterImg" class="inner-imgfooter"><img id="NewsFooterImage"  style="width:100%;"/></div>
            </div>
        </div>
          <div data-role="footer" class="footer-common footerimg" ></div>

    </div>

    <div data-role="view" id="tabstrip-About">

        <div data-role="header" class="header-about3" >

             <span class="headerContent1"> About Page</span>
        </div>
        <div id="divAboutMain" data-role="scroller" class="scroller-content middle-home3">
             <div id="divAboutPageBackgroundImage" class="inner-container">
                <div id="divAboutHeaderImg"  class="inner-imgheader"> <img id="AboutHeaderImage" style="width:100%;"/></div>
                 <div id="divAboutHeaderText" class="inner-txtheader"></div>
                <div id="divAboutContainer" class="inner-midcontainer">
               This Is About Page
                </div>
                <div id="divAboutFootertext" class="inner-txtfooter" > </div>
                <div id="divAboutFooterImg" class="inner-imgfooter"><img id="AboutFooterImage"  style="width:100%;"/></div>
            </div>
        </div>
        <div data-role="footer" class="footer-common footerimg" ></div>
    </div>

    <div data-role="view" id="tabstrip-Events">

        <div data-role="header" class="header-event3" >

             <span class="headerContent1">Events</span>
        </div>
        <div id="divEventsMain" data-role="scroller" class="scroller-content middle-home3">
             <div id="divEventsPageBackgroundImage" class="inner-container">
                <div id="divEventsHeaderImg"  class="inner-imgheader"> <img id="EventsHeaderImage" style="width:100%;"/></div>
                 <div id="divEventsHeaderText" class="inner-txtheader"></div>
                <div id="divEventsContainer" class="inner-midcontainer">
               This is Events Page
                </div>
                <div id="divEventsFooterText" class="inner-txtfooter" > </div>
                <div id="divEventsFooterImg" class="inner-imgfooter"><img id="EventsFooterImage"  style="width:100%;"/></div>
            </div>
        </div>
           <div data-role="footer" class="footer-common footerimg" ></div>
    </div>

    <div data-role="view" id="tabstrip-Team">

        <div data-role="header" class="header-team3" >

             <span class="headerContent1"> Team Member </span>
        </div>
        <div id="divTeamMain" data-role="scroller" class="scroller-content middle-home3">
             <div id="divTeamPageBackgroundImage" class="inner-container">
                <div id="divTeamheaderImg"  class="inner-imgheader"> <img id="TeamMembersHeaderImage" style="width:100%;"/></div>
                 <div id="divTeamHeaderText" class="inner-txtheader"></div>
                <div id="divTeamContainer" class="inner-midcontainer">
                     <div id="div2" style="height:80%;min-height:400px;">
                         This is team member page
                         </div>
                    <div id="div3" style="float: left;height: 20%;position: relative;width: 100%;"></div>
                </div>
                <div id="divTeamFooterText" class="inner-txtfooter" > </div>
                <div id="divTeamFooterImg" class="inner-imgfooter"><img id="TeamMembersFooterImage"  style="width:100%;"/></div>
            </div>
        </div>
          <div data-role="footer" class="footer-common footerimg" ></div>
    </div>

    <div data-role="view" id="tabstrip-Contacts">

        <div data-role="header" class="header-contact3" >

             <span class="headerContent1"> Contact Details</span>
        </div>
         <div id="divContactDetailsMain" data-role="scroller" class="scroller-content middle-home3">
             <div id="divContactDetailsPageBackgroundImage" class="inner-container">
                <div id="divContactDetailsHeaderImg"  class="inner-imgheader"> <img id="ContactDetailsHeaderImage" style="width:100%;"/></div>
                 <div id="divContactDetailsHeaderText" class="inner-txtheader"></div>
                <div id="divContactDetailsContainer" class="inner-midcontainer">
               This is contact details Page
                </div>
                <div id="divContactDetailsFooterText" class="inner-txtfooter" > </div>
                <div id="divContactDetailsFooterImg" class="inner-imgfooter"><img id="ContactDetailsFooterImage"  style="width:100%;"/></div>
            </div>
        </div>
         <div data-role="footer" class="footer-common footerimg" ></div>
    </div>

    <div data-role="view" id="tabstrip-Facebook">
        <div data-role="header" class="header-mile3" >

             <span class="headerContent1"> Facebook </span>
        </div>
           <div data-role="footer" class="footer-common footerimg" ></div>
    </div>

    <div data-role="view" id="tabstrip-miles">

        <div data-role="header" class="header-mile3" >
             <span class="headerContent1"> Milestones </span>
        </div>
         <div id="divMilestonesMain" data-role="scroller" class="scroller-content middle-home3">
             <div id="divMilestonesPageBackgroundImage" class="inner-container">
                <div id="divMilestonesHeaderImg"  class="inner-imgheader"> <img id="MilestoneHeaderImage" style="width:100%;"/></div>
                 <div id="divMilestonesHeaderText" class="inner-txtheader"></div>
                <div id="divMilestonesContainer" class="inner-midcontainer">
                this is Milestones page
                </div>
                <div id="divMilestonesFooterText" class="inner-txtfooter" > </div>
                <div id="divMilestonesFooterImg" class="inner-imgfooter"><img id="MilestoneFooterImage"  style="width:100%;"/></div>
            </div>
        </div>
           <div data-role="footer" class="footer-common footerimg" ></div>
    </div>

    <!--3rd layout ends here-->
    <script>
        var subMenuVal = parent.document.getElementById("selectedSubMenu").value; 
        if ((subMenuVal == "") || (typeof subMenuVal === "undefined")) {
            var app = new kendo.mobile.Application(document.body, { transition: "slide", layout: "mobile-tabstrip" });
        }
        else {
            console.log(subMenuVal);
            var app = new kendo.mobile.Application(document.body, { transition: "slide", initial: subMenuVal });
        }

    </script>
</body>

提前致谢

4

0 回答 0