このフィドルで[LiPoint1]を無効にするをクリックすると、テキストが灰色で表示されますhttp://jsfiddle.net/adrianjsfiddlenetuser/Q9sHz/14/
要素の元のスタイルを維持できますか(グレー表示されません)?
このフィドルで[LiPoint1]を無効にするをクリックすると、テキストが灰色で表示されますhttp://jsfiddle.net/adrianjsfiddlenetuser/Q9sHz/14/
要素の元のスタイルを維持できますか(グレー表示されません)?
3つのオプションがあります。のjquery-ui.cssからスタイルを削除するか.ui-state-disabled
、独自のカスタムスタイルシートでスタイルをオーバーライドするか、変更されたプロパティに。のフラグを付けることができます!important
。
スタイルを削除する
スタイルを削除するには、ルールを編集jquery-ui.css
して探す必要があります(jQuery 1.7.2では、262行目にあります)。.ui-state-disabled
そこにあるすべてのスタイルを削除します(3、、、、opacity
およびfilter
が表示されbackground-image
ます。
これの欠点は、jQueryを更新して、それに合わせて新しいCSSファイルを取得すると、編集内容が失われることです。
独自のスタイルシートを追加する
無効な要素の独自のルールを追加.ui-state-disabled
したり、スタイルを変更したりできます。ui-state-disabled
は無効になっているjQueryのすべてに使用されるため、ルールを専用として定義するか、クラスを設定してそのスタイルを具体的に定義することをお勧めしli
ますul
。
<ul class=".noStyleDisableDrag">
...
</ul>
.noStyleDisableDrag .ui-state-disabled {
opacity: 1;
filter: none;
background-image: inherit;
}
!importantとしてフラグを立てます
また、不透明度、フィルター、背景画像のスタイルを、特定のアイテムの表示方法を定義する他のルールに追加して、!important
フラグを使用することもできます。フラグを立てたことを忘れるとCSSスタイルのデバッグに大混乱をもたらす可能性があるため、これは最も推奨される方法ではありませんが、オプションです。これを行うには、次のようにスタイルを設定しますli
。
li {
opacity: 1 !important;
filter: none !important;
background-image: (whatever you want, or none) !important;
}
この場合、ドラッグ可能な画像に背景画像を設定していない場合は、背景画像を設定するための線は必要ありません。設定するだけopacity
で、filter
オーバーライドされなくなります。また、これらはJavaScriptでオーバーライドできるため、固定されていないことにも注意してください。
3つのうち、組み合わせを使用する必要がある場合があります。opacity
私の提案は、独自のカスタムスタイルシートを使用してとfilter
プロパティをオーバーライドすることです。背景画像を使用している場合は、ルール!important
によって削除されないようにするために使用する必要がある場合があります。ui-state-disabled
ただし、!important
フラグはできるだけ控えめに使用してください。
行262jquery-ui.cssは、フィルターと不透明度の行を削除します
.ui-state-disabled, .ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
background-image: none;
}
無効化ボタンをクリックすると、CSSクラスui-state-disabled
が要素に追加されます。そのクラスのスタイルを上書きするだけです。
.ui-state-disabled { opacity:1; }