Knockout.js/cssバインディング - 版の履歴

imported>Administrator: /* 使用例 */

2012-04-20T08:11:22Z

使用例

← 古い版		2012年4月20日 (金) 08:11時点における版
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);

imported>Administrator: Knockout/cssバインディングをKnockout.js/cssバインディングへ移動

2012-04-11T16:22:24Z

Knockout/cssバインディングをKnockout.js/cssバインディングへ移動

← 古い版	2012年4月11日 (水) 16:22時点における版
(相違点なし)

2012年4月11日 (水) 16:22にimported>Administratorによる

2012-04-11T16:22:09Z

← 古い版		2012年4月11日 (水) 16:22時点における版
1行目:		1行目:
	[[Knockout]]の'''cssバインディング'''とは、パラメーターの値に応じ、関連付けられた[[DOM]]要素のCSSクラスを追加または削除する[[Knockout/可視バインディング\|可視バインディング]]のひとつである。		[[Knockout.js]]の'''cssバインディング'''とは、パラメーターの値に応じ、関連付けられた[[DOM]]要素のCSSクラスを追加または削除する[[Knockout.js/可視バインディング\|可視バインディング]]のひとつである。

	なお、CSSクラス単位ではなく、style属性の個別の値のみを書き換えたい場合には[[Knockout/styleバインディング\|styleバインディング]]を使うとよい。		なお、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>
51行目:		51行目:

	== 関連項目 ==		== 関連項目 ==
	* [[Knockout]]		* [[Knockout.js]]
	** [[Knockout/可視バインディング\|可視バインディング]]		** [[Knockout.js/可視バインディング\|可視バインディング]]

	== 参考文献 ==		== 参考文献 ==

2012年4月11日 (水) 08:35にimported>Administratorによる

2012-04-11T08:35:26Z

← 古い版		2012年4月11日 (水) 08:35時点における版
1行目:		1行目:
	[[Knockout]]の'''cssバインディング'''とは、パラメーターの値に応じ、関連付けられた[[DOM]]~~要素のCSSクラスを、追加または削除するバインディングのことである。~~		[[Knockout]]の'''cssバインディング'''とは、パラメーターの値に応じ、関連付けられた[[DOM]]要素のCSSクラスを追加または削除する[[Knockout/可視バインディング\|可視バインディング]]のひとつである。

	~~なお、CSSクラス単位ではなく、style属性の値を書き換えたい場合には~~[[Knockout/styleバインディング\|styleバインディング]]~~を使う。~~		なお、CSSクラス単位ではなく、style属性の個別の値のみを書き換えたい場合には[[Knockout/styleバインディング\|styleバインディング]]を使うとよい。

	== パラメーター ==		== パラメーター ==
52行目:		52行目:
	== 関連項目 ==		== 関連項目 ==
	* [[Knockout]]		* [[Knockout]]
			** [[Knockout/可視バインディング\|可視バインディング]]

	== 参考文献 ==		== 参考文献 ==
	<references/>		<references/>

imported>Administrator: /* パラメーター */

2012-04-10T16:15:53Z

パラメーター

← 古い版		2012年4月10日 (火) 16:15時点における版
6行目:		6行目:
	基本的な書式は以下のとおりである。		基本的な書式は以下のとおりである。
	<source lang="html5">		<source lang="html5">
	<div data-bind="css: { CSSクラス名: ~~パラメーター値または式~~ }">...</div>		<div data-bind="css: { CSSクラス名: 値または式 }">...</div>
	</source>		</source>
	~~パラメーターの値または式の結果が、trueならばCSSクラスが追加され、falseならばCSSクラスが削除される。~~		カンマ区切りで複数指定もできる。
			<source lang="html5">
			<div data-bind="css: { CSSクラス名: 値または式, CSSクラス名: 値または式, ... }">...</div>
			</source>

			値または式の結果が、trueならばDOM要素（HTMLタグ）のclass属性にCSSクラスが追加され、falseならばDOM要素（HTMLタグ）のclass属性からCSSクラスが削除される。
	なお、式を指定する場合の「式」とは[[JavaScript]]そのものなので関数なども使いたい放題である。		なお、式を指定する場合の「式」とは[[JavaScript]]そのものなので関数なども使いたい放題である。

imported>Administrator: Knockout/cssをKnockout/cssバインディングへ移動

2012-04-10T16:12:23Z

Knockout/cssをKnockout/cssバインディングへ移動

← 古い版	2012年4月10日 (火) 16:12時点における版
(相違点なし)

2012年4月10日 (火) 16:11にimported>Administratorによる

2012-04-10T16:11:53Z

← 古い版		2012年4月10日 (火) 16:11時点における版
4行目:		4行目:

	== パラメーター ==		== パラメーター ==
			基本的な書式は以下のとおりである。
			<source lang="html5">
			<div data-bind="css: { CSSクラス名: パラメーター値または式 }">...</div>
			</source>
			パラメーターの値または式の結果が、trueならばCSSクラスが追加され、falseならばCSSクラスが削除される。
			なお、式を指定する場合の「式」とは[[JavaScript]]そのものなので関数なども使いたい放題である。

	== 使用例 ==		== 使用例 ==
	~~=== hello world ===~~
	~~<source lang="html5">~~
	<source lang="html5">		<source lang="html5">
	<!DOCTYPE html>		<!DOCTYPE html>

imported>Administrator: ページの作成：「Knockoutの'''cssバインディング'''とは、パラメーターの値に応じ、関連付けられたDOM要素のCSSクラスを、追加または削除...」

2012-04-10T15:58:17Z

ページの作成：「Knockoutの'''cssバインディング'''とは、パラメーターの値に応じ、関連付けられたDOM要素のCSSクラスを、追加または削除...」

新規ページ

[[Knockout]]の'''cssバインディング'''とは、パラメーターの値に応じ、関連付けられた[[DOM]]要素のCSSクラスを、追加または削除するバインディングのことである。

なお、CSSクラス単位ではなく、style属性の値を書き換えたい場合には[[Knockout/styleバインディング|styleバインディング]]を使う。

== パラメーター ==

== 使用例 ==
=== hello world ===
<source lang="html5">
<source lang="html5">
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>knockout.js - html bindding sample 1</title>
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="knockout-2.0.0.js"></script>
<script type="text/javascript">
jQuery(function() {
// モデル
var AppViewModel = function() {
this.valueA = ko.observable(90);
this.valueB = ko.observable(20);
}
// バインディング適用
ko.applyBindings(new AppViewModel());
});
</script>
<style>
.AAA { color: #0000FF; background-color: #FFFF00; }
.BBB { color: #FF0000; background-color: #00FFFF; }
</style>
</head>
<body>

<p data-bind="css: { AAA: valueA() > 70, BBB: valueA() < 30 }">Aさん</p>
<p data-bind="css: { AAA: valueB() > 70, BBB: valueB() < 30 }">Bさん</p>

</body>
</html>
</source>

== 関連項目 ==
* [[Knockout]]
== 参考文献 ==
<references/>
== 外部リンク ==

{{stub}}