Drawer メニューの追加と 文字の切り替え @Jquery
スマートフォンとかでよく見かけるメニュー。上に三本の線があってそこを押すと
メニューがにょきっと出てくるやつ。それを手軽に使えるのが下記のスクリプト
CDNもあるのでとっても便利。
Drawer - Javascript · Drawer · A small CSS3 and jQuery plugin for app style drawer menu.
まずはスクリプトをダウンロードしてきまーす。
またはCDNで読み込んでもOK。
読み込みが必要なのは下記のファイル。
<link rel="stylesheet" href="../css/drawer.min.css"> <!-- jquery & iscroll & dropdown --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.1/iscroll-min.js"></script> <script src="//cdn.rawgit.com/ungki/bootstrap.dropdown/3.3.1/dropdown.min.js"></script> <!-- drawer js --> <script src="../dist/js/jquery.drawer.min.js"></script>
drawer.min.cssと Jquery.draer.min.jsもCDNにあったのでそれを読み込んでもOK
https://cdnjs.cloudflare.com/ajax/libs/drawer/2.4.0/js/jquery.drawer.min.js
https://cdnjs.cloudflare.com/ajax/libs/drawer/2.4.0/css/drawer.min.css
でもって、公式サイトにのっている方法を参考にHTMLを書く。
Drawer - HTML markup · Drawer · A small CSS3 and jQuery plugin for app style drawer menu.
レスポンシブタイプや、トップ固定タイプなど。
で、スクリプトを呼び出す。
$(document).ready(function() { $(".drawer").drawer(); });
以上でだいたい動く。
とても簡単。
ただ、メニューバーをスマフォで開いたときに閉じるボタンがわかりずらいので
メニューの文字をボタンを追加して、それを開いたときに閉じるになるように文字を変えたあげるスクリプトを書く。
文字を変える方法はこちらを参考にした。
jQueryで開閉メニュー&ボタンのテキストを切り替える | blog|blow→in
var flg = "close";
jQuery(".drawer-toggle").click(function(){
if(flg == "close"){
jQuery(".menutitle").text("閉じる");
flg = "open";
}else{
jQuery(".menutitle").text("メニュー");
flg = "close";
}
});
でもって
htmlはこんな感じで。
<div class="drawer-header">
<button type="button" class="drawer-toggle drawer-hamburger">
<div id="overlay">
<span id="close" class="menutitle">閉じる</span>
</div>
<span id="btn" class="menutitle">メニュー</span>
<span class="sr-only">toggle navigation</span>
<span class="drawer-hamburger-icon"></span>
</button>
</div>
cssは省略
phpMyAdminの文字化けを治す@ MAMP
/Applications/MAMP/Library/support-files/my-medium.cnf
をコピーしてきて名前をmy.cnfに変える。
/Applications/MAMP/conf/my.cnf
の中に下記を追加。
[client]の部分に
default-character-set=utf8
[mysqld]
の部分に
skip-character-set-client-handshake
init-connect=SET NAMES utf8
character-set-server = utf8
collation-server = utf8_bin
で、tableやDBを新規作成するときには文字コードを
utf8_general_ci
にすること。
でカラムの文字化けが解決。
SQL で show variables like '%char%'
をしてUTF8にっているか確認。
Cakephp DebugKit
一番最新のDebugKitはCakephp2.X系には対応してなかった。
エラーが解消されないのでナンデダロ~ォ♪*1ナンデダロ~♪っておもってたら、単にバージョンが違うのじゃないとだめなだけだった。。。。
https://github.com/cakephp/debug_kit/tree/2.2
ここからダウンロードしてPluginフォルダに放り込んだらエラー解消。v( ̄Д ̄)v イエイ
*1:乂(゚д゚ ;)≡(; ゚д゚)乂
CakephpをXammpにインストールしてみた。エラー解消のためのメモ
Cakephp2.7をインストールしてチュートリアルをはじめてみました。
インストール時にいろいろつまづいたので、解消のために参考にさせてもらったHPを
メモ。
xampp環境にCakePHPをインストール | 大八プレス
phpチュートリアルとかフレームワークとかメモ002
XamppとCakephpを使ったWebアプリ開発メモ001
とりあえず、まずはphpの開発環境を整えるためにXamppをインストール。
Mysqlからphpまでひと通りのインストールが一発でできるすぐれもの。
下記からダウンロードしてインストール。
数年ぶりにインストールしてみたら日本語化もされててとっても楽になったなぁという感じ。
あと、言語をphpにした理由
Rubyと迷ったんだけど、とりあえず、今まで使っていてとっつきやすい言語、ということでphpにしました。
フレームワークにCakephpを使う理由
今までフレームワークとかあんまし使ったことなかったんですけど
とりあえず、今回使ってみようかと思いまして、日本語も充実してそうだし
ケーキっていう名前もス・テ・キだしってことで使用してみました。
今後は、ミニブログみたいなのをtestで作って、Web上で認知療法がセルフでできるサービスをたちあげたいと思っています。
Bootstrapが積み木感覚で作れるサイト Lollytin が復活してた
以前、急にサイトが消えてしまったLollytinが復活してた。
結構便利だったのでとてもうれしい。
基本的には必要なブロックを選んでいくだけ!
詳しい使い方はこちら