同じタイプの複数のjPickerインスタンスを同じWebページに表示するのに問題があります。サンプルコードは次のとおりです。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jpicker-1.1.6/jpicker-1.1.6.min.js"></script>
<link href="js/jpicker-1.1.6/css/jPicker-1.1.6.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="testArea">
<script type="text/javascript">
$(document).ready(function() {
$('#Expandable').jPicker( {
window: {
expandable: true,
alphaSupport: true,
position: {
x: '40px',
y: '0px'
}
},
images: {
clientPath: "js/jpicker-1.1.6/images/"
}
});
});
</script>
<div id="colorSelectors">
<input type="checkbox" value="Hamburgers" checked="yes" /> Hamburgers
<span id="Expandable"></span> <br />
<input type="checkbox" value="Hot Dogs" checked="yes" /> Hot Dogs
<span id="Expandable"></span> <br />
</div>
</div>
</body>
</html>
これが私が得ているものです:
私にとって奇妙なのは、異なるタイプのjPickersを使用する場合、同じページに複数のインスタンスを含めることができますが、各タイプのインスタンスは1つだけであるということです。たとえば、同じページで「拡張可能」ピッカーと「インライン」ピッカーを使用できますが、同じページで2つの「インライン」ピッカーを使用することはできません。
唯一の例外は、jPicker Webサイト<input>
の例のように、jPickerが要素にバインドされているときに複数のインスタンスを機能させることができることです。しかし、他のタイプのピッカーではこれを機能させることはできません。