Jquery移动转换事件未触发

时间:2016-06-19 20:42:52

标签: asp.net-mvc jquery-mobile css-transitions

我正在使用Jquery mobile进行数据转换=" slide"。 这样工作正常,每个页面加载是自己的页面,而不是标签数据滑块(如果这有任何区别)

我尝试在滑块转换加载页面后尝试一些JavaScript触发器。 我有一个js文件,用于设置控件的最大高度 - 如果我在页面上刷新并且刷新但是如果它由滑动转换加载,那么JavaScript就不会触发。我已经在pageinit,pageload等中尝试了它,但没有触发。

任何人都可以在这里指出这个问题。 App.JS

$(document).ready(function () {
var header = document.getElementById('header').offsetHeight;
var footer = document.getElementById('pagefooter').offsetHeight;
var wrapperH = window.innerHeight - header - footer - 50;
document.getElementById('maincontent').style.height = wrapperH + 'px';
});

$(document).on("pageinit", function (event) {
    var header = document.getElementById('header').offsetHeight;
    var footer = document.getElementById('pagefooter').offsetHeight;
    var wrapperH = window.innerHeight - header - footer - 50;
    document.getElementById('maincontent').style.height = wrapperH + 'px';
});

$(document).off('pageshow');
$(document).on('pageshow', function (e, ui) {
    // generally written in pagechange event.
    var header = document.getElementById('header').offsetHeight;
    var footer = document.getElementById('pagefooter').offsetHeight;
    var wrapperH = window.innerHeight - header - footer - 50;
    document.getElementById('maincontent').style.height = wrapperH + 'px';
});

基础mvc布局页面

@{
    ViewData["Logo"] = "bird.png";
    ViewData["Icon"] = "cascade.ico";
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <meta name="Robots" content="noindex" />
    <title>@ViewBag.SiteTitle</title>
    <link rel="icon" type="image/x-icon" href="~/img/@ViewBag.Icon" /> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

    <environment names="Development">
        <!-- Dev uses full file versions for de-bugging -->
        <script src="~/lib/jquery/dist/jquery.js"></script>
        <script src="~/lib/jquery-mobile-min/jquery.mobile.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
    </environment>
    <environment names="Staging,Production">
        <script src="~/lib/jquery/dist/jquery.min.js"></script>
        <script src="~/lib/jquery-mobile-min/jquery.mobile.min.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
    </environment>

    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link href="~/styles/all/all.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="~/Styles/Mobile/mobile.css" media="only screen and (max-width: 481px)" />
    <link rel="stylesheet" type="text/css" href="~/Styles/Desktop/desktop.css" media="only screen and (min-width: 481px)" />
    <script type="text/javascript">

    </script>

    @RenderSection("Scripts", false)
</head>
<body>
    <div data-role="page">
        <div id = "header" data-role="header" data-id="persistent" data-position="fixed">
            <div id="headnav" class="navbar navbar-inverse">
                <div class="container">
                    <div class="navbar-toggle navbar-text" data-toggle="collapse">
                        <h3 class="title">@ViewBag.Title</h3>
                        <h5 class="subtitle">@ViewBag.SubTitle</h5>
                    </div>
                    <div class="navbar-left" rel="home" href="#" title="@ViewBag.SiteTitle">
                        <a href="@Url.Action("Index", "App")" title="Home">
                            <img style="max-width:100px; max-height: 100px; margin-top: 5px"
                                 src="~/img/@ViewBag.Logo">
                        </a>
                    </div>
                    <div class="navbar-collapse collapse navbar-text">
                        <h3 class="title">@ViewBag.Title</h3>
                        <h5 class="subtitle">@ViewBag.SubTitle</h5>
                    </div>
                    <!-- Logout Box -->
                    <div class="pull-right">
                        @await Component.InvokeAsync("Logout")
                    </div>
                </div>
            </div>
        </div>
        <!-- content -->
        <div id="maincontent" data-role="content">
            @RenderBody()
        </div>

        <footer id="pagefooter" data-id="persistent" data-position="fixed">
            <div class="navbar navbar-inverse navbar-fixed-bottom">
                <div class="container-fluid">
                    <div class="navbar-collapse collapse" id="footer-body">
                        <ul class="nav navbar-nav">
                            <li><a data-transition="slide" href="@Url.Action("MyDetails", "App")"><img src="~/img/icons/myrecord.png" />My Record</a></li>
                            <li><a data-transition="slide" href="@Url.Action("MyTeam", "App")"><img src="~/img/icons/myteam.png" />Team Headcount</a></li>
                            <li><a data-transition="slide" href="@Url.Action("Holidays", "App")"><img src="~/img/icons/holidays.png" />My Holidays</a></li>
                            <li><a data-transition="slide" href="@Url.Action("Payslips", "App")"> <img src="~/img/icons/payslips.png" />Payslip</a></li>
                            <li><a data-transition="slide" href="@Url.Action("Tasks", "App")"><img src="~/img/icons/tasks.png" />Tasks</a></li>
                            <li><a data-transition="slide" href="@Url.Action("Requests", "App")"><img src="~/img/icons/authorise.png" />Requests</a></li>
                        </ul>
                    </div>
                    @*<div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#footer-body">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <ul class="footer-bar-btns visible-xs">
                            <li><a href="#" class="btn" title="History"><i class="fa fa-2x fa-clock-o blue-text">Link 1</i></a></li>
                            <li><a href="#" class="btn" title="Favourites"><i class="fa fa-2x fa-star yellow-text">Link 2</i></a></li>
                            <li><a href="#" class="btn" title="Subscriptions"><i class="fa fa-2x fa-rss-square orange-text">Link 3</i></a></li>
                        </ul>
                    </div>*@
                </div>
            </div>
        </footer>
    </div>

    <!-- overriding customer styles -->
    <link href="~/styles/customstyles.css" rel="stylesheet" />
    <script src="~/app.js"></script>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

最终管理用CSS对此进行排序。

知道顶部和底部菜单栏的高度意味着我可以设置如下:

Sub AddRow()
Dim c, d As Range
Set rng = ActiveSheet.Range("A1:A100")
Set rng2 = Worksheets("Sheet2").Range("A1:A100")
For dblCounter = rng.Cells.Count To 1 Step -1
    Set c = rng(dblCounter)
   If c.Value Like "XXXXXX" Then
        c.EntireRow.Insert
        For dblCounter2 = rng2.Cells.Count To 1 Step -1
        Set d = rng2(dblCounter2)
        If d.Value Like "YYYYYY" Then
        d.EntireRow.Insert
        End If
        Next dblCounter2
    End If
Next dblCounter
End Sub

现在没有重叠,我可以在浏览器中自由调试我的网站,它在任何设置上看起来都是正确的。