FitText 和 FastClick 不适用于 jQuery Mobile 多页面布局答案

【问题标题】：FitText and FastClick wont work on jQuery Mobile multi page layoutFitText 和 FastClick 不适用于 jQuery Mobile 多页面布局
【发布时间】：2013-04-02 01:29:40
【问题描述】：

我的问题是我正在使用 FitText 和 FastClick jQuery 插件，当我在多个 .html 表上拥有所有内容时，它们都可以正常工作。但是当我在 jQuery Mobile 的多页模板中设置它们时，所有内容都在一个 HTML 文件中，插件在第 2 页之后就无法工作。所有其他 JS 和 CSS 都可以正常工作，只是不是这 2 个插件；虽然重新调整窗口大小将使 FitText 工作。就像它一开始没有读取窗口大小一样。

【问题讨论】：

标签： jquery jquery-mobile jquery-plugins

【解决方案1】：

你试过jQuery mobile 内置的'vclick' 300ms delay committing feature。通过使用它，您可以省略使用 FastClick。因为 fastclick 通过消除 300ms 延迟来做同样的事情。您对 Jquery mobile 和 FitText 没有任何问题。因此，一起使用“vclick”和 FitText 不会有任何问题。你不必面对很多麻烦。这是一个例子。

$("#element").bind('vclick', function(event) {
   decrementInput(this.id);event.preventDefault();
});

【讨论】：

【解决方案2】：

好吧，这可以为 fitText 解决问题：

$(document).on('pageshow', function () {
    $("h1").fitText(0.273);
    $(".download").fitText(1);
    /* or put whatever you want to fit in here */
});

工作 jsfiddle 示例 here.

【讨论】：

【解决方案3】：

页面头部引用的脚本和样式在通过 Ajax 加载页面时不会产生任何影响，多页面页面模板就是这种情况，但如果通过 HTTP 正常请求页面，它们将执行。

在编写 jQuery Mobile 网站脚本时，需要考虑这两种情况。通过 Ajax 请求时忽略页面头部的原因是重新执行相同 JavaScript 的可能性非常高（在站点的每个页面中引用相同的脚本很常见）。

由于尝试解决该问题的复杂性，执行特定页面脚本的任务留给个人，并假设每个浏览会话只执行一次头部脚本。

解决方法是每次页面显示时调用插件。值得注意的是，在每个页面调用插件时都必须给出一个新的 ID 或类。即 $('#FittetxtA')。对于第一页，$('#FittetxtB') 对于第二页，依此类推。下面的方法是我用于缩放插件并按预期工作的方法。如果没有每个页面的“pageshow”功能，我无法放大任何页面，只能放大第一页。

例子

<script>
            $( '#page1' ).on( 'pageshow',function(event){

             /// call to pluggings /// 

             $("#Fit_a").fitText(1.2, { minFontSize: '20px', maxFontSize: '40px' });

             FastClick.attach(document.body);

            });

             $( '#page2' ).on( 'pageshow',function(event){

             /// call to pluggings ///

             $("#Fit_b").fitText(1.2, { minFontSize: '20px', maxFontSize: '40px' });

             FastClick.attach(document.body);

            });

             $( '#page3' ).on( 'pageshow',function(event){

             /// call to plugging ///

            $("#Fit_c").fitText(1.2, { minFontSize: '20px', maxFontSize: '40px' });

            FastClick.attach(document.body);

            });

             /// etc ///
        </script>

我不能 100% 确定这是调用 Fast click 的最佳方式，因为当我查看 Github 页面时，我没有看到很多关于调用此插件的不同示例

【讨论】：