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)) {