元スレjQuery ライブラリ 総合質問所 vol.4

みんなの評価 :
301 = :
>>299
1つのファイルを動的に変化させるCMSのテンプレの場合、
bodyやhtmlに個別id振るのはさすがにナンセンスかと。(やろうとすればできますが)
例えば、ページタイトルやぱんくず、ディレクトリ(URL)から判別して動的にsrcを生成したいケースです。
>>300
どういうことですか?
302 = :
てか>>293が一番良さそうな気がしてる
303 = :
>>301
1つのファイルを動的に変化させるCMSのテンプレの場合、
srcの部分も動的に変更するので
JavaScriptでやらないのが一般的です。
304 = :
>>302
それはないw
JavaScriptはページが表示されたあとにユーザーの操作などで
変化するときであって、ページごとに固定で決まっているような所を
JavaScriptで出力しない。
検索エンジンのインデックスに登録されにくかったりするし。
305 = :
固定じゃないじゃん
306 = :
空のimg要素をGoogleにindexさせる意味は全くない
307 = :
>>306
今の話は、ページごとに異なる画像。
空の画像の話はしてない。
308 = :
>>305
>>301に書いてあるとおり
例えば、ページタイトルやぱんくず、ディレクトリ(URL)<が違うページごとに>
<そのURLに>から判別して<そのURLに応じた画像を>動的<ページの>にsrcを生成したいケースです。
309 = :
>>303
そりゃそうでしたね。
ありがとうございました。
310 = :
WordPressならこんな感じか。めんどくせえw
<?php
$cat_now = get_the_category();
$cat_now = $cat_now[0];
$parent_id = $cat_now->category_parent;
$now_id = $cat_now->cat_ID;
$now_name = $cat_now->cat_name;
echo '<img src="' . $now_name; . '.png" />';
?>
311 = :
訂正 不要な部分を削除
<?php
$category = get_the_category();
echo '<img src="' . $category[0]->cat_name; . '.png" />';
?>
312 = :
>>311をjQueryでやったら面倒なことになるね。
313 = :
http://hisasann.com/housetect/2008/06/jquery_1.html
で
$().alert("hogehoge")
が実行出来る理由が分かりません。
何故$()はjQueryオブジェクトになるんですか?
314 = :
>>310-311
文字列結合が「;」で区切られてバグってる。
ていうか、ミスを直したとして、それをapplication/xmlでレスポンスするのか?
このスレはそういう板に属しているよな、いわゆるviewをブラウザのJSが担う場合の話をするスレ。
315 = :
>>313
念の為に言っておくけど、リンク先みたいな意味不明なコードはなくなよ?
$('.hoge').css('color', 'red')
これが実行できるのはわかるよね?
全ての、class="hoge" になっているものが全部赤くなる。
では一つもclass="hoge"がなかったら?
そう一つも赤くはならない。
そして重要なのはエラーにもならないってこと
見つからなかったらどうしよう? と思ってこう書くのはダサいだろ?
if ( $('.hoge').length > 0 ) {
$('.hoge').css('color', 'red')
}
jQueryはこのようなコードを書かなくていいように、
見つからなければ「0個の要素に対して処理を実行」
という操作を行うようになっている。
0個の要素に対して処理を行うのだから結局何もしないのだけど、
それでもcssメソッドは呼び出されてる。cssメソッドの中で
見つかった要素の数だけ(この場合は0回)ループしてるわけ。
$()というのは0個の要素にマッチしたjQueryオブジェクト。
だからそのオブジェクトに対してalertを呼び出せる。
だけど普通はalertの中でループをするんだが、これはやってない。
だから通常のjQueryプラグインではない意味不明なコードというわけ。
317 = :
>>315
師匠!これからもよろしくお願いします。
318 = :
>>317
ついでに雑学。
このように条件分岐を必要なくするために
何も効果はない空のオブジェクトを用いるやり方を
Null Objectパターンという。
そして$() が空のjQueryオブジェクトを返すようになったのは
実はjQuery 1.4から。
http://api.jquery.com/jQuery/#returning-empty-set
319 = :
ダサいかどうかの話になると今はもうjQueryがダサくて羞恥プレイ状態です。
320 = :
やっとjQuery覚えたのにもう他のライブラリめんどくせーよ
321 = :
>>318
師匠!これからもドンドン教えて下さい!!
322 = :
一つのhtmlでページネーションで複数ページに分けて
次のページ開いた時にだけ画像読み込むようにするのってどうやんの?
サイト開いた時点で一気に画像読み込んでちゃ意味ないし
323 = :
$("input[type=radio]");
でラジオボタンだけが取得できると思うんですが、
radio_0
radio_1
radio_2
が有る場合、得られる結果は、0,1,2の順に並んでいることは保証されますか?
radio_2
radio_1
radio_0
になる場合もありますか?それは何によって決まるんでしょうか?
324 = :
HTMLソースに開始タグをその順番で書いてあるなら心配無用
325 = :
>>324
HTMLソースに出てくる順なんですね。
有難うございました。
327 = :
>>326
全部のコードここかどこかに書いて
329 = :
http://jqueryui.com/slider/#default
にあるスライダーを使おうと思うのですが
0=============[]=============100
こんな感じになりますが、このツマミの上に数字を書きたいのですが
可能でしょうか?
0======[30]==================100
こんな感じです。やり方知っている人教えてください。
ググッテも出てきません。
330 = :
>>329
スライダーにそのような機能はないので、
自分でそう表示されるように作ってください。
スライダーの値と表示する場所の情報さえあればできます。
そういうのは自分で作るものだから誰も書いてないのですよ。
332 = :
>>331
上手く行きました!
有難うございます。
333 = :
jqueryでタブ切り替え時にだけ画像読み込むようにすんのはどうやんの?
334 = :
タブ切り替え時とは?ブラウザのタブのことか?
ちなみに、ある時点で画像を読み込ませたいなら、そのタイミングでsrcを代入すればよし。
335 = :
いやブラウザのタブでなくてjqueryでタブ化する場合
これだとサイト開いた時点で全画像読み込んでキャッシュ肥大したり煩わしいしから
タブ切り替えた時のみ画像読み込むようにしたい
http://wryoku.com/sample_page/tab_toggle/
336 = :
>>335
それだとタブ切り替えしたときに画像表示がワンテンポ遅れるのでは?
どうしてもやりたいならimg自体をjQueryで動的生成するようにしてそのタイミングを
タブclick時にすればいい。
$('.tab2').click(function(){
$(this).append('<img src="hoge">');
})
とか。(↑ダサいだけどわかりやすい例)
あとはLazyloadというあるあるプラグイン使うとか
337 = :
続き
それよりも画像自体の容量を軽くする方が
総合的に考えてスマートだし、
後々で面倒な事にならない。
338 = :
jQueryのDialog
http://jqueryui.com/dialog/
でサイズ変更するためにマウスをborderのあたりに持っていくと
マウスカーソルが、通常の矢印から、 <-> みたいなのに変わりますよね。
でも、このborderが細いので <-> が表示される範囲が狭くて、マウスをちょっと動かすと
カーソルが元の矢印に戻ってしまい、borderを摘まんで動かすことが出来ません。
では、borderを太くしたら行けるかなと思って太くしてみたいのですが、borderは太くなったのですが
マウスカーソルが <-> に変わる領域自体が増えるわけでは無いようなので、この方法はダメでした。
どうにかして、カーソルが <-> になる領域を増やすことは出来ませんか?
たとえば、borderを太くしたら、そのborder上にマウスがあるなら <-> にするなどの設定が
出来れば理想的なのですが。
340 = :
だがそのui-resizable-handleクラスが付いている要素は
borderの内側にあり太くしても、borderには重ならず
下に潜り込むだけで、ドラッグできる領域は増えない。
z-indexも効かない。そこまではわかってるんだよ。
341 = :
>>340
詳しい調査有難うございます。
どうにかしてリサイズ領域の幅を太くして、掴み易くしたいんです。
342 = :
>>338
↓普通にこれで太くなったぞ?
ui-resizable-handle ui-resizable-e{
width: 100px;
display: block;
background-color: #ddd;
}
343 = :
>>342
太くなるだけではなくて、掴み易く成りますか?
344 = :
borderに合わせてリサイズカーソル領域を設定するのはかなり難しそうだった。
太くするのは割と簡単だったのでよければどうぞ。
.ui-dialog { overflow: visible !important; }
.ui-resizable-handle { box-sizing: border-box; padding: 7px /* ここの値の2倍が掴める範囲になる */; }
どうしてもborderに合わせたいなら、.ui-resizable-xx のtopやらleftやらをいじることになる。
ややこしいので自分で頑張ってくれ。
あと、デバック時にリサイズカーソル領域を可視化するなら以下のスタイルを設定すると分かりやすい。
.ui-resizable-handle { background-color: rgba(255,0,0,.5); }
345 = :
>>344
詳しい調査有難うございました。
早速試してみます。一体全体どうやってそんな属性を見付け出す事が出来るんですか?jqueryUIのソースを解析するんですか?
346 = :
そーっすよ!
あと9割9分方、ブラウザの
開発者ツールだな。



類似してるかもしれないスレッド
- JavaScript ライブラリ総合質問所 vol.4 (985) - [78%] - 2015/12/16 15:00
- JavaScript ライブラリ総合質問所 vol.5 (344) - [75%] - 2022/3/14 17:45
- 【jQuery】JavaScript ライブラリ総合質問所 vol.3 (1001) - [65%] - 2014/6/18 20:58 △
- 【jQuery】JavaScript ライブラリ総合質問所 vol.2 (986) - [65%] - 2013/5/20 7:00
- 【jQuery】JavaScript ライブラリ総合質問所 vol.1 (983) - [65%] - 2012/10/8 22:30
- jQuery 質問スレッド vol.8 (1001) - [30%] - 2018/5/6 11:15
トップメニューへ / →のくす牧場書庫について