シンプルウェイ制作班|WEB制作スタッフブログ

多機能テーブルを作成する

2015年10月05日

多機能テーブル遅れて出てきてしまったちまきです。
貯めていたストックしていたネタが使えず、お待たせしましたがーん…

もう夏も終わり、少し肌寒くなり、本格的にらしくなりましたね晴れ
近頃は、私にとって、表とフォームと戦う日々でした。
そんな中、出会ったのが、 DataTables ですキラキラ
これを使えば、ただの表が、↓のように、検索・ソート・閲覧数選択、ができますびっくり

つくば市の最高・平均・最低気温及び降水量
最高気温( °C)平均気温( °C)最低気温( °C)降水量(mm)
01月 9 2.7 -3.2 43.8
02月 9.7 3.7 -2.2 51.6
03月 12.8 7.1 1.2 99.5
04月 18.3 12.5 6.6 105.6
05月 22 16.9 11.8 120.3
06月 24.6 20.2 16.3 133.1
07月 28.3 23.9 20.4 127.1
08月 30.2 25.5 21.8 130.6
09月 26.2 21.9 18.1 183.2
10月 20.9 16 11.3 165.9
11月 15.9 10 4.6 78.8
12月 11.4 5 -0.9 43.6


ちょっと、テーブル作りも楽しくなりますよね

===================

では、導入方法をご紹介しますにこにこ
  1. https://www.datatables.net/download/packagesからパッケージをダウンロードします。
  2. DataTables-X.XX.Xがダウンロードされたら、解凍をします。
  3. media フォルダの中にあるファイルを、”そのまま”または”選択して”ファイルを移動します。
    最低限必要なのは、
    • css/jquery.dataTables.min.css
    • js/jquery.dataTables.min.js
    • js/jquery.js ※jQueryを導入済みの場合は、必要ありません
    imageフォルダを入れておくと、ソートの際にでてくる▼が表示されます。

  4. テーブルのあるページに以下のように記述します。
    <head>
    ...
    <link rel="stylesheet" type="text/css" href="/css/jquery.dataTable
    s.min.css"/>
    ...
    </head>

    	...
    <script src="/js/jquery.js">
    <script src="/js/jquery.dataTables.min.js">
    ...

  5. <table>タグに任意のid属性を付与します。今回は <table id="myTable"> です。
    ※テーブルには必ず<thead>と<tbody>を使ってください。
  6. <script>~</script>に、以下のように記述を加えます。"#myTable"は、#はそのままで、5.で指定したidに変えてください。
    $(document).ready(function(){
    $('#myTable').DataTable();
    });

これで終わりです!!
簡単ですよね。

$('#myTable').DataTable({
//ここに設定を書き込めば
});
いろいろなことができます。
ここで使った表には、
"lengthMenu": [[3, 5, 10, -1], [3, 5, 10, "ALL"]]
を入れて、表示させる件数を変化させています。

ぜひ、試してみてください~笑

データは下記より使用させて頂きました。
気温と雨量の統計のページ : http://weather.time-j.net/Climate/Chart/tsukuba

では、失礼しますZZZ

シングルページについて

2014年12月18日

今回はちょっと前に流行った
シングルページについて紹介します。

お仕事でシングルページのページ制作をすることになり、
丁度よいプラグインを探しておりました。
ところが、中々当案件にフィットするプラグインが見つからない…

何故かというと、
普通のシングルページページに、
下にスクロールするとアニメーションが動く普通のパララックスページを
足したような動作が求められたからです。

しばらく頑張って探してみたところ、ついに見つけました!

その名も fullPage.jsのAppleページです。




大本の fullPage.js のページ自体はすぐに見つかったのですが、
このAppleページはなかなか見つけられませんでした。
まさに灯台下暗しとはこのことを言うのですね…

ページ下部フッターの「Download」よりデモファイル一式がダウンロードできます。
その中にある examples/apple.html が求めていたファイルになります。
あとはこれをベースにカスタマイズすればOKです!!!

その他にも、参考になるサンプルが沢山入ってますので、
一見の価値ありです。

しかし、ピンポイントのプラグインを探すのって結構難しいですよね。
実はこのプラグイン、@さんが見つけてくれました。。。


簡単にjQueryのカスタムビルドができるサイト「jQuery Builder」

2014年04月07日

こんにちは。デザイナーの@です。

jQueryを読み込む際、なるべくGoogleにホストされたものを読み込むようにしているのですが、バージョンがあがるにつれ増える容量…汗
なるべく容量を減らして使えたら…なんて思いつつ、git?grunt?と敷居が高くてカスタムビルドには手が出せてませんでした。

jQuery Builder
jQuery Builder」はjQueryのカスタムビルドを簡単に可能にしてくれたサイトです。

jQueryのバージョンを選んで、使わないモジュールのチェックを外していくと、jQueryファイルの容量が減っていきますちょき
「Minify」にチェックを入れるとさらに圧縮。

気軽にカスタムビルドできて重宝しそうです!

writer : @


reveal.jsでPowerPointのプレゼン資料みたいなページ

2014年01月06日

あけましておめでとうございます。

今年1回目のスタッフブログの内容ですが、
ちょっと面白いjQueryを教わったのでそれを紹介します!

reveal.jsというもので、
ブラウザ上でPowerPointみたいなことが出来るjQueryになります。

reveal.js



上のデモページを見ていただくと分ると思いますが、
PowerPointで制作するプレゼンの資料っぽいページが簡単に制作することができます。

設定方法やファイルのダウンロードは下記ページから行えますが、
英語のページなので、私は翻訳しながら調べました。。。
HTMLの知識がある方であればなんとなく分かると思うので、
細かい説明は省略しちゃいます。

⇒設定方法やダウンロードのページ
※ダウンロードは右メニュー下部の「Download Zip」ボタンをクリック!

私がPowerPointが苦手というのもありますが、
ちょっとした資料を作る際にはいいですよね。

欠点と言えば、HTMLの知識がないと制作は難しいというところにあります。
そんな方(?)のために、これのオンラインエディタが存在してたりします。

ここで紹介すると長くなってしまうので、
次回はこれのオンラインエディタについて紹介しようかしら。。。

ColorBoxでiframeを開く

2012年08月23日

jqueryベースで動作する「ColorBox」。
主に画像を拡大表示するときなどに使いますが、iframeを開きたいときにも使うことができます。

使い方は簡単。

1.ソース中のポップアップさせたい部分に
class="iframe"

を記述し、js,cssファイルを読み込みます。

(例)
<a href="/job_search.php" class="iframe"><img width="29" height="168" alt="test" src="/images/common/direct_btn.png"></a>

ColorBoxからダウンロードしたjsファイルとcssの読み込み。

<script type="text/javascript">google.load("jquery", "1.7.1");</script>
<script type="text/javascript" src="/js/jquery.colorbox.js"></script>
<link rel="stylesheet" href="/css/colorbox.css" />

2.画像ファイルの設置
ダウンロードしたcolorboxの画像ファイルを設置(/images/以下のファイル)。

3.colorboxの設定をjavascriptで記述。
iframeの大きさは、widthとheightを変更することで変えることができます。
ピクセル指定も可能です。

$(document).ready(function(){
$(".iframe").colorbox({width:"850px", height:"80%", iframe:true});
});

※開いたウインドウに閉じるボタンを設置するときは、ボタンに

id="cancel"

を設定して、

$("#cancel").click(function(){
parent.$.fn.colorbox.close(); return false;
});

を記述します。
過去記事
最近のコメント
QRコード
QRCODE
読者登録
メールアドレスを入力して登録する事で、このブログの新着エントリーをメールでお届けいたします。解除は→こちら
現在の読者数 2人
新規投稿

新規投稿するにはログインする必要があります。会員IDをお持ちでない方はIDを取得された後に投稿できるようになります。

このページの先頭へ