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