jquery

[prettyPhoto]GoogleMap等のインラインフレーム用のリンク

Im00221123_223105

リンク先のURLに『iframe』を付けて
幅と縦の指定を合わせてリンクを作ればOK


「prettyPhoto.map.html」をダウンロード

ソースを見る

| | コメント (0)

[JQUERY] toggleのリセット

JQUERYの.toggle()は
CSS属性が最終的に
『display: none』になります。
そのために
画面上から消えるわけなので

戻す『リセット』するには
display: noneを戻せばいいわけです。

opacityとtoggleの違い
Force4u00221106_145805


| | コメント (0)

[jquery]animate

jqueryのanimateについてデモ

Force4u00221105_235945


 

「jquery.animate.html」をダウンロード

「jquery.animate.html.txt」をダウンロード

 


「jquery.animate.02.html」をダウンロード

「jquery.animate.02.html.txt」をダウンロード


 

//ボックス1を400px移動
$('#box_1').click(function(){
$('#box_1').animate({
'top':'400px'
});
});

//ボックス2をslowで移動
$('#box_2').click(function(){
$('#box_2').animate({
'top':'400px'
},'slow');
});

//ボックス3をswingで2秒かけて移動
$('#box_3').click(function(){
$('#box_3').animate({
'top':'400px'
},2000,'swing');
});

//ボックス4をlinearで2秒かけて移動
$('#box_4').click(function(){
$('#box_4').animate({
'top':'400px'
},2000,'linear');
});

 


$('#reset').click(function(){
$('#box_1').css({'top':'','left':''});$('#box_2').css({'top':'','left':''});
$('#box_3').css({'top':'','opacity':1.0});$('#box_4').css({'top':'','opacity':'1.0','display':'block'});
});

$("#go4").click(function(){
  $("div").css({width:"", fontSize:"", borderWidth:""});
});

//ボックス1を右下へ移動
$('#box_1').click(function(){
$('#box_1').animate({
'top':'400px',
'left':'320px'
});
});

//ボックス2をクリックの回数分移動
$('#box_2').click(function(){
$('#box_2').animate({
'top':'+=20px',
'left':'-=20px'
},'2000');
});

//ボックス3をswingで2秒かけて移動して透過0.0付ける
$('#box_3').click(function(){
$('#box_3').animate({
'top':'400px',
'opacity': 0.0
},2000,'swing');
});

//ボックス4をlinearで2秒かけて移動toggle
$('#box_4').click(function(){
$('#box_4').animate({
'height': 'toggle',
'top':'400px',
'opacity': 'toggle'
},2000,'linear');
});

 


toggleは内部的には
CSSで display:noneになっているので
display:none→blockなりinlineでリセットされる


    

| | コメント (0)

[jquery]event

jqueryのeventに関するビデオ

Force4u00221105_22330
YouTube - jQuery Events Part 1[YOUTUBE]新しいウィンドで開きます

これからは何するにしても
『ビデオ』は重要だなぁ
とてもわかりやすいですよね。

 

自分もYouTubeチャンネルやってますが
チュートリアルビデオって難しい。
『何を伝えるために』

『何を見せるのか』
なんですけどね

 

ちなみに
こんな感じですね

「jquery_event.html.txt」をダウンロード[LINK]新しいウィンドで開きます

「jquery_event.html」[LINK]新しいウィンドで開きます
 

<ul class="boxes">

<li class="box_1">1</li>
<li class="box_2">2</li>
<li class="box_3">3</li>
<li class="box_4">4</li>

<li class="box_5">5</li>
<li class="box_6">6</li>
<li class="box_7">7</li>
<li class="box_8">8</li>

</ul> 
<div class="clear"></div>
</div>

//ボックス1にクリックイベントを付ける
$('.box_1').bind('click',function(){
alert("1番をクリックしました");
});

//ボックス2にクリックイベントを付ける
$('.box_2').click(function(){
prompt("2番をクリックしました");
});

//ボックス3にクリックで背景色を変える
$('.box_3').click(function(){
$(this).css('background','#e8f3fe');
});

//ボックス4にマウスオーバーで背景色を変える
$('.box_4').mouseover(function(){
$(this).css('background','#e8f3fe');
$(this).mouseout(function(){
$(this).css('background','#9cc3eb');
});
});

//ボックス5にクリックで隠す
$('.box_5').click(function(){
$('.box_5').hide();
});

//ボックス6にダブルクリックでテキストを変える
$('.box_6').dblclick(function(){
$(this).text('123456');
});


//ボックス7にクリックでカウントアップ
var counti = 9;
$('.box_7').click(function(){
$('.box_5').text(++counti);
$('.box_6').text(++counti);
$('.box_7').text(++counti);
$('.box_8').text(++counti);
});

//ボックス8にマウスオーバーとマウスアウト
$('.box_8').mouseover(function(){
$(this).css('background','#e8f3fe');
$(this).css('width','50px');
$(this).mouseout(function(){
$(this).css('background','#9cc3eb');
$(this).css('width','180px');
});
})

| | コメント (0)

その他のカテゴリー

Accessibility AccessibilityCheck AccessibilityForm AccessibilityInDesign AccessibilityPDF Acrobat Acrobat Action Acrobat Annotation Acrobat AppleScript Acrobat Layer Acrobat Plug-ins Acrobat Portfolios Acrobat Print AcrobatBarcode AcrobatDialog AcrobatForm AcrobatJS AcrobatMenu AcrobatPDF AcrobatStamp AcrobatYouTube AddressBook Adobe Adobe InDesign AdobeAppleScript AdobeBridge AdobeIllustrator AdobeJSX aed Alfresco Android AnimationGif Apple AppleScript AppleScriptBasics AppleScriptCharacter AppleScriptColor AppleScriptDroplet AppleScriptErrorNum AppleScriptFolder AppleScriptFontBook AppleScriptRename AppleScriptTools AppleSymbols Applications Barcode Barcode2D BarcodePostal BetterHTMLExport Book Browser buzz Certificates CharacterEntity CharacterSets Colors Cool Site CSS Cutting DecoMail DecorationMail Design Desktop Diff DJ dmg DNS Documents Download eBook Editer eMail Envelopes ExifTool Facebook FFmpeg File System Fonts FontsTool FontsWeb FOOD FormPrint ftp Gadget Gif Animation Google HexEditor HTML info iPhoto ISBN ISO iTunes iWork iWorkNumbers iWorkNumbersCalendar iWorkNumbersTimecard iWorkPages JavaScript JeditX JeditX Regexp JeditXAppleScript JIS jquery Letterpress Library logo Mac Admin Mac Archiver Mac Browser Mac Browser Plugin Mac QuickLook Mac Spotlight Mac Video Map Mobby Moto Movies Music Network Basic ntp OCR Office OSX Pantone Paper PDFlib Permission Photo Pictograms Print Public QuickLook QuickTime QuickTimeSetting QuickTimeSound Real Media ReName ResourceFork ruby Screen ScreenCast Search Security SEO Sharing SLAResource Spotlight Stamp SWF Tutorial PSD TV Twitter Typography Unicode Utilities Video WebFont Wedding Windows WindowsMedia XML XMP XPS YouTube YouTube Rss