Fatal编程技术网
  • jquery-mobile/
  • Jquery mobile 某些IE中的RangeSloider渲染不好（JQueryMobile 1.3.1）

Jquery mobile 某些IE中的RangeSloider渲染不好（JQueryMobile 1.3.1）

jquery-mobile

Jquery mobile 某些IE中的RangeSloider渲染不好（JQueryMobile 1.3.1）,jquery-mobile,Jquery Mobile,这是非常基本的一页： 在“某些”IE版本中无法正确渲染 <!DOCTYPE HTML> <html> <head><title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3

这是非常基本的一页： 在“某些”IE版本中无法正确渲染

<!DOCTYPE HTML>
<html>
<head><title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-    1.3.1.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.js"></script>
</head>
<body>
<div id="A" name="A">
 <div data-role="rangeslider">
    <label for="B">Range</label>
    <input type="range" name="B" id="B" min="0" max="100">
    <label for="C">Range</label>
    <input type="range" name="C" id="C" min="0" max="100">
 </div>
</div>
</body>
</html>
出现SCRIPT5007错误（“无法获取属性“slider”的值：对象为null或未定义。”）

我使用IE10进行调试，并测试了浏览器模式（BM）和文档模式（DM）的一些组合，以检查错误的组合。希望这有助于：

BM=IE10 DM=标准[正常]
BM=IE9 DM=标准[正常]
BM=IE8 DM=标准[正常]
BM=IE7 DM=标准[正常]
BM=IE10 DM=非标准[正常]
BM=IE9 DM=非标准[正常]
BM=IE8 DM=非标准[正常]
BM=IE7 DM=非标准[正常]
BM=IE10 DM=标准IE9[错误]
BM=IE9 DM=标准IE9[错误]
BM=IE8 DM=标准IE9[错误]
BM=IE7 DM=标准IE9[错误]
BM=IE10 DM=标准IE8[错误]
BM=IE9 DM=标准IE8[错误]
BM=IE8 DM=标准IE8[错误]
BM=IE7 DM=标准IE8[错误]
BM=IE10 DM=标准IE7[错误]
BM=IE9 DM=标准IE7[错误]
BM=IE8 DM=标准IE7[错误]
BM=IE7 DM=标准IE7[错误]

我还尝试用IE8调试它，它正确地呈现了页面。
提前感谢您的建议。

这与针对jQuery Mobile 1.3.0的另一个问题类似

我已经能够在IE10（包括WP8）和Chrome 28的jQuery Mobile v1.3.2中重现这个问题

在对JQM组合JS文件进行了一点挖掘之后，我发现有几个地方的逻辑在调用类似
$.data（_inputFirst.get（0），“mobileSlider”）.slider的东西。如果你进入调用堆栈，你会发现在某一点它检查一个变量是否未定义，如果是，它就会转置键（
“mobileSlider”）
）将其移动到camel case并再次检查。在本例中，原始键是驼峰大小写，如果它全部是小写加连字符（
“移动滑块”
），则不会失败

为了在JQM v1.3.2中纠正这个问题，我将
的“mobileSlider”
实例替换为
的“mobilesslider”
，现在我又有了预期的行为和工作滑块以及范围滑块

以下是我进行上述更改的行和行号


  • jquery.mobile-1.3.1.js（7861）：\u sliderFirst=$.data（\u inputFirst.get（0），“mobileSlider”）。slider
    • 

  • jquery.mobile-1.3.1.js（7862）：\u sliderLast=$.data（\u inputLast.get（0），“mobileSlider”）。slider
    • 

  • jquery.mobile-1.3.1.js（7863）：firstHandle=$.data（_inputFirst.get（0），“mobileSlider”）.handle
    • 

  • jquery.mobile-1.3.1.js（7919）：$.data（this.\u inputFirst.get（0），“mobileSlider”）。拖动=true

  • jquery.mobile-1.3.1.js（7920）：$.data（this.\u inputFirst.get（0），“mobileSlider”）。刷新（事件）

  • jquery.mobile-1.3.1.js（7932）：$.data（otherSlider.get（0），“mobileSlider”。拖动=true

  • jquery.mobile-1.3.1.js（7933）：$.data（otherSlider.get（0），“mobileSlider”）。刷新（事件）

  • jquery.mobile-1.3.1.js（8006）：$.data（otherSlider.get（0），“mobileSlider”）.handle.focus（）

  • jquery.mobile-1.3.1.js（8014）：$.data（thislider.get（0），“mobileSlider”）.handle.css（“z-index”，1）

  • jquery.mobile-1.3.1.js（8015）：$.data（otherSlider.get（0），“mobileSlider”）.handle.css（“z-index”，0）

  • jquery.mobile-1.3.1.js（8017）：$.data（otherSlider.get（0），“mobileSlider”）.handle.css（“z-index”，”）

  • jquery.mobile-1.3.1.js（8018）：$.data（thislider.get（0），“mobileSlider”）.handle.css（“z-index”，”）

  • jquery.mobile-1.3.1.js（8029）：var min=parseInt（$.data（this.\u inputFirst.get（0），“mobileSlider”）.handle.get（0）.style.left，10）
    • 

  • jquery.mobile-1.3.1.js（8030）：max=parseInt（$.data（this.\u inputLast.get（0），“mobileSlider”）.handle.get（0）.style.left，10）
    • 

    这与针对jQuery Mobile 1.3.0“”提出的另一个问题类似
    
我已经能够在IE10（包括WP8）和Chrome 28的jQuery Mobile v1.3.2中重现这个问题
    
在对JQM组合JS文件进行了一点挖掘之后，我发现有几个地方的逻辑在调用类似
    $.data（_inputFirst.get（0），“mobileSlider”）.slider的东西。如果你进入调用堆栈，你会发现在某一点它检查一个变量是否未定义，如果是，它就会转置键（
    “mobileSlider”）
    ）将其移动到camel case并再次检查。在本例中，原始键是驼峰大小写，如果它全部是小写加连字符（
    “移动滑块”
    ），则不会失败
    
为了在JQM v1.3.2中纠正这个问题，我将
    的“mobileSlider”
    实例替换为
    的“mobilesslider”
    ，现在我又有了预期的行为和工作滑块以及范围滑块
    
以下是我进行上述更改的行和行号
    

  • jquery.mobile-1.3.1.js（7861）：\u sliderFirst=$.data（\u inputFirst.get（0），“mobileSlider”）。slider
    • 

  • jquery.mobile-1.3.1.js（7862）：\u sliderLast=$.data（\u inputLast.get（0），“mobileSlider”）。slider
    • 

  • jquery.mobile-1.3.1.js（7863）：firstHandle=$.data（_inputFirst.get（0），“mobileSlider”）.handle
    • 

  • jquery.mobile-1.3.1.js（7919）：$.data（this.\u inputFirst.get（0），“mobileSlider”）。拖动=true

  • jquery.mobile-1.3.1.js（7920）：$.data（this.\u inputFirst.get（0），“mobileSlider”）。刷新（事件）

  • jquery.mobile-1.3.1.js（7932）：$.data（otherSlider.get（0），“mobileSlider”）。

    _sliderFirst = $.data( _inputFirst.get(0), "mobileSlider" ).slider,

    

    <input type="range" data-type="range" name="B" id="B" min="0" max="100">

    														
    •