Question

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

Answer 1

您是否曾尝试使用jQuery mobile＆＃39; vclick＆＃39; 300ms delay committing feature。通过使用此功能，您可以省略使用FastClick。因为fastclick通过消除300ms延迟来做同样的事情。你对Jquery mobile和FitText没有任何问题。因此，使用＆＃39; vclick＆＃39;以后您不会遇到任何问题。和FitText在一起。你不必面对很多麻烦。这是一个例子。

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

Answer 2

嗯，这可以为fitText提供技巧：

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

工作jsfiddle示例here。

Answer 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％确定这是调用快速点击的最佳方式，因为我在检查Github页面时没有看到调用此插件的许多不同示例

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

3 个答案: