SQLの窓

2015年06月25日


jQuery の css メソッドの引数に、$.get で外部から取得した値をセットして表示を変更する( JSON を Google ドライブに置いて使います )

jQuery の css メソッドは、文字列を一つのペアで渡すか、オブジェクトの内部を css のプロパティと一致させて複数の指定を一度に処理できます。ですから、その部分の定義を JSON 文字列で外部に保存しておいて、$.get で取得して利用するという運用が可能です。
{
    "background-color": "pink",
    "color": "red",
    "padding": "10px",
    "border": "solid 1px #000000",
    "border-radius": "8px"
}

その際、ページと違ったドメインにファイルを置く場合、そのままではセキュリティエラーになる為、参照されるドメイン側で、『access-control-allow-origin:*』を返す必要がありますが、Google ドライブにWEBページを作成する方法 でファイルを置いておけば、もともとそのような設定になっているのですぐ使う事ができます。

 

『Google ドライブ内の css.json』

※ Drive Notepad等の編集アプリで作成して変更する運用が必要になるので注意して下さい


▼ 実際に読み込んで実行しています



$.get は、このサンプルの使い方の場合、【第三引数 ※説明ありにデータの種類を指定できますが、Google ドライブに正しく保存して公開すると、『content-type:application/json』となるのでこの場合は指定する必要がありません。
<style>
.entry input {
    background-color: white;
    color: black;
    padding: 2px;
    border: solid 1px #dddddd;
    border-radius: 0px;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function(){

	$("#button").click(function(){
			$.get("https://96c122600b0451b70cd6e48fcec8f876331f788b.googledrive.com/host/0B9Jymqpro6gSflBRZktqSVRqaHA3M2R1S1lIb05NdGNNckFENXJmbGRkX3hsRnZOR1laTG8/css.json", function(data){
			$(".entry input").css( data );
			
		});
	});

	$("#button_reset").click(function(){
		$.get("https://96c122600b0451b70cd6e48fcec8f876331f788b.googledrive.com/host/0B9Jymqpro6gSflBRZktqSVRqaHA3M2R1S1lIb05NdGNNckFENXJmbGRkX3hsRnZOR1laTG8/css_default.json", function(data){
			$(".entry input").css( data );
			
		});
	});
});
</script>
<input type="button" value="CSS適用" id="button">

<form class="entry">
<input type="text" name="sei" id="sei" value="山田"><br>
<input type="text" name="mei" id="mei" value="太郎"><br>
<input type="text" name="simei" id="simei"><br>
</form>

<input type="button" value="解除" id="button_reset">
オンライン実行



タグ:AJAX jquery
posted by lightbox at 2015-06-25 15:17 | Ajax:jQuery | このブログの読者になる | 更新情報をチェックする
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり