下記ページを参考に、jQueryを使用してエレベーターメニューを作成しました。
http://cobs.jp/news/kachibito/2011/03/jquerycont …
デフォルトはスクロールしてもついてくる。
×ボタンを押すと、固定メニューに戻るようにするところまではできたのですが、
×ボタンを押したら×マークが○マークに変わり、
○マークを押すと再びエレベーターメニューに戻るようにしたいと思っています。
しかし、どこをどうさわったらよいのかわからず、苦戦しています。
どうしたらエレベーターメニューのON/OFFの切り替えができるのでしょうか。
また、ページが切り替わったあとでも、ONになっているか、OFFになっているかの設定は引き継げるようにしたいです。
よろしくお願いいたします。
No.2ベストアンサー
- 回答日時:
画像の場合は <img タグにして、.text => .html にするとよいです。
例)
$("#mySliderSwitch").html("<img src='off.jpg' alt='スライド中止' />");
No.1
- 回答日時:
ざっと見てみましたが、あまり応用の効く書き方はしていないようです。
本体をいじるのはどうか分かりませんので以下でどうでしょう。( onOff()でクリック毎にcss,文字,cookieを変更しているだけですが )
1.option指定では unstick:false に。(オリジナルの×は表示無効にする)
2.自前のボタンを#sidebarの上あたりにでも入れる
<a href='javascript:mySlider.onOff();' id='mySliderSwitch'> </a>
3.以下追加 (htmlの下部がいいかも。適宜別ファイルにでも)
<script type="text/javascript">
var mySlider={
f:false,
set:function(){
this.f = $.cookie('un_slide') ? 1:0;
this.onOff();
},
onOff: function(){
this.f = this.f ? false:true;
if(this.f == true){
$("#sidebar").css("position", "relative");
$("#mySliderSwitch").text("×");
$.cookie("un_slide", null);
}else{
$("#sidebar").css("position", "static");
$("#mySliderSwitch").text("○");
$.cookie("un_slide", 1);
}
}
}
mySlider.set();
</script>
※設定の引継ぎに jquery.cookie.js使用。パスや有効期限等は適宜指定してください。
ありがとうございます。
無事、「○」「×」での切り替えができました。
ただ、一点。。。。
「○」「×」を画像にすることは可能でしょうか。
$("#mySliderSwitch").text("×");
を
$("#mySliderSwitch").img("off.jpg");
等にしてみたのですが、できませんでした。
何度もご迷惑をおかけいたしますが、
よろしくお願いいたします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・14歳の自分に衝撃の事実を告げてください
- ・架空の映画のネタバレレビュー
- ・「お昼の放送」の思い出
- ・昨日見た夢を教えて下さい
- ・【お題】絵本のタイトル
- ・【大喜利】世界最古のコンビニについて知ってる事を教えてください【投稿~10/10(木)】
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・ハマっている「お菓子」を教えて!
- ・最近、いつ泣きましたか?
- ・夏が終わったと感じる瞬間って、どんな時?
- ・10秒目をつむったら…
- ・人生のプチ美学を教えてください!!
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・都道府県穴埋めゲーム
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
エレベーターメニューをON/OFF...
-
音楽再生用jQueryプラグイン「j...
-
javaスクリプトについて質問で...
-
よろしくお願いします。
-
jQueryでカウントダウンタイマ...
-
spinelzのjavascript使用方法
-
fc2blogでshadowboxを使用した...
-
<a href="#" …>の意味を教えて...
-
スマホ上で、左右スワイプで次...
-
ページ内文字列の置換について
-
ユーザーが更新ボタンを押さな...
-
フレームだけ閉じる方法ありま...
-
Vbscriptで自分自身のウィンド...
-
別ファイルのfunctionの読み込み方
-
HTMLタグでマウスポインタを変...
-
CSSで先に大枠レイアウトを作成...
-
window.opener.location.href ...
-
ケータイでのダイアログ表示。
-
ポップアップウィンドウの位置
-
いろんなサイズの新しいウィン...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
base64encodeでの文字化けについて
-
jQueryBlockUIをフレーム内で動...
-
Jqueryの干渉について
-
jquery ui.resizable 使い方
-
Base64に変換したHTMLの<script...
-
スライド写真で2、3枚目をラ...
-
jQueryのダウンロードファイル...
-
マスターページでのJavaScriopt...
-
jqueryでのkeydownイベント発生...
-
javaスクリプトについて質問で...
-
jQueryでカウントダウンタイマ...
-
jqueryを2つ設置した事で片方...
-
画像スライドショー用のjQuery...
-
jsファイルで配列を定義し、j...
-
FLASH画像を表示した後のHTML
-
jQuery が動作しません。
-
サイトにアクセスした際、数秒...
-
複数のjavascriptを使うと動か...
-
JQuery の CrossSlideを設置し...
-
Highslide JS の設置について...
おすすめ情報