タグ

2017年9月17日のブックマーク (2件)

  • プラグインなし!横からスライドするドロワーメニューの作り方

    ボタンを押せば画面の横からメニューがスライドして現れるドロワーメニュー。facebookを先駆けに、最近のスマホサイトやアプリなどで当たり前のように見るようになりましたね。 デザイン的にカッコイイだけでなく、スマホなどの小さい画面でも、上手く情報を詰め込むことができるので、ユーザビリティの面でも必須の機能といえるでしょう。 この記事では、ドロワーメニューを設置する手順を紹介しますが、プラグインを使わない自作する方法で解説したいと思います。 ドロワーメニューの作成手順 まず、ドロワーメニューを作るために必要な言語はHTMLCSSとjQeryの3つ。 仕組みとしては、HTMLで作ったドロワーメニューを、CSSで隠れている状態と表示した状態を作成し、jQeryでその切り替えをするだけという単純な作りになります。 HTMLCSSはある程度わかるけど、jQeryはちょっと…という方もいるかと思い

  • Ajax を使ってリアルタイムに反映する簡易投票システムを設置する | KLUTCHE

    Facebook の「いいね」ボタンのように、ページ遷移無しで、ON・OFF できる投票ボタンの設置と、投票数の表示方法です。 ・Ajax を使います ・jQuery と PHP を使います ・データベースは使わずテキストファイルに読み書きします デモ デモページ ハートマークをクリックすると投票数が1プラスされ、もう一度ハートをクリックすると、投票数が元に戻ります。 プラスされた数字は再度ページを開いても反映されたままです。 Ajax って難しそう こんな風に、ページ遷移なしにデータをやりとりすることを「非同期通信」と言います。 非同期通信でやり取りしたデータを元に Javascript で動的にページの一部を書き換えるのが Ajax です。 きっとすげえ難しいコード書くんだろうな・・・ そんな風に思っていました。 が、意外と簡単なんです。 助けてくれるのは jQuery! Javasc