技術ブログ | 株式会社クラウディア » jQuery https://cloudear.jp/blog クラウド専門の業務システム・社内ツール開発 Fri, 12 Nov 2021 05:00:35 +0000 ja hourly 1 http://wordpress.org/?v=4.0.1 jQuery でメニューにバーを追随させる https://cloudear.jp/blog/?p=1019 https://cloudear.jp/blog/?p=1019#comments Sun, 19 Apr 2015 06:50:08 +0000 https://cloudear.jp/blog/?p=1019 みなさんこんにちは、 masa です。サイトのメインメニューというのはアイキャッチとともに非常に目立ち、ユーザーが最初に操作する可能性が高いパーツですよね。デザイナーのみなさんが個性を出しやすいと同時に、デザインに悩みがちなメニューですが、今日はマウスホバー時にアンダーバーを追随させる方法をご紹介します。

まずはこちらの DEMO をご覧ください。
follow_bar1

マウスをホバーするとホームにいたバーが追いかけてくるメニューです。
上記のものを作る際には HTML, CSS, jQuery を使います。

(HTML)

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="../css/sample.css">
  <script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
</head>

<body>
  <div id="menu">                                                                                                                                                                                    
    <div id="nav"> // 以下ご自由にメニューを書き換えてください
      <a href="">サービス</a>                                                                                                                                                                        
      <a href="">お問い合わせ</a>                                                                                                                                                                    
      <a href="">開発プロセス</a>                                                                                                                                                                    
      <a href="">技術ブログ</a>                                                                                                                                                                      
      <a href="">会社情報</a>                                                                                                                                                                        
      <a class="current" href="">ホーム</a>                                                                                                                                                          
      <span></span>
    </div><!-- nav -->
  </div><!-- menu -->

<script>
$(function() {
        $('#nav span').css({ 
                width: $('#nav .current').outerWidth(),
                left: $('#nav .current').position().left 
        });
        $('#nav a').mouseover(function(){
                $('#nav span').stop().animate({
                        width: $(this).outerWidth(),
                        left: $(this).position().left}
                ,{ duration: 170, easing: 'linear', });
                //上記でバーの移動スピードとイージング方法を設定できます
        });
});
</script>

</body>
</html>

 

(CSS)

#menu {
    font-size: 16px;
    width: 100%;
    padding: 12px 0;
    text-align: center;
    background: #2C3E50;
}

#menu a {
    margin: 0 4% 0 0;
    text-decoration: none;
    color: white;
}

#menu a:visited {
    text-decoration: none;
    color: white;
}

#menu a:hover {
    text-decoration: none;
}

#nav {
    position: relative;
}

#nav a {
    padding:10px;
}

#nav span {
    background: #FD9802; //バーの色を設定できます
    height: 2px; //バーの太さを設定できます
    display: block;
    position: absolute;
    width: 30px;
    left: 0
}

#nav a:hover {
    cursor: pointer;
}

これだけです。バーの移動スピードが遅すぎるとユーザーがストレスを感じる可能性もありますので、個人的には 170ms あたりがオススメです。CSS デザインを変えてオリジナルのメニューを作成してみてくださいね。

]]> https://cloudear.jp/blog/?feed=rss2&p=1019 0 「Handsontable」で Web上にテーブルを作成 https://cloudear.jp/blog/?p=483 https://cloudear.jp/blog/?p=483#comments Sun, 25 Jan 2015 05:31:21 +0000 https://cloudear.jp/blog/?p=483 みなさんは Webアプリケーション上のエディタって使っていますか？今日は Excel ライクなエディタ『Handsontable （ハンズオンテーブル）』をご紹介します。jQuery プラグインなので導入も簡単ですよ！

example_hot
まずは Handsontable 公式デモを 開いてみてください。エクセルのような表がありますので、セルをクリックするとリアルタイムに編集できます。例えばこれでエクセルを読み込み、Ajax で通信すれば、Webアプリケーション内でユーザーにリアルタイム編集させることも出来ちゃうわけです。すごい！

 

 jQuery プラグイン Handsontable の導入方法

まずは GitHub から 『handsontable.full.js』と『handsontable.full.css』をダウンロードします。次に、使いたい html ファイルのヘッダで上記二つのファイルを読み込みます。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>handsontable_test</title>
  <link rel="stylesheet" type="text/css" href='css/handsontable.full.css'>
  <script src='js/jquery-1.11.1.min.js'></script>   //jQueryもお忘れなく
  <script src='js/handsontable.full.js'></script>
</head>

 

続いて handsontable のスクリプトをヘッダ内に書きます。ちなみに今回はデモのソースを解説します。

<script>
$(document).ready(function () {

  var data = [     //表に流し込むデータを定義します。サーバーからJSONなどで持ってきてもOK
      ['', 'Maserati', 'Mazda', 'Mercedes', 'Mini', 'Mitsubishi'],
      ['2009', 0, 2941, 4303, 354, 5814],
      ['2010', 3, 2905, 2867, 412, 5284],
      ['2011', 4, 2517, 4822, 552, 6127],
      ['2012', 2, 2422, 5399, 776, 4151]
    ],
    container = document.getElementById('example'),  //後ほど表を展開する要素を指定
    hot;
  
  hot = new Handsontable(container, {      //以下はデータ指定と表示オプション
    data: data,            //さっき作ったdataを指定
    minSpareRows: 1,       //表の一番下にいくつ空行を表示するか
    colHeaders: true,      //カラムの名前を表示するかどうか
    contextMenu: true      //セルを右クリックしたときのメニューをすべて表示
  });
  
  
  function bindDumpButton() {    //以下は基本的にいじりません
  
      Handsontable.Dom.addEvent(document.body, 'click', function (e) {
  
        var element = e.target || e.srcElement;
  
        if (element.nodeName == "BUTTON" && element.name == 'dump') {
          var name = element.getAttribute('data-dump');
          var instance = element.getAttribute('data-instance');
          var hot = window[instance];
          console.log('data of ' + name, hot.getData());
        }
      });
    }
  bindDumpButton();    //関数実行

});
</script>

 

次は同じ HTML 内に表を展開する要素を書きます

<div id="example" class="handsontable"></div>

これで HTML を表示すると公式デモと同じ表が出て、操作可能となるはずです ヾ(´ω｀)ﾉ

 

 Ajax を使った応用編

最近作ったアプリケーションではサーバーから txt ファイルを読み込み、ユーザーに編集させてまたサーバーへ Ajax で投げ返すということをしました。使った表示オプションやバリデーションもそのまま記載します。

<script>
$(document).ready(function () {
    var data = [
        <c:forEach var="i" items="${ip_list}"> //springフレームワークから配列を読み込み
           {"ipname": "${i}"},                 //jspタグで配列を展開
        </c:forEach>
           {"": ""}
    ];

    //セルのデータにバリデーションをかけたい場合、正規表現を指定↓
    var ip_regexp = /^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})$/;

    var msg = document.getElementById("msg");
    var container = document.getElementById('iptext');
    var hot = new Handsontable(container, {
        data: data,
        colWidths: 400,          //カラム幅をピクセル指定
        currentRowClassName: 'currentRow',   //セルフォーカスを使いたい場合指定　後述
        currentColClassName: 'currentCol',   //セルフォーカスを使いたい場合指定　後述
        minSpareRows: 1,         //表の一番下にいくつ空行を表示するか
        contextMenu: true,　     //セルを右クリックしたときのメニューをすべて表示
        rowHeaders: true,        //行の名前を表示
        colHeaders: true,        //カラムの名前を表示
        colHeaders: ['ipname'],  //カラムの名前を指定
        columns: [
            {data: 'ipname', validator: ip_regexp, allowInvalid: false} //バリデ指定
        ],
        afterChange: function (change, source) {   //以下セル編集後の処理
            $.ajax({
                url: "http://192.168.2.1/rest",  //postするエンドポイントを指定
                dataType: "text",   //textデータをpostする(jsonでもOK)
                type: "POST",       //メソッドをPOSTに指定
                data: {data: change[0][2] + "," + change[0][3]}, //変更前&変更後データ
                success: function () {   //以下編集が成功した後の処理
                    msg.innerText = "設定を保存しました。";
                    $(this).delay(1500).queue(function() {
                       msg.innerText = "変更したいIPをダブルクリックして書き変えてください。";
                       $(this).dequeue();
                    });
                }
            });
         }
    });

    function bindDumpButton() {   //以下は基本的にいじりません
        Handsontable.Dom.addEvent(document.body, 'click', function (e) {
          var element = e.target || e.srcElement;
          if (element.nodeName == "BUTTON" && element.name == 'dump') {
            var name = element.getAttribute('data-dump');
            var instance = element.getAttribute('data-instance');
            var hot = window[instance];
            console.log('data of ' + name, hot.getData());
          }
       });
    }

    bindDumpButton();
});

</script>

 

 クリックしたセルを色フォーカスする

セルをクリックした時にそのセルをフォーカスさせたい場合は CSS に以下を追記します

(handsontable.full.css)

.handsontable .currentRow {
  background-color: #F9F9FB;  //色はご自由に～
}

.handsontable .currentCol {
  background-color: #E7E8EF;  //色はご自由に～
}

 

すると、こんな感じでクリックしたセルがフォーカスされます

hot2

いかがでしたか？今回は Web 上でエクセルのように表データを編集できる『Handsontable』をご紹介しました。このプラグインにはまだまだオプションがありますので、興味がある方は公式のオプションページを参考にしてみてください。

]]> https://cloudear.jp/blog/?feed=rss2&p=483 1