RWD-table sample javascript

2016.11.10 Thursday 23:55
0
    <html>
    <head>
    <meta charset="utf-8" />

    <title>Responsive tables</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, minimal-ui">
    <meta name="format-detection" content="telephone=no">
    <meta name="description" content="An awesome solution for responsive tables with complex data.">

    <!-- Font Awesome -->
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

    <!-- Latest compiled and minified Bootstrap CSS -->
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="rwd-table.css">

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="http://localhost/testjs/examples/rwd-table.js"></script>

    </head>

    <body>


    <!--&#91;if lt IE 7 &#93;> <html lang="en" class="no-js lt-ie10 lt-ie9 lt-ie8 lt-ie7"> <!&#91;endif&#93;-->
    <!--&#91;if IE 7 &#93;> <html lang="en" class="no-js lt-ie10 lt-ie9 lt-ie8"> <!&#91;endif&#93;-->
    <!--&#91;if IE 8 &#93;> <html lang="en" class="no-js lt-ie10 lt-ie9"> <!&#91;endif&#93;-->
    <!--&#91;if IE 9 &#93;> <html lang="en" class="no-js lt-ie10"> <!&#91;endif&#93;-->
    <!--&#91;if (gt IE 9)|!(IE)&#93;><!--> <html lang="en" class="no-js"> <!--<!&#91;endif&#93;-->


    <h2>Responsive Table with RWD-Table-Patterns</h2>

    <div class="container">
    <div class="row">
    <div class="col-xs-12">

    <div class="table-responsive" data-pattern="priority-columns">
    <table class="table table-small-font table-bordered table-striped">
    <thead>
    <tr>
    <th>Country</th>
    <th data-priority="1">Languages</th>
    <th data-priority="2">Population</th>
    <th data-priority="3">Median Age</th>
    <th data-priority="4">Area (Km)</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>Argentina</td>
    <td>Spanish (official), English, Italian, German, French</td>
    <td>41,803,125</td>
    <td>31.3</td>
    <td>2,780,387</td>
    </tr>
    <tr>
    <td>Australia</td>
    <td>English 79%, native and other languages</td>
    <td>23,630,169</td>
    <td>37.3</td>
    <td>7,739,983</td>
    </tr>
    <tr>
    <td>Greece</td>
    <td>Greek 99% (official), English, French</td>
    <td>11,128,404</td>
    <td>43.2</td>
    <td>131,956</td>
    </tr>
    <tr>
    <td>Luxembourg</td>
    <td>Luxermbourgish (national) French, German (both administrative)</td>
    <td>536,761</td>
    <td>39.1</td>
    <td>2,586</td>
    </tr>
    <tr>
    <td>Russia</td>
    <td>Russian, others</td>
    <td>142,467,651</td>
    <td>38.4</td>
    <td>17,076,310</td>
    </tr>
    <tr>
    <td>Sweden</td>
    <td>Swedish, small Sami- and Finnish-speaking minorities</td>
    <td>9,631,261</td>
    <td>41.1</td>
    <td>449,954</td>
    </tr>
    </tbody>
    </table>
    </div><!--end of .table-responsive-->
    </div>
    </div>
    </div>
    </body>
    </html>
    ★★★★★
    <html>
    <head>
    <meta charset="utf-8" />

    <title>Responsive tables</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, minimal-ui">
    <meta name="format-detection" content="telephone=no">
    <meta name="description" content="An awesome solution for responsive tables with complex data.">

    <!-- Font Awesome -->
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

    <!-- Latest compiled and minified Bootstrap CSS -->
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/rwd-table.min.css">

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/rwd-table.js"></script>

    </head>

    <body>

    <div class="table-responsive" data-pattern="priority-columns">
    <table class="table table-small-font table-bordered table-striped">
    <thead>
    <tr>
    <th>Company</th>
    <th data-priority="1">Last Trade</th>
    <th data-priority="3">Trade Time</th>
    <th data-priority="1">Change</th>
    <th data-priority="3">Prev Close</th>
    <th data-priority="3">Open</th>
    <th data-priority="6">Bid</th>
    <th data-priority="6">Ask</th>
    <th data-priority="6">1y Target Est</th>
    <th data-priority="6">Lorem</th>
    <th data-priority="6">Ipsum</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <th>GOOG <span class="co-name">Google Inc.</span></th>
    <td>597.74</td>
    <td>12:12PM</td>
    <td>14.81 (2.54%)</td>
    <td>582.93</td>
    <td>597.95</td>
    <td>597.73 x 100</td>
    <td>597.91 x 300</td>
    <td>731.10</td>
    <td colspan="2">Spanning cell</td>
    </tr>
    ...
    </tbody>
    </table>
    </div>

    <script>
    $(function() {
    $('#bs-deps').on('hide.bs.collapse show.bs.collapse', function () {
    $('#bs-deps-toggle').children('span').toggleClass('fa-chevron-down').toggleClass('fa-chevron-up');
    })
    });
    </script>
    </body>
    </html>
    category:javascript | by:ittoocomments(0)trackbacks(0) | -

    Nightwatchは、seleniumを使ってNode.jsで書かれたWebアプリケーション自動テストフレームワーク

    2016.10.10 Monday 15:48
    0
      Nightwatchとは?
      Selenium WebDriver APIを使い、Node.jsで書かれたWebアプリケーション/Webサイト用の
      自動テストフレームワーク

      nightwatchで参考になったサイト
      https://www.webprofessional.jp/javascript-functional-testing-nightwatch-js/

      Nightwatch自体はNode.jsモジュールで、Nodeをマシンにインストールする必要があります。
      もっとも簡単な方法はnvmなどのバージョンマネージャーを使用することです。
      Nightwatchはnpmで配布されるので、そのほかのモジュールと同じように、-gでグローバルにインストールするか、
      -save-devで現在のプロジェクト内にインストールします。

      Nightwach.jsはNode.jsベースのE2E(End-to-End)テストフレームワーク
      テストブラウザを操作する仕組みであるSelenium WebDriverのAPIを仲介して各種ブラウザ操作を行い、
      ブラウザの挙動が期待したものと合致しているかをテストするために用います。


      http://blog.mmmcorp.co.jp/blog/2015/09/24/use-nightwatch/
      公式ドキュメントのDeveloper Guideに従ってインストールします。
      必要なステップ
      1 nightwatch本体のインストール
      2 Selenium Server のインストール


      Nightwatch.jsとは
      Nightwatch.jsはNode.js上で動作するエンドツーエンド(E2E)のテストフレームワークのことで、
      Webブラウザーの自動化促進を目的としたプロジェクトSeleniumに依存します。
      ヒューマンフレンドリーな構文を通じて、Nightwatch.jsはブラウザーが自動的に再生する
      「スクリプト」のシナリオを可能にします(必ずしもヘッドレスブラウザーではありません)。


      npm install --save-dev nightwatch
      NightwatchはSelenium WebDriver APIに依存するため、Java上で実行するSelenium WebDriverサーバーを必要とします。
      つまりJava Development Kit(JDK 7+)もインストールする必要があります。JDKはOracleのWebサイトからダウンロードできます。
      ダウンロードしてインストールしたら、java -versionのあるマシン上でJavaを正常に利用できるか確認できます。
      最後のステップは、Seleniumのダウンロードページから
      Seleniumスタンドアロンサーバーパッケージをjarとしてダウンロードすることです。
      パッケージはプロジェクト内のbinフォルダに置いてください

      ・手順
      ・npm install --save-dev nightwatch
      ・selenium-server-standalone-3.0.0-beta3.jar ダウンロード
      ・geckodriverないと怒られる場合がある

      ・selenium サーバー起動
      C:¥xampp¥htdocs¥nightwatch2>java -jar selenium-server-standalone-3.0.0-beta3.jar -port 4444

      ・geckodriver-v0.10.0-win64.zip
      C:¥xampp¥htdocs¥nightwatch2¥geckodriver-v0.10.0-win64.zip

      ・テスト実行方法
      ¥nightwatch2>.¥node_modules¥.bin¥nightwatch tests¥app-spec.js



      ・設定ファイル
      htdocs¥nightwatch2¥nightwatch.json

      {
      "src_folders" : ["tests"],
      "output_folder" : "reports",
      "selenium" : {
      "start_process" : false
      },
      "test_settings" : {
      "default" : {
      "selenium_port" : 4444,
      "selenium_host" : "127.0.0.1",
      "silent": true,
      "screenshots": {
      "enabled" : true,
      "path" : "./reports"
      }
      }
      }
      }

      ・C:¥xampp¥htdocs¥nightwatch2¥tests
      ・app-spec.js
      'use strict';
      module.exports = {
      'Contents test' : function (browser) {
      browser
      .url('http://localhost/webdriver/test2.html')
      .pause(1000)
      .assert.title('Nightwatch.js Demo')
      .assert.containsText('#content', 'Hello, Nightwatch.js!')
      .end();
      }

      };


      ・google.js
      module.exports = {
      'Demo test Google' : function (client) {
      client
      .url('http://www.google.com')
      .waitForElementVisible('body', 1000)
      .assert.title('Google')
      .assert.visible('input[type=text]')
      .setValue('input[type=text]', 'rembrandt van rijn')
      .waitForElementVisible('input[name=btnK]', 1000)
      .click('input[name=btnK]')
      .pause(1000)
      .assert.containsText('ol#rso li:first-child',
      'レンブラント・ファン・レイン - Wikipedia')
      .end();
      }
      };

      ・test1.js
      module.exports = {
      "webdriverの検索ヒット数を表示する" : function (browser) {
      var timeoutMSec = 1500;
      browser
      .url("http://www.google.com")
      .setValue('[name="q"]', 'webdriver')
      .click('[name="btnG"]')
      .waitForElementPresent('#resultStats', timeoutMSec)
      .getText('#resultStats', function(res) {
      console.log(res.value);
      })
      .end();
      }
      };
      category:javascript | by:ittoocomments(0)trackbacks(0) | -

      selectboxと連動して表示内容を変える jqueryを使って

      2016.10.09 Sunday 00:25
      0
        selectboxと連動して表示内容を変える jqueryを使って


        <html>
        <head>
        <style type="text/css" title="currentStyle">
        </style>

        <script type="text/javascript" language="javascript" src="./media/js/jquery.js"></script>
        <script type="text/javascript">
        $(function(){
        $('#tr_type select[name="selectbox"]').change(function() {
        if ( $('select[name="selectbox"] option:selected').val() == 'select_type1') {
        $('#display_box1').css('display','block');
        $('#display_box2').css('display','none');
        $('#display_box3').css('display','none');
        $('#display_box4').css('display','none');
        } else if ( $('select[name="selectbox"] option:selected').val() == 'select_type2') {
        $('#display_box1').css('display','none');
        $('#display_box2').css('display','block');
        $('#display_box3').css('display','none');
        $('#display_box4').css('display','none');
        } else if ( $('select[name="selectbox"] option:selected').val() == 'select_type3') {
        $('#display_box1').css('display','none');
        $('#display_box2').css('display','none');
        $('#display_box3').css('display','block');
        $('#display_box4').css('display','none');
        } else if ( $('select[name="selectbox"] option:selected').val() == 'select_type4') {
        $('#display_box1').css('display','none');
        $('#display_box2').css('display','none');
        $('#display_box3').css('display','none');
        $('#display_box4').css('display','block');
        } else {
        $('#display_box1').css('display','none');
        $('#display_box2').css('display','none');
        $('#display_box3').css('display','none');
        $('#display_box4').css('display','none');
        }
        });
        });
        </script>


        </head>
        <body>


        <table>
        <tr id="tr_type">
        <th>タイプ</th>
        <td>
        <select name="selectbox">
        <option value="select_type1">本1
        <option value="select_type2">本2
        <option value="select_type3">本3
        <option value="select_type4">本4
        </select>
        </td>
        </tr>
        </table>

        <div id="display_box1">
        内容1
        </div>
        <div id="display_box2" style="display: none;">
        内容2
        </div>

        <div id="display_box3" style="display: none;">
        内容3
        </div>

        <div id="display_box4" style="display: none;">
        内容4
        </div>

        </body>
        </html>

        category:javascript | by:ittoocomments(0)trackbacks(0) | -

        jQuery Validation Engineで日付の相関チェック

        2016.08.11 Thursday 22:47
        0
          jQuery Validation Engineで日付の相関チェック

          開始日終了日とか
          期間設定とかね

          <label>
          <input value="" class="validate[required,past[#enddate]]" type="text" id="startdate" name="startdate" />
          <input value="" class="validate[required,future[#startdate]]" type="text" id="enddate" name="enddate" />
          </label>
          でOK

          自分でいろいろと、
          jquery.validationEngine.js や
          jquery.validationEngine-ja.js
          の中身を変更することで実現しようとしてんだけど
          その必要すらなかったのね
          start-date and end-date
          category:javascript | by:ittoocomments(0)trackbacks(0) | -

          jqueryによるチェックボックスとセレクト、radioボタン連動

          2016.08.07 Sunday 19:19
          0
            jqueryによるチェックボックスとセレクト、radioボタン連動

            <input type="radio" name="span_select" id="span0" class="radio" value="0" checked="checked" />
            <label for="span0">毎日</label>

            <input type="radio" name="span_select" id="span1" class="radio" value="1" />
            <label for="span1">毎週</label>
            <select name='week1' id="week1" disabled="disabled" style="background-color:#d2d1c6;" >
            <option value='毎週' selected>毎週</option>
            <option value='第1週'>第1週</option>
            <option value='第2週'>第2週</option>
            <option value='第3週'>第3週</option>
            </select>
            <select name='week2' id="week2" disabled="disabled" style="background-color:#d2d1c6;" >
            <option value='月'>月</option>
            <option value='火'>火</option>
            <option value='水'>水</option>
            <option value='木'>木</option>
            </select>


            <input type="radio" name="span_select" id="span2" class="radio" value="2" />
            <label for="span2">毎月</label>
            <select name='month' id="month" disabled="disabled" style="background-color:#d2d1c6;" >
            <option value='1'>1</option>
            <option value='2'>2</option>
            <option value='3'>3</option>
            </select>




            <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
            </script>


            <script type="text/javascript">
            <!--
            $(function() {
            $("[name='span_select']").click(function(){
            var num = $("[name=span_select]:checked").val();
            //alert(num);

            var selectvalue = "" ;
            // 毎週
            if ( num == 1 ){
            $("#week1").removeAttr("disabled");
            $("#week1").css("background-color","#ffffff");
            $("#week2").removeAttr("disabled");
            $("#week2").css("background-color","#ffffff");
            $("#month").attr("disabled", "disabled");
            $("#month").css("background-color","#d2d1c6");
            selectvalue = $('#week1').val() + $('#week2').val();
            // 毎月
            } else if ( num == 2 ){
            $("#week1").attr("disabled", "disabled");
            $("#week1").css("background-color","#d2d1c6");
            $("#week2").attr("disabled", "disabled");
            $("#week2").css("background-color","#d2d1c6");
            $("#month").removeAttr("disabled");
            $("#month").css("background-color","#ffffff");
            selectvalue = $('#month').val();
            // 毎日
            } else {
            $("#week1").attr("disabled", "disabled");
            $("#week1").css("background-color","#d2d1c6");
            $("#week2").attr("disabled", "disabled");
            $("#week2").css("background-color","#d2d1c6");
            $("#month").attr("disabled", "disabled");
            $("#month").css("background-color","#d2d1c6");
            selectvalue = "";
            }
            alert("num[" + num + "]");
            //選択された項目(option)のvalue値取得
            alert("selectvalue[" + selectvalue + "]");

            });
            });
            // -->
            </script>
            category:javascript | by:ittoocomments(0)trackbacks(0) | -

            ad
            Calender
                  1
            2345678
            9101112131415
            16171819202122
            23242526272829
            3031     
            << July 2017 >>
            Selected entry
            PR
            Category
            Archives
            Recent comment
            • マクドナルドでYahoo BBモバイルポイント 公衆無線LANサービスがつながらない
              66hills
            • マクドナルドでYahoo BBモバイルポイント 公衆無線LANサービスがつながらない
              ssd
            • マクドナルドでYahoo BBモバイルポイント 公衆無線LANサービスがつながらない
              max
            • マクドナルドでYahoo BBモバイルポイント 公衆無線LANサービスがつながらない
              DOM
            • マクドナルドでYahoo BBモバイルポイント 公衆無線LANサービスがつながらない
              DOM
            • コンピュータ業界の根本的な変化
              cloud
            • コンピュータ業界の根本的な変化
              Dellの仮想化
            • マクドナルドでYahoo BBモバイルポイント 公衆無線LANサービスがつながらない
              えちごや
            • マクドナルドでYahoo BBモバイルポイント 公衆無線LANサービスがつながらない
              touch
            • マクドナルドでYahoo BBモバイルポイント 公衆無線LANサービスがつながらない
              bob77777
            Recent trackback
            • スマートフォンの法人活用例
              無線LANネットのブログ
            • Yahoo!オークションからのアフィリエイト収入が一気に70%減になってしまい涙目になってる話
              特選情報
            Recommend
            Link
            Profile
            Search
            Others
            Mobile
            qrcode
            Powered
            無料ブログ作成サービス JUGEM