2014年12月11日木曜日

Nested tables from json | 入れ子になったJSONデータを表にする

Nested tables from json



index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style type="text/css">
table {
  font-family: "Helvetica", "Lucida Sans", "Lucida Sans Unicode", "Luxi Sans", Tahoma, sans-serif;
  box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
  border-collapse: collapse;
  border-spacing: 0;
}
table {
  margin: auto;
}
table, td, th {
  padding: 7px;
  text-align: center;
  border: 1px solid rgb(8,48,107);
}
th {
  background-color: rgb(8,81,156);
  color: white;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.js"></script><script>
jdata = [
    {
        "name":"bob",
        "salary":13000,
        "friends":[
            {
                "name": "sarah",
                "salary":10000
            },
            {
                "name": "bill",
                "salary":5000
            }
        ]
    },
    {
        "name":"marge",
        "salary":10000,
        "friends":[
            {
                "name": "rhonda",
                "salary":10000
            },
            {
                "name": "mike",
                "salary":5000,
                "hobbies":[
                    {
                        "name":"surfing",
                        "frequency":10
                    },
                    {
                        "name":"surfing",
                        "frequency":15
                    }
                ]
            }
        ]
    },
    {
        "name":"joe",
        "salary":10000,
        "friends":[
            {
                "name": "harry",
                "salary":10000
            },
            {
                "name": "sally",
                "salary":5000
            }
        ]
    }
];


d3.select("body").selectAll("table")
    .data([jdata])
  .enter().append("table")
    .call(recurse);

function recurse(sel) {
  // sel is a d3.selection of one or more empty tables
  sel.each(function(d) {
    // d is an array of objects
    var colnames,
        tds,
        table = d3.select(this);

    // obtain column names by gathering unique key names in all 1st level objects
    // following method emulates a set by using the keys of a d3.map()
    colnames = d                                                          // array of objects
        .reduce(function(p,c) { return p.concat(d3.keys(c)); }, [])       // array with all keynames
        .reduce(function(p,c) { return (p.set(c,0), p); }, d3.map())      // map with unique keynames as keys
        .keys();                                                          // array with unique keynames (arb. order)

    // colnames array is in arbitrary order
    // sort colnames here if required

    // create header row using standard 1D data join and enter()
    table.append("thead").append("tr").selectAll("th")
        .data(colnames)
      .enter().append("th")
        .text(function(d) { return d; });

    // create the table cells by using nested 2D data join and enter()
    // see also http://bost.ocks.org/mike/nest/
    tds = table.append("tbody").selectAll("tr")
        .data(d)                            // each row gets one object
      .enter().append("tr").selectAll("td")
        .data(function(d) {                 // each cell gets one value
          return colnames.map(function(k) { // for each colname (i.e. key) find the corresponding value
            return d[k] || "";              // use empty string if key doesn't exist for that object
          });
        })
      .enter().append("td");

    // cell contents depends on the data bound to the cell
    // fill with text if data is not an Array
    tds.filter(function(d) { return !(d instanceof Array); })
        .text(function(d) { return d; });
    // fill with a new table if data is an Array
    tds.filter(function(d) { return (d instanceof Array); })
        .append("table")
        .call(recurse);
  });
}
</script>

2014年12月8日月曜日

ブラウザ・OSを検出してJSON化できるjQueryプラグイン「PgwBrowser」

ブラウザ・OSを検出してJSON化できるjQueryプラグイン「PgwBrowser」

http://pgwjs.com/pgwbrowser/

PgwBrowser has found:
{
   "userAgent": "Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36",
   "browser": {
      "name": "Chrome",
      "group": "Chrome",
      "fullVersion": "39.0.2171.71",
      "majorVersion": 39,
      "minorVersion": 0
   },
   "viewport": {
      "width": 1265,
      "height": 707,
      "orientation": "landscape"
   },
   "os": {
      "name": "Windows 7",
      "group": "Windows",
      "fullVersion": "7.0",
      "majorVersion": 7,
      "minorVersion": 0
   }
}

2014年12月3日水曜日

HTML5の新要素をjQueryでappendとかするとIEでバグる件 - Webtech Walker

HTML5の新要素をjQueryでappendとかするとIEでバグる件 - Webtech Walker

IE8でjQueryのhtml()メソッドがエラー

HTML の <head> 内の <title> の中身を jQuery で以下のように変更しようとすると、
IE8 でエラー「予期しないメソッドの呼び出し、またはプロパティ アクセスです。」
になります。

    $("title").html("新しいタイトル"); または $("title").text("新しいタイトル");

このようなときは、

    document.title = "新しいタイトル";

とします。



   $("h1").html("新しいh1タイトル");

でエラーとなるときは、

   $("h1").empty().html("新しいh1タイトル");

としたらOKでした。

参考
http://js.studio-kingdom.com/jquery/manipulation/html

2014年11月28日金曜日

ObjGen - Live JSON Generator

ObjGen - Live JSON Generator




















// Model & generate Live JSON data values
// interactively using a simple syntax.
// String is the default value type
product = Live JSON generator

// Number, Date & Boolean are also supported
// Specify types after property names
version n = 3.1
releaseDate d = 2014-06-25
demo b = true

// Tabs or spaces define complex values
person
  id number = 12345
  name = John Doe
  phones
    home = 800-123-4567
    mobile = 877-123-1234

  // Use [] to define simple type arrays
  email[] s = jd@example.com, jd@example.org
  dateOfBirth d = 1980-01-02
  registered b = true

  // Use [n] to define object arrays
  emergencyContacts[0]
    name s = Jane Doe
    phone s = 888-555-1212
    relationship = spouse
  emergencyContacts[1]
    name s = Justin Doe
    phone s = 877-123-1212
    relationship = parent

// See our Help page for additional info
// We hope you enjoy the tool!



{
  "product": "Live JSON generator",
  "version": 3.1,
  "releaseDate": "2014-06-25T00:00:00.000Z",
  "demo": true,
  "person": {
    "id": 12345,
    "name": "John Doe",
    "phones": {
      "home": "800-123-4567",
      "mobile": "877-123-1234"
    },
    "email": [
      "jd@example.com",
      "jd@example.org"
    ],
    "dateOfBirth": "1980-01-02T00:00:00.000Z",
    "registered": true,
    "emergencyContacts": [
      {
        "name": "Jane Doe",
        "phone": "888-555-1212",
        "relationship": "spouse"
      },
      {
        "name": "Justin Doe",
        "phone": "877-123-1212",
        "relationship": "parent"
      }
    ]
  }
}


Free Web & Mobile (iOS, Android) Prototyping and UI Mockup Tool | InVision

Free Web & Mobile (iOS, Android) Prototyping and UI Mockup Tool | InVision


JSON 2 HTML

JSON 2 HTML




jQueryカレンダープラグイン CLNDR.js

CLNDR.js




HTMLテーブルにフィルタリング機能を実装する「Filterable」 - Tecuration .com

HTMLテーブルにフィルタリング機能を実装する「Filterable」 - Tecuration .com



screenshot254

たったの1行でwysiwygエディタを実装できる「bootstrap-wysihtml5」

たったの1行でwysiwygエディタを実装できる「bootstrap-wysihtml5」 - Tecuration .com



screenshot342

Sort, Filter, Edit!多機能なtableを実装できる「Smart Table」

Sort, Filter, Edit!多機能なtableを実装できる「Smart Table」 - Tecuration .com



screenshot210

2014年11月26日水曜日

JavaScript 連想配列のキーを取得するには

JavaScript 連想配列のキーを取得する方法

var sampleArray = { "First":"0001", "Second":"0002", "Third":"0003" };
for (var key in sampleArray) {
  alert(key +" : "+ sampleArray[key] );
}


出力結果

First : 0001

Second : 0002

Third : 0003

2014年11月25日火曜日

table-cellの場合の英単語途中改行

CSS

#stepDiv .stepText {
  display:table-cell;
  vertical-align:middle;
  width:187px;
  max-width:187px; /*table-cellの場合、英単語途中改行にはmax-width必要*/
  word-break: break-all; /*英単語途中改行IE9*/
  word-wrap: break-word; /*英単語途中改行*/
  overflow:hidden;
}

jQuery vs MooTools: 偉大な2つの JavaScript を選択する

jQuery vs MooTools: 偉大な2つの JavaScript を選択する

2014年11月20日木曜日

WordPressのデータ移転方法

WordPressのデータ移転方法

WordPressで社内専用サイトの構築

WordPressで社内専用サイトの構築



1. 社内専用のサイトを作成するためには、User Role Editotというプラグインと、User Acess Managerというプラグインを使えば簡単に構築することが出来ます。



20. そこで、WordPress Access Controlというプラグインでサイト全体にアクセス制限をかけることも出来ます。WordPress Access Controlを簡単に紹介します。

2014年11月19日水曜日

jQueryを使ってテーブルのセルをクリックしたときに編集できるようにする(Edit in Place)

jQueryを使ってテーブルのセルをクリックしたときに編集できるようにする(Edit in Place)

(function(documet){
 
    $(document).ready(function(){
    $("#edit-table > tbody > tr > td").click(edit_toggle());
    });


    function edit_toggle(){
        var edit_flag=false;
        return function(){
            if(edit_flag) return;
            var $input = $("<input>").attr("type","text").val($(this).text());
            $(this).html($input);
         
            $("input", this).focus().blur(function(){
                save(this);
                $(this).after($(this).val()).unbind().remove();
                edit_flag = false;
            });
            edit_flag = true;
        }
    }  
 
    function save(elm){
        alert("「"+$(elm).val()+"」を保存しました"); //保存する処理をここに書く
    }
})(document);

jTable.org - A JQuery plugin to create AJAX based CRUD tables

jTable.org - A JQuery plugin to create AJAX based CRUD tables



データベース連動型のAjaxを使ったテーブル実装jQueryプラグイン「jTable」
CRUDの操作が可能でその場で編集、削除といった作業ができるのは便利です

文字列を省略して「…」を付与する方法

文字列を省略して「…」を付与する方法 – CSS/jQuery | Developers.IO



CSS

1
2
3
4
5
6
7
8
9
/* overflow:hidden、heightは必ず指定する */
.textOverflowTest3 {
    overflow: hidden;
    border: 1px solid #ccc;
    padding: 10px;
    width: 400px;
    height: 80px;
    background: #eee;
}

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
jQuery(function($) {
    $('.textOverflowTest3').each(function() {
        var $target = $(this);
        // オリジナルの文章を取得する
        var html = $target.html();
        // 対象の要素を、高さにautoを指定し非表示で複製する
        var $clone = $target.clone();
        $clone
            .css({
                display: 'none',
                position : 'absolute',
                overflow : 'visible'
            })
            .width($target.width())
            .height('auto');
        // DOMを一旦追加
        $target.after($clone);
        // 指定した高さになるまで、1文字ずつ消去していく
        while((html.length > 0) && ($clone.height() > $target.height())) {
            html = html.substr(0, html.length - 1);
            $clone.html(html + '...');
        }
        // 文章を入れ替えて、複製した要素を削除する
        $target.html($clone.html());
        $clone.remove();
    });
});
table-cell などの場合、$target.height() を固定値にするとよい。
while((html.length > 0) && ($clone.height() > $target.height())) {

while((html.length > 0) && ($clone.height() > 60)) {