2016年05月17日

栄養成分表で糖質の表記がない場合に他の成分から簡易的に計算するプログラム

簡易計算になりますが、作りました。厳密なエラーチェックなどしていないので、数値は半角でちゃんと入れてくださいね。

エネルギー(kcol):

タンパク質(g):

脂質(g):

糖質:
計算


※食物繊維にはエネルギーは無いとした場合の計算です。

参考:
http://wp-ostinato.eek.jp/wp/tousitunomotomekata/
posted by BigMoonEz at 19:47 | Comment(0) | TrackBack(0) | jQuery | このブログの読者になる | 更新情報をチェックする

2015年07月09日

Slick.jsでオリジナルの矢印ボタンを設置する

Slick.jsとは、jQueryの高性能なカルーセルプラグインです。
これできないかな〜と思う機能のほとんどが網羅されており、設置も簡単。
ここで標準的な設置の解説は控えますが、デモを見るだけでいろいろできるんだな〜というのがわかってもらえると思います。

今回、1ページで2つカルーセルを動作させる必要があり、標準的な動作については問題なかったのですが、大きさが違うカルーセルだったため、前へ、次への矢印ボタンのサイズも異なり、カスタマイズさせる必要がありました。
なので、その奮闘記になります。

slick.jsでは、
$('#hoge').slick({
・・・
});

といった形式でオプションを指定します。
ここに、
appendArrows: $('#arrow')

と書いてあげることで、矢印部分を指定したセレクタやクラスに置き換えることが可能です。

例えば、
$('#hoge').slick({
appendArrows: $('#arrow')
});


とし、HTML部分は、
<div id="arrow">
<div class="slick-next"><img src="hogehoge.png" alt=""></div>
<div class="slick-prev"><img src="hugahuga.png" alt=""></div>
</div>

と記述します。

このままだと標準ボタンと追加したボタンの2つ(計4つw)が表示されてしまうので、標準ボタンを消します。
標準のボタンはCSSでslick-theme.css内に
.slick-next:before{content: url(・・・)}
.slick-after:before{content: url(・・・)}

で指定されているので、
#arrow .slick-next:before{content:""}
#arrow .slick-after:before{content:""}

と指定してあげればOKです。

あとは、leftとかtopでボタンの位置を指定してあげてください。

2016.10.2 追記
.slick-nextと.slick-prevはabsoluteで配置されますので、親階層をposition:relativeに設定する必要があります。
親の位置をslickが適用されているエリアと同じにしないと配置がずれることになります。
posted by BigMoonEz at 19:03 | Comment(0) | TrackBack(0) | jQuery | このブログの読者になる | 更新情報をチェックする

2012年03月13日

iPod touchやiPad WiFi版など通信機能がないのに電車で通勤途中にjQueryの勉強したいわ〜

そんな人いるのか?
ええ、私なんですけどね。

JSbin(http://jsbin.com/)なんかでは気軽にjQueryを試せるフレームワークを提供してくれるわけなんですが、CDNを使っているためにWi-Fi以外の通信手段をもたないデバイスでは移動中に試せない。しかもjsbinはiPod Touchでは入力しにくい。(画面半分くらい入力キーが表示されてしまうので表示領域が少ないんです。。。)
要するに移動中ちょっと暇あったらjQueryを試して勉強したいな、と思ったわけです。
しばらくいいものないかなーと探していました。
そしたら昨日見つけちゃったんですが、Espresso HTML(http://itunes.apple.com/jp/app/espresso-html/id487303069?mt=8)これがとってもイイ!のでご紹介したいと思います。

メイン画面はこちら。
写真 12-03-13 16 48 40.png
テンプレートファイルが用意されていて、それを選んで編集するように使います。
このアプリの優れているところは、デバイス上で作成したファイルを参照できることです。
jQueryテンプレートを選択すると、デフォルトではCDNを読みに行くようになっているのですが、それではもちろん移動中は使えなくなってしまいますので、一度jQueryのソースを読み込んでjsファイルとして新規作成し、保存し、そのファイルを読みにいくようにすれば移動中もjQueryを勉強することができるようになります。

もう一つ、優れているのが入力画面のショートカットキーです。
写真 12-03-13 16 48 06.png
こちらは入力中の画面ですが、上部によくつかわれる「<」「>」「/」などが見えるでしょうか。
まぁ結局それだけでは収まらないので、いろいろ切替はしなくてはならないのですが、上に簡単にまとめられているだけで、かなり入力が楽になります。
「プレビュー」ボタンで入力した内容の結果をすぐ確認できます。

さらにさらに・・・無料です!

iPod touchではやはり入力がちょっと大変ですが、iPadなら問題ないと思われます。
jQueryに限らず、htmlでもCSSでも便利に使えますので是非試してみてください。



タグ:CDN jquery iPhone
posted by BigMoonEz at 20:45 | Comment(0) | TrackBack(0) | jQuery | このブログの読者になる | 更新情報をチェックする