Question

我正在尝试在我的页面中打开一个jQuery DateBox弹出框，它会修改窗口的哈希值，以便后面的浏览器按钮关闭弹出窗口，而不是转到浏览器历史记录中的上一个网站。

<div data-role="page" id="base-layout">
    <div data-role="content" id="my-content-layout">
        <div id="divDesde">
            <label for="divDesde" style="text-align: left;">From Date:</label>
            <input data-theme="c" name="fechaDesde" id="fechaDesde" type="text" data-role="datebox" data-options='{"enablePopup": true, "useNewStyle":true, "centerHoriz": true, "centerVert": true, "mode":"datebox", "overrideDateFormat": "%d/%m/%Y"}' value="" class="required" required="required" />
        </div>
        <div id="divHasta" class="desdeHastaDiv">
            <label for="fechaHasta" style="text-align: left;">To Date:</label>
            <input data-theme="c" name="fechaHasta" id="fechaHasta" type="text" data-role="datebox" data-options='{"enablePopup": true,"useNewStyle":true, "centerHoriz": true, "centerVert": true, "mode":"datebox", "overrideDateFormat": "%d/%m/%Y"}' value="" />
        </div>
    </div>
</div>
<script>
    $(document).on("pageinit", "#base-layout", function() {

        $('#fechaHasta').on('datebox', function(e, p) {
            if (p.method === 'open') {
                window.location.hash = "#fechaHasta";
            }
            if (p.method === 'close') {
                window.location.hash = '';
            }

        });
        $('#fechaDesde').on('datebox', function(e, p) {
            if (p.method === 'open') {
                window.location.hash = "#fechaDesde";
            }
            if (p.method === 'close') {
                window.location.hash = ''
            }

        });
    });
</script>

问题是 - 修改哈希似乎以某种方式搞砸了弹出窗口，并且在你第一次点击时它没有打开。实际上它会打开，但一旦附加了哈希就会自动关闭。

我创造了一个小提琴here虽然我看不到哈希;我猜它没有被显示，因为页面上有jsFiddle图层。您可以单击浏览器以关闭弹出窗口。如果您点击输入上的日历图标，则第一次没有显示，如果您再次单击它，则为。

Answer 1

Jquery mobile的内部导航模型使用哈希来跟踪页面状态。它会监听散列更改事件，当您自己更新散列时，它会将其作为页面更改，并以某种方式决定关闭您的日期框。您可以在“Hash和Ajax驱动的页面导航”here

下阅读相关内容

幸运的是，解决方案非常简单。只需从代码中删除所有哈希更新部分即可。由于jquery mobile本身在您点击日历时会添加哈希值，因此当您单击浏览器后退按钮时，您可以指望它关闭日期框。

- 编辑 -

好的，用以下代码替换脚本似乎正在运行。我在我的机器上检查了它。

    $(document).on("pageinit", "#base-layout", function() {

        $('#fechaHasta').on('vmousedown', function() { 
                    window.location.hash = "fechaHasta";
        });

        $('#fechaDesde').on('vmousedown', function() { 
                    window.location.hash = "fechaHasta";
        });

        $('#fechaHasta').on('datebox', function(e, p) { 
            if ( p.method === 'close' ) {
               window.location.hash = ''
            }
        });

        $('#fechaDesde').on('datebox', function(e, p) {
            if ( p.method === 'close' ) {
               window.location.hash = ''
            }
        });
});

当您在“vmousedown”事件上添加哈希时，日历尚未打开，并且jquery mobile在此时无法关闭，因此您可以将其视为快速而肮脏的黑客攻击。 / p>

将URL添加到URL时，JQueryMobile弹出窗口未显示

1 个答案: