「Knockout.js/cssバインディング」の版間の差分
imported>Administrator |
imported>Administrator |
||
| (同じ利用者による、間の3版が非表示) | |||
| 1行目: | 1行目: | ||
[[Knockout]]の'''cssバインディング'''とは、パラメーターの値に応じ、関連付けられた[[DOM]] | [[Knockout.js]]の'''cssバインディング'''とは、パラメーターの値に応じ、関連付けられた[[DOM]]要素のCSSクラスを追加または削除する[[Knockout.js/可視バインディング|可視バインディング]]のひとつである。 | ||
なお、CSSクラス単位ではなく、style属性の個別の値のみを書き換えたい場合には[[Knockout.js/styleバインディング|styleバインディング]]を使うとよい。 | |||
== パラメーター == | == パラメーター == | ||
cssバインディングの基本的な書式は以下のとおりである。 | |||
<source lang="html5"> | <source lang="html5"> | ||
<div data-bind="css: { CSSクラス名: 値または式 }">...</div> | <div data-bind="css: { CSSクラス名: 値または式 }">...</div> | ||
</source> | </source> | ||
cssバインディングはカンマ区切りで複数指定もできる。 | |||
<source lang="html5"> | <source lang="html5"> | ||
<div data-bind="css: { CSSクラス名: 値または式, CSSクラス名: 値または式, ... }">...</div> | <div data-bind="css: { CSSクラス名: 値または式, CSSクラス名: 値または式, ... }">...</div> | ||
| 27行目: | 27行目: | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
jQuery(function() { | jQuery(function() { | ||
// | // ビューモデル | ||
var AppViewModel = function() { | var AppViewModel = function() { | ||
this.valueA = ko.observable(90); | this.valueA = ko.observable(90); | ||
| 51行目: | 51行目: | ||
== 関連項目 == | == 関連項目 == | ||
* [[Knockout]] | * [[Knockout.js]] | ||
** [[Knockout.js/可視バインディング|可視バインディング]] | |||
== 参考文献 == | == 参考文献 == | ||
<references/> | <references/> | ||