メシのタネ

Webプログラミング 備忘録

  • DOMをPHPで操作できたらいいよね

    そうだよね。そう思うよね。JavaScriptでやると、画面がガタついたりするもんね。そうならないようにする方法もあるかもしれないけど、僕はできませんので、サーバー側でなんとかできたらええなぁと思って挑戦したけど、できませんでしたよ。PHP標準でHTMLをDOMにできるらしい今、技[...]

    続きを読む
  • 設計書ってなんで書くの?

    設計書をなぜ書くのかから始めてかれこれ3年近くこの禅問答をやっているわけですが、いまだに答えは出ません。ただ、その禅問答をやる中で設計書に対する取り組み方は大きく変わったので、その一部でも書いていきたい。基本設計はとにもかくにも必要だと思う設計書はいらぬ!という話をよく聞くし、自分[...]

    続きを読む
  • 書ききってやる。

    久々に書いてみる。久々に文章を書くということをやってみようと思う。伝える作業を観察したいと思ったからそうしたいと考えた。情緒的な文章は基本的にゴミ箱にぽいしてきましたが、情緒的なのも自分だと思う。「文章をかくという作業は、とりもなおさず自分と自分をとりまく事物との距離を確認すること[...]

    続きを読む
  • 普通の会社で2年普通に働いて思う事

    えらい寒くなりました。文句言いながらも現職を続けて2017年12月1日にめでたく2年がたちました。分かりやすいが乱暴に言えばITドカタと呼ばれる業界に入って案件のヒエラルキーの無慈悲さを痛感しながらも、それでもしょうがないと頑張る人たちに心を打たれながら「じゃあ俺も」と頑張れない自分に挫折して、とあ[...]

    続きを読む
  • jQueryUiのDatepicker利用時にminDate設定するとバグる件

    題名の通りなんですが、DatepickerでminDate使うとバグります。また後でキャプチャ見て貰いますけど、灰色の部分が、minDateで設定した日付が反復して出るようになるんですね。こういうの気が付かない人がいるかも知れませんが、ChoromeでminDate設定してる人は気にしてみてくだ[...]

    続きを読む

Webサイトのナビゲーション製作時知ってると便利なこと

jQUeryurl1

ナビゲーションを作る時、現在のページの見た目を変えておきたい場合があります。ページごとに任意のタグにactiveクラスを振るみたいな方法で凌げると思いますが、サイトがWebプログラムだったりするとこの方法だと不可能になります。が、jQueryで作れば、上手く行く可能性が高いので、URLに応じて任意のタグにactiveクラスを振るという事をjQueryを使って行っていきます。

URLを分割する


URLに応じるので、まずは現在のページは何処なのかを知る必要があります。URLはwindow.location.hrefに格納されているので、これを取得すれば良いとなりますが、このまま取得すると使い勝手が悪いので、こいつを/で区切って配列にします。window.location.href.split(“/”)こんな感じでまずはURLを配列にします。実験してみたい人は、ブラウザのコンソール使って、適当なサイトで、このコードを叩いてみて下さい。

jQUeryurl2

現在ページを特定する


既にできてるんですけど、まだ配列です。で、現在ページは配列の末尾か末尾の一個前に入ってるので、配列の末尾を取得します。urlの末尾に/がついているなら配列の末尾の1個前を取得します。これで現在のページを特定することができました。

jQUeryurl3

href属性を抽出する


jQUeryurl4

現在のページが分かったら、ナビゲーションの要素を走査して、href属性を抽出します。href属性に記述してあるURLとさっき特定したページの名前の一致を比較して、対象のDOMを制御します。図が分かり難いかもしれませんが、言ってることは感じです。フローチャートじゃないと分からない!って人向けにそれっぽいのを用意したので、こちらも見てみてください。書き方変かも知れないけどね。

jQUeryurl5

コード


というわけでコード書いてみました。URL取得をしなければならないので、今回プレイグラウンドが使えませんでした。なのでGistに書いておきます。

関連記事

コメントをお待ちしております