1. ホーム
  2. 質問と答え
  3. ブートストラップAsp.net RadioButtonホバースタイリング

ブートストラップAsp.net RadioButtonホバースタイリング

2017-06-14 14 views

答えて

0

スタイルと外観にcssファイルのペアを使用しています

jQWidgets提供してください - 。jqx.base.cssとJQXを[テーマ名]の.cssを。基本スタイルシートは、margin、padding、border-width、positionのようなウィジェットのレイアウトに関連するスタイルを作成します。 2番目のCSSファイルは、ウィジェットの色と背景を適用します。 jqx.base.cssは、2番目のCSSファイルの前に含める必要があります。

以下は、jqxButtonsで使用されるCSSクラスのリストです。 jqxRadioButtonスタイル

jqx-widget - jqxRadioButtonウィジェットに適用されます。 jqx-radiobutton - jqxRadioButtonの外側のdiv要素に適用されます。 jqx-radiobutton-default - 状態がデフォルトの場合、チェックボックスに適用されます。 jqx-fill-state-normal - 状態がデフォルトの場合、チェックボックスに適用されます。 jqx-radiobutton-hover - マウスカーソルが上にあるときにチェックボックスに適用されます。 jqx-fill-state-hover - マウスカーソルが上にあるときにチェックボックスに適用されます。 jqx-radiobutton-disabledウィジェットが無効になっているときにチェックボックスを有効にします。 jqx-radiobutton-disabled-box - jqxRadioButtonが無効の場合、チェックボックスに適用されます。 jqx-radiobutton-check-checked - jqxRadioButtonがチェックされている場合、チェックボックスに適用されます。チェックサムアイコン jqx-radiobutton-check-disabled - jqxRadioButtonが無効の場合、チェックボックスに適用されます。無効なチェックアイコン jqx-radiobutton-check-indeterminate - jqxRadioButtonが不定状態の場合、チェックボックスに適用されます。チェックボックス内に四角形を表示します。 jqx-radiobutton-check-indeterminate-disabled - jqxradiobuttonが不確定状態で、jqxRadioButtonが無効の場合、チェックボックスに適用されます。チェックボックスの中に灰色の（無効な）矩形を表示します。 jqx-fill-state-disabled - jqxRadioButtonが無効になっているときに適用されます。 jqx-fill-state-focus - フォーカスされているときにjqxRadioButtonに適用されます。 jqxRadioButtonの色と背景でカスタムスタイルを作成する場合は、次の手順を実行する必要があります。 jqxRadioButtonに関連する上記のCSSクラスを追加します。 各CSSクラスの後にテーマ名を追加します。 例： jqx-radiobutton-summer カスタムスタイルをjqxRadioButtonに適用するには、テーマ名文字列を指すように 'theme'プロパティ（オプション）を設定する必要があります。

$("#jqxradiobutton").jqxRadioButton({ theme: 'summer', width: 120, height: 25 });

以下のサンプルは、 'Summer'テーマをjqxRadioButtonに設定する方法を示しています。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title id='Description'>jQuery Radio Button CSS Styling Sample</title> 
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> 
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.summer.css" type="text/css" /> 
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxradiobutton.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      // create jqxRadioButton. 
      $("#jqxradiobutton1").jqxRadioButton({theme: 'summer', width: 120, height: 25 }); 
      $("#jqxradiobutton2").jqxRadioButton({ theme: 'summer', width: 120, height: 25 }); 
     }); 
    </script> 
</head> 
<body class='default'> 
    <div id='jqxradiobutton1'> 
     Radio Button 1</div> 
    <div id='jqxradiobutton2'> 
     Radio Button 2</div> 
</body> 
</html>

Hover effect like this

jQueryの以下の例を参照して使用this link for further details

出典

2017-06-20 07:20:19

関連する問題

 関連する問題