このフィドルで[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; }