0

jQuery UIにパーフェクトスクロールバープラグイン(ブラウザーのデフォルトスクロールバーの代わりに美しいスクロールバーを提供する)を追加しようとしていますselectmenu

これがJSFIDDLEです

スクロールバーを開くとselectmenu、マウスをリストの一番下に近づけるまで (リストをホバーしても) 表示されません (つまり、selectmenu を初めて開いたときに、何も表示されていないように感じます)。スクロールバーがないため、他のアイテム)

どうすれば解決できますか？

HTML

<select name="number" id="number">
      <option>1</option>
      <option selected="selected">2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
      <option>7</option>
      <option>8</option>
      <option>9</option>
      <option>10</option>
      <option>11</option>
      <option>12</option>
      <option>13</option>
      <option>14</option>
      <option>15</option>
      <option>16</option>
      <option>17</option>
      <option>18</option>
      <option>19</option>
</select>

JS

$(function(){    
    $( "#number" ).selectmenu().selectmenu( "menuWidget" ).addClass( "overflow" ).perfectScrollbar();
});

CSS

#number{
    width: 220px;
}
.overflow{
    height: 200px;
    position: relative;
}
4

1 に答える 1

0

私の質問への答えは次のとおりです。パーフェクトスクロールバーを適用する要素には明示的な高さ（100％または400pxなど）が必要であることがわかったので、それで問題ありません。高さをリストに追加するクラスオーバーフローをすでに追加しました

$( "#number" ).selectmenu().selectmenu( "menuWidget" ).addClass( "overflow" )

次に、perfectScrollbar()そのリストに関数を適用しましたが、まだ非表示であり、それが問題です

要素が非表示の場合、jQuery は要素の高さを計算できません(高さのCSS プロパティが設定されていても) 。

したがって、jQuery ui selectmenu のドキュメントを見た後、リストが開かれたときに何かを行うために使用できるopenイベントを見つけることができました

$( "#number" ).selectmenu({
    open: function( event, ui ) {
      $( "#number" ).selectmenu( "menuWidget" ).addClass( "overflow" ).perfectScrollbar();
    }
})

コードが行うことは単純ですperfectScroll()。リストが開かれ、jQuery が高さを読み取ることができるようになった後にのみメソッドを適用します。

これが同じ状況の誰かに役立つことを願っています。

于 2015-07-10T13:26:18.327 に答える