--年--月--日

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
2006年09月30日

戻るボタンを設置しましょう(JS初級)

 ここのリンクは原則target="_blank"なしの、別ウインドウ(別窓)で開かないようになっています。詳しくはコチラ→リンクを別ウインドウ(別窓)で開かないようにしました。
 参照先に飛んでそのあと、戻るときに、ブラウザの『戻る』ボタンをクリックすれば元のページに戻れるのですが、記事の最後に、同じ働きの[戻る]ボタンを設置しておくと、訪問してくれている人が元のページに戻りたいと思ったときに、マウスを大きく動かさなくてもいいので便利ですね。
<input type="button" name="backbutton" id="backbutton" value="戻る" onclick="history.back()" onkeypress="history.back()" tabindex="50" accesskey="p" />

 history.back()で、1つ前の履歴に戻ります。ボタンがクリックされたときに1つ前の履歴に戻るようにしたいので、onclick="history.back()"としました。また、onclickをサポートしていないブラウザもあるといけませんから、同じ内容のonkeypressも設定しておきましょう。
 value="戻る"は、ボタンに表示される文字です。自由に変更してください。
 tabindex="50"は、[Tab]キーを押したときに、フォーカスする順を表します。
 accesskey="p"は、IEの場合、[Alt]+[設定した値(ここではp)]でそのボタンをクリックできます。(Macは[Ctrl Key]+[設定した値])



 ボタンでなくて戻るのように、URLにJavaScriptを使って簡単に設定することもできます。


<a href="javascript:history.back();">戻る</a>

 利用者がスクリプトを使わない環境の場合もあるので、URLに"javascript"を使うこの方法は好ましくないようです。ただ、この記事の[戻る]ボタンについては、スクリプトを使わない環境で動作しなくても、ブラウザの[戻る]ボタンを使えばいいので、特に問題はないと思われます。yozoはこれを使用していますが、強くおすすめできるものではありません。

↓ ぽちっと応援お願いします♪ m(_ _)m
人気blogランキング

スポンサーサイト

スレッドテーマ:カスタマイズ:ブログ

メイン

≪New 0610掲示板♪ | Top | 107代目進化バトン Old≫

トラックバックURL


コメント

yozoさん(*・ω・)ノ~☆コンバンワ♪
(ノ゚ω゚)ノ*.オオォォォォォォーすごいボタンが出現してますねぇ!
こういうのを思い浮かぶyozoさん・・やはり常にお客さん目線なんですね。
見習わなくっちゃなぁ~φ(・ω・*)フムフムφ(。_。*)メモメモ
またまたブックマークさせていただきますね!
いつもためになる記事をありがとうございます~♪

コメント

>モンビッケさん、こんばんはー♪

>(ノ゚ω゚)ノ*.オオォォォォォォーすごいボタンが出現してますねぇ!
えへへ・・・ありがとーございまっす♪とても励みになりまっすv(。・ω・。)ィェィ♪
でも、簡単なんですよ。backというメソッドを使うだけですからね。
histry.back()と書くだけなんです。(=⌒▽⌒=) ニャハハハ♪

>こういうのを思い浮かぶyozoさん・・やはり常にお客さん目線なんですね。
いえいえ♪実はyozoはブラウザを使いこなせていないのですよ。
リンク先へ飛んで、うろちょろして、元に戻れなくなってしまうことって多いのです。それで[戻る]ボタンのあるページはありがたいなぁ~ってずっと思ってましたからね。yozoはどんくさいから、思いつくのかもしれませんね。(゚m゚*)プッ
いつも、ブックマークしてくださってありがとーございまっす♪
これからも、いい情報を発信できるようにがんばりまっす m(_ _)m

コメント

yozoさん、こんばんは♪(o^∇^o)ノ
本当にいろんな技に挑戦されていますね。
JavaScriptでいろいろやってみたいことはあるのですが、
どれも中途半端で放置しております。(苦笑)
こうしてJavaScriptを分かりやすく書いていただけるのは非常に
有難いなぁと思います。
また勉強させていただきます!!ありがとうございます。<(_ _)>

コメント

yozoさん、こんばんわ\(^0^)/
そういうことが、出来るんですね(*'0'*)
こういうボタンが、あると便利ですよね。
よく、ホームページなどを見ると、ボタンの中に、『next』とか『back』とか、書いているので、どうやってやるのだろうと思っていました。
勉強になりましたm(_ _)m

コメント

>まゆびさん、おはよーございまっす♪

>本当にいろんな技に挑戦されていますね。
(///∇//)テレテレ あはは・・・そんな、挑戦というカッコイイものでもないのですが、
JavaScript初級ですからね。使い方や慣れるための『初級』のつもりなんです。

>また勉強させていただきます!!ありがとうございます。<(_ _)>
いつでも、その気になったときにチャレンジしてみてくださいね♪\(*⌒0⌒)bがんばっ♪
といいつつ、yozo自身も『気が向いたと記』にしか、取り組んでいないのですけどね(゚m゚*)プッ

コメント

>ネーちゃんさん、おはよーございまっす♪

>そういうことが、出来るんですね(*'0'*)こういうボタンが、あると便利ですよね。
そうでしょ♪ちょっとしたことですけど、重宝すると思いますよ。
yozoもここの記事では、次の2つに早速設置しました。一度お試しあれ。
掲示板
http://yozoblog2.blog63.fc2.com/blog-category-24.html
●『yozoの気が向いたと記2.0』の読み方♪
http://yozoblog2.blog63.fc2.com/blog-entry-354.html

>よく、ホームページなどを見ると、ボタンの中に、『next』とか『back』とか、
>書いているので、どうやってやるのだろうと思っていました。
history.go()を使っているのだと思います。マウスカーソルを当てて見たり、
ページのソースを見たりして、チェックすればいいと思いますよ。
そこだけを見るのは意外と簡単です。(*^-^)

コメント

こんばんはー。
「戻る」ボタンですかー。
時々こういうボタンを設置されてるページを見かけますが
これは便利ですねぇぇ☆
ちょっとした手の動きでもすぐに手が届く方が
無精者の私としては有難いので・・・(笑)

あー今日はうさも殿、お出かけですか。。
ナニナニ。。
「沙耶」殿の所へ行くとな。。
ちょっと追いかけてきます!

コメント

>ばばるさん、こんばんはー♪

>時々こういうボタンを設置されてるページを見かけますがこれは便利ですねぇぇ☆
そうでしょ♪実はこれには理由があるのですよ♪参照先の文章を読んだ後に「戻る」がないと、そのままお帰りになることが多いと思われることと、別ブログの解説を流用しようという悪巧みがあったりして・・・CLEVER BBSの使い方の記事を用意しそこねたので、yozo本の記事を参照させようかと・・・これは内緒ですよ♪(ノ∇≦*)キャハッッッ♪

>ちょっとした手の動きでもすぐに手が届く方が無精者の私としては有難いので・・・(笑)
あはは・・・そうおっしゃていただけたら、うれしいですよ♪(^○^)

>あー今日はうさも殿、お出かけですか。。
>ナニナニ。。「沙耶」殿の所へ行くとな。。ちょっと追いかけてきます!
「ばばるさん、いつもありがとー♪うれしいなわぁいヽ(゚ー゚*ヽ)(ノ*゚ー゚)ノわぁい」by うさも

ふふふ・・・今日はyozoも追っかけましたよ(ΦωΦ)ふふふ・・・・ by yozo

コメント

こんにちはー。yozoちゃん。
うふふ☆こういう記事を読んでもちんぷんかんぷんだった私が、ちょっとは記事の意味が理解できるようになってきたのもyozoちゃんのお陰だなぁーって・・・。思いながら読んでいました♪
うんうん。
私でもちょっと意味が分かるぞ♪最近分かるようになってきたぞ♪
って・・・。なかなか時間がなくて自分で取り組むことが出来ないでいるけど、本当に勉強になるなぁーと思っているんだぁ♪
戻るのボタン♪
これ便利だね♪うんうん♪
こちら側に対する気配りがとってもyozoちゃんらしいなぁーっておもったよーー♪
さすがです!!!

コメント

>enuちゃん、こんばんはー♪

>うふふ☆こういう記事を読んでもちんぷんかんぷんだった私が、ちょっとは
>記事の意味が理解できるようになってきたのもyozoちゃんのお陰だなぁーって・・・。
そんな風に思っていただけたら、うれしいですよ♪でも、慣れてきたらわかってくるでしょ♪
yozoもそうでしたからね。はじめは、☆!☆?☆ (☆_◎) ☆!☆?☆チンプンカンプン でしたよ♪

>戻るのボタン♪これ便利だね♪うんうん♪
ふふふ・・・もしもよろしかったら、<input>タグをコピペすればできますよ。
簡単ですからね。お試しアレ('-'*)エヘ

コメント

yozoさん、こんにちわ♪(゚▽゚*)

私もコレ、やろうと思ってたんですよね。
でも修正とかが面倒で、「また次回のテンプレ作成時に一緒にやろう(-_-;)」って思ってたんですよ(笑)
サクっと作業に取り掛かれるyozoさんを少しは見習いたいと思いました・・・(。。;)i-201

…((_A_)ノ” ダラダラ

コメント

>Pavさん、こんばんはー♪

>私もコレ、やろうと思ってたんですよね。でも修正とかが面倒で、
>「また次回のテンプレ作成時に一緒にやろう(-_-;)」って思ってたんですよ(笑)
ありゃ?そうだったのですか?実はこのJavaScriptネタは随分前からあったのです。
ただ、ここでソース配布しているusamoskinの修正のネタになったので、
今回その前触れの記事としてこの記事を出したのです。(^○^)
けっしてサクサクしていたわけじゃなかったりするわけなんですよ♪
これは内緒ですけどね・・・(ΦωΦ)ふふふ・・・・

コメント

yozoさん、コンニチワ♪(゚▽゚*)

戻るリンク、便利ですよねぇ~♪
Firefoxでマウスジェスチャーを設置し始めてから、IEで戻るリンクがナイとチョットだけメンドくさく思えてた今日このごろで(笑)
・・・といっても、自分トコのテンプレートには入れてナイのですが( ̄▽ ̄;)(爆)

チョコっとyozoさんの記事にかぶせてウチでもネタを仕込ませていただきました。
とゆーワケで、TBさせていただきたいと思いまふ♬♫

コメント

>Pavさんこんばんはー♪

>戻るリンク、便利ですよねぇ~♪Firefoxでマウスジェスチャーを設置し始めてから、
>IEで戻るリンクがナイとチョットだけメンドくさく思えてた今日このごろで(笑)
戻るリンクは参照ページには付けておいて欲しいですね。それはともかく、
『Firefoxでマウスジェスチャー』φ(゚-゚=)メモニャン、またFirefoxのヒントを
ありがとーございまっす♪勉強しよっとヾ( ̄o ̄;)チガウッテバ、、、

>チョコっとyozoさんの記事にかぶせてウチでもネタを仕込ませていただきました。
>とゆーワケで、TBさせていただきたいと思いまふ♬♫
あはは・・・いつもトラバしてくださってありがとーございまっす♪m(_ _)m
Pavさんはreplaceを使ってのジャンプボタンを作っていましたね。とっても
興味深かったですよ。記事での紹介及びトラバありがとーございまっす♪
こちらからも、お返しトラバさせていただきました。m(_ _)m

コメント

yozoさん、こんばんわ♪(゚▽゚*)

>『Firefoxでマウスジェスチャー』φ(゚-゚=)メモニャン、またFirefoxのヒントをありがとーございまっす♪勉強しよっとヾ( ̄o ̄;)チガウッテバ、、、

か~な~り~便利ですよ、マウスジェスチャー。
まだ私も使い始めたトコなんですが、イイですよコレ!!
IEに戻りつつあったメインのブラウジングが、またFirefoxになりつつあります(笑)
また記事書いておくんで、よかったら参考にどぞ~♪

コメント

>Pavさん、おはよーございまっす♪

>か~な~り~便利ですよ、マウスジェスチャー。
>まだ私も使い始めたトコなんですが、イイですよコレ!!
えっ?そんなに便利ですか?w( ̄o ̄)w オオー!
やっぱり速攻で調べるべきだったかも・・・ガ━━(= ̄□ ̄=)━━ン!!

>また記事書いておくんで、よかったら参考にどぞ~♪
おおお・・・なんと♪ありがたいことですぅ~♪どんな機能なのでしょうね。((o(*^^*)o))わくわく  
このあとお邪魔させていただきまっす♪ ε=ε=ε=ε=ε=ヾ(э^・ェ・^)эニャホー

コメントする

お楽しみ:
サイト管理者にのみ通知する

チェックするとコメントプレビューがオンになります。

ご利用のブラウザ、設定ではご利用になれません。


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。