jQuery、JSONの結合方法

このQ&Aのポイント
  • jQuery.fn.hogeを使用して、JSONオブジェクトを結合する方法について説明します。
  • extend関数を使用して、デフォルトの設定とユーザーが指定したオプションを結合します。
  • CSSプロパティを含むJSONオブジェクトを結合する際に注意が必要です。
回答を見る
  • ベストアンサー

jQuery、JSONの結合方法

いつもお世話になります。 jQuery.fn.hoge = function(options) { var defaults = { 'val1':'1', 'val2':'2', 'Css':{ 'padding':'3px', 'margin':'2px', 'background-color':'red' } } などとして、 hoge( 'val2':'222', Css':{ 'padding':'10px' } ) var setting = $.extend(defaults,options); とすると、 settingが 'val1':'1', 'val2':'222', Css':{ 'padding':'10px' } となります。 ここで、 settingが 'val1':'1', 'val2':'222', Css':{ 'padding':'10px', 'margin':'2px', 'background-color':'red' } となるようにするにはどうしたらよいのでしょうか。 つまり、 'val2':'2', -> 'val2':'222', 'padding':'3px' -> 'padding':'10px'  と書き換えられるのは良いのですが、, Css':{ 'padding':'10px' } となってしまい 次の2つが削除されてしまうのは困るということです。 'margin':'2px', 'background-color':'red' よろしくお願いいたします。

質問者が選んだベストアンサー

  • ベストアンサー
  • my--
  • ベストアンサー率89% (91/102)
回答No.1

var setting = $.extend(true, defaults, options); jQuery.extendの第一引数にtrueを渡せば、深くプロパティを辿りコピーしてくれます。 jQuery.extend() http://api.jquery.com/jQuery.extend/

rqg2010
質問者

お礼

my--さん、今日は。 できました。 deepの意味がようやくわかりました。 どうもありがとうございます。

関連するQ&A

  • cssでタブの2段重ねの方法を教えてください

    当方、html、css初心者です。javascriptに関しては全くちんぷんかんぷんです。 http://xampp.utun.net/ このようなサンプルがあったのですが、これを改造して、 タブを縦2段でレイアウトしたいのですが、 方法を教えて頂けないでしょうか? CSSソース ----------------------------------------------------------------------- <style type="text/css"> /* ▼(A)表示領域全体 */ div.tabbox { margin: 0px; padding: 0px; width: 400px; } /* ▼(B)タブ部分 */ p.tabs { margin: 0px; padding: 0px; } p.tabs a { /* ▼(B-2)リンクをタブのように見せる */ display: block; width: 5em; float: left; margin: 0px 1px 0px 0px; padding: 3px; text-align: center; } /* ▼(B-3)各タブの配色 */ p.tabs a.tab1 {background-color: blue;color: #000;} p.tabs a.tab2 { background-color: #aaaa00; color:white;} p.tabs a.tab3 { background-color: red; color: white; } p.tabs a.tab4 { background-color: red; color: white;} background-color: #F00; color: white; } p.tabs a:hover { color: yellow; } /* ▼(C)タブ中身のボックス */ div.tab { /* ▼(C-2)ボックス共通の装飾 */ height: 150px; overflow: auto; clear: left; } /* ▼(C-3)各ボックスの配色 */ div#tab1 { border: 2px solid blue; background-color: #ccffff; } div#tab2 { border: 2px solid #aaaa00; background-color: #ffffcc; } div#tab3 { border: 2px solid red; background-color: #ffcccc; } div#tab4 { border: 2px solid red; background-color: #ffcccc; } div.tab p { margin: 0.5em; } </style> ----------------------------------------------------------------------------- 上記の通りです。 ご指導、ご鞭撻の程を宜しくお願いします。

    • 締切済み
    • CSS
  • CSSとページの軽量化

    CSSに記述するスタイルの量によってページの読み込み速度は変わりますか? <1> *{ margin:0px; padding:0px: } <2> *{ margin:0px; padding:0px: } body{ background-color:#000 } 例えばこの場合だと<1>の方が読み込みは早くなったりするのでしょうか?

    • ベストアンサー
    • CSS
  • cssハックについて質問です。

    IE6~IE8以外のcssハックが :root *> #help_me { color: red; } この様になっていたのですがどのように使えばいいのでしょうか。 現在適用しているcss .hoge { margin:15px 0 0 0; } このhogeにIEのみ margin:20px 0 0 0; にしたいのですが :root *> #help_me { color: red; } hogeに対するこれの使い方が全く分かりません。 使い方を教えて下さい。 もしくは、 #help_me { color: blue\9; } (※この場合はcolor:blueは分かるのですが9とは一体何でしょうか) こちらでも大丈夫です。 よろしくお願いします。

    • ベストアンサー
    • CSS
  • jQueryでCSSの値を動的に指定する方法

    自分なりに調べてみたのですが、理解不能なのでご教授お願いします。 $("#hoge").css("color","red"); ↑このように指定するとID"hoge"の文字色が赤になる、というCSSのアレンジで、 "red"の部分を動的に指定したいのですが、どのような指定をすれば実現するのでしょうか。 $(document).ready(function() { var test = "red"; $("#hoge").css("color",$test); }); ↑こういう書き方じゃ動きませんでした…。 こちらの質問が似ていたのでマネしてみたのですが、 私が希望する「CSSの値を動的に」はできませんでした。 jqueryのcssを動的指定する方法 http://okwave.jp/qa4268190.html .css()を使わなくても、結果的に同じ動作になる方法ってないものでしょうか? アドバイスを頂けたら助かります。 宜しくお願いいたします。

  • CSSでバックグラウントカラーの途切れを直したい

    CSS初心者です。 CSSでfloatを利用してプロックを左右に並べています。 その際、左のブロックにbackground-colorを指定していますが、右のブロックの情報が多かった場合に、background-colorが途中で終わってしまいます。 どのようにしたらよいでしょうか。 下記のCSSもおかいしところがあるかも・・・指摘をお願いします。 #page { width: 750px; margin-right: auto; margin-left: auto; text-align: left; border: 1px solid #666666; margin-bottom: 0px; } div.blocka{ float: left; background-color: #FFC556; width: 150px; margin:0px 0px 0px 0px; padding:5px ; border-right:1px solid #666666 ; } div.blockb { float: left; margin:0px 0px 0px 0px; padding:10px ; width: 550px; }

    • ベストアンサー
    • HTML
  • 直接書き込むCSSを外部ファイルに設定したい

    CSS初心者です。下記の携帯テンプレートを使ってサイトを作りたいです。 タグに直接書き込むタイプのCSSが多いのですが、 このソースの一部を外部ファイルに設定するには、どういう書き方をしたら良いでしょうか? 【外部に設定したい項目】 ★タイトル下線のMARGIN-RIGHT: 47% ★真ん中の線(画像位置)BACKGROUND-POSITION: 53% ★一番下線のMARGIN-LEFT: 53%; 外部にしたい理由は携帯とパソコンで見た時にそれぞれ線の位置を変えたいと思って いるからです。出来ますでしょうか?CSSに詳しい方、どうかお願いします(>_<) 【全タグ】 <html> <HEAD> <TITLE>TITLE</TITLE> </HEAD> タイトル <H1 style="PADDING-LEFT: 7px; MARGIN: 0px; PADDING-TOP: 10px; BACKGROUND-COLOR: #ffffff"></H1> <DIV style="BACKGROUND-POSITION: 53% 40%; BACKGROUND-IMAGE: url(http://deai.mokuren.ne.jp/up/src/up3891.gif); BACKGROUND-REPEAT: repeat-y"> <DIV style="BORDER-TOP: #000000 1px solid; MARGIN-RIGHT: 47%"> <P style="PADDING-RIGHT: 0px; PADDING-LEFT: 15px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 7px"></P></DIV> <DIV style="MARGIN-LEFT: 40%; PADDING-TOP: 17px"> <DIV style="WIDTH: 300px; MARGIN-RIGHT: 20px"> <H2 style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 13px; PADDING-BOTTOM: 2px; MARGIN: 0px 0px 3px; PADDING-TOP: 3px; BACKGROUND-COLOR: #000000"> <font color="#ffffff">コンテンツ</font></H2></font> <div style="border:solid 1px #000000;margin-bottom:5px; padding:5px;background-color:#ffffff;"><Font Color="#000000"><A Href="">小説</a></div> <div style="border:solid 1px #000000;margin-bottom:5px; padding:5px;background-color:#ffffff;"><Font Color="#000000"><A Href="">小説2</a></div> <div style="border:solid 1px #000000;margin-bottom:5px; padding:5px;background-color:#ffffff;"><Font Color="#000000"><A Href="">その他</a></div> </DIV></DIV> <DIV style="MARGIN-LEFT: 53%; BORDER-BOTTOM: #000000 1px solid"> <P style="PADDING-RIGHT: 5px; MARGIN: 0px; PADDING-TOP: 17px" align=right></DIV></DIV> <P style="PADDING-RIGHT: 5px; PADDING-LEFT: 0px; PADDING-BOTTOM: 10px; MARGIN: 0px; PADDING-TOP: 5px" align=right> </HTML>

    • 締切済み
    • CSS
  • 背景色をうまく使えない

    CSSを使ったページを試作しているのですが、背景色をうまく使えません。 「outline」の周り全部を赤の背景色にしたいのですが下記ページのようにしかなりません。どうしたら良いのでしょうか。 http://www.asahi-net.or.jp/~gc4t-iwt/taipei0801/1_19.html CSSソース @charset "Shift_JIS"; body { margin-left : 60px; color: black; background-image: url("b_bcg030.gif"); background-repeat: repeat-y; background-color: red; } #outline { background-color: lavender; width: 750px; text-align: left; border: 2px solid silver; padding: 5 5 5 5px; } h2 { padding-left: 100px; }

  • divタグ+CSSでのレイアウトで、Firefox, Operaで不必要な余白ができてしまいます。

    divタグ+CSSでレイアウトしようとしています。 横関係では全体がセンタリングされていて、縦関係においては、各ブロック要素間の余白がなくぴったりくっついている状態にしたいのですが、Firefox 1.0やOpera 8などを使ってレイアウトを確認すると、上下や要素間に余白が出来てしまい、なかなかうまくいきません。 以下、HTMLとCSSのソースを、レイアウトに関する部分だけ載せます。 [--HTML--] <body> <div id="all"> <div id="header"> <p>header</p> </div> <div id="body"> <p>body</p> </div> <div id="sidebar"> <p>sidebar</p> </div> <div id="footer"> <p>footer</p> </div> </div> </body> [--CSS--] @charset "shift_jis" body { margin: 0 auto; padding: 0; text-align: center; } div#all { width: 760px; background-color: blue; margin: 0 auto; padding: 0 0 20px; text-align: left; overflow: hidden; } div#header { position: relative; left: 17px; width: 717px; height: 50px; background-color: yellow; margin: 0; padding: 0; text-align: left; } div#body { position: relative; left: 17px; width: 522px; height: 200px; background-color: lime; margin: 0 0 2em; padding: 0; text-align: left; float: left; } div#sidebar { position: relative; left:32px; width: 180px; height: 200px; background-color: red; margin: 0 0 3em; padding: 0; float: left; } div#footer { position: relative; left: 17px; width: 717px; height: 100px; background-color: fuchsia; margin: 0; padding: 0; clear: both; } ---------- marginやpaddingを"0"にしているにもかかわらず、余白が生まれてしまうのはなぜなのでしょう・・?

    • ベストアンサー
    • CSS
  • css 初心者です。(壁紙について

    外部cssにて、壁紙にある画像を一枚壁紙にしようと思い、以下の記述を行いましたが、なぜかすべての画像の範囲が収まらず、一部Y軸方向に画像が現れるだけです。どのような事が現なのでしょうか?お心当たりございましたら、お願い致します。 //css部分// @charset "UTF-8"; /* CSS Document */ p:hover { padding:10px; border:1px dotted #ff0000; color:red; } a:hover{color: blue;} h1:first-line{color:green;} p.sample1{color: red;} p.sample2{background-color:#3366ee;margin:30px 20px;padding:45px 50px} p.sample3{background-color:#ff7799;margin:-70px -40px;padding:70px 100px} p.sample4{background-color:#33bb77;margin:-70px -2px;padding:70px 100px} p.sample5{background-image: url("akete.jpg"); bakcground-repeat:no-repeat; background-attachment:fixed; } //html部分 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>Untitled Document</title> <link rel="stylesheet" href="begin.css" type="text/css" /> </head> <body> <p class="sample5">あれ?画像欠けてない?</p> </body> </html> 以上をよろしくお願いします。

    • ベストアンサー
    • HTML
  • cssハックを勉強中で、使い方について質問です。

    現在cssハックを勉強中です。 あるサイトで調べるとoperaだけに使う場合 *+html:first-child p { /* for Opera */ line-height : 150%; } このように表示されてました。 IE4-IE6のアンダースコアハックの使い方は分かったのですが 上記のcssハックは今ひとつ使い方が分かりません。 例えば下記のcssがあったとして ul.piyo{ margin:0 0 10px 0; } ul.piyo li{ margin:0; } ul.piyo li.hoge a { width:100px; height:10px; display:block; padding:0; margin:0; background:url(../img/hoge.gif) ; } ul.piyo li.hoge a:hover { background-position:0 -18px; } ...以下、hoge2、hoge3と同じ<li>のcssが続く。 各hoge、hoge2、hoge3の下部分にoperaだけmargin10pxをつけたい場合 *+html:first-child li.hoge { /* for Opera */ margin:0 0 10px 0; } このように表記し、hoge2、hoge3と付け足せばいいのでしょうか? 説明下手で申し訳ありません。 分かりづらいところは補足いたしますのでどうぞご回答よろしくお願いいたします。

    • ベストアンサー
    • CSS