Demo < mtkng.DialogPad.js >

version : 1.5.0 ( Other versions )

• Specification Change

• Install

• Options

• Demos

• Normal 


<input id="Normal" />
<script>
  $("#Normal").mtkngDialogPad();
</script>

• Title ("Custom") 


<input id="Title" />
<script>
$("#Title").mtkngDialogPad({
    title:"Custom"
});
</script>

• Width and Height 


<input id="WH" />
<script>
$("#WH").mtkngDialogPad({
  title: "Width and Height",
  width: 450,
  height: 500
});
</script>

• Type ("number") 


<input id="Type-Number" />
<script>
$("#Type-Number").mtkngDialogPad({
  title: "Number",
  type: "number"
});
</script>

• Type ("number")
• Mode ("point") 


<input id="Mode-Dotto" />
<script>
$("#Mode-Dotto").mtkngDialogPad({
  title: "Number + point",
  type: "number",
  mode: "point"
});
</script>

• Type ("number")
• Mode ("calculator") 


<input id="Mode-calc" />
<script>
$("#Mode-calc").mtkngDialogPad({
  title: "Number + calculator",
  type: "number",
  mode: "calculator"
});
</script>

• CallBack

Receive the input content by others.



<button id="CallBack-Button" >Open</button><input id="CallBack" />
<script>
$("#CallBack-Button").mtkngDialogPad({
  title:"CallBack",
  setcallback: function(data){
    $("#CallBack").val(data);
  },
  getcallback: function(){
    return $("#CallBack").val();
  }
});
</script>

• CallBack
• Mode ("point")

Receive the input content by others.



<button id="CallBack_point-Button" >Open</button><input id="CallBack_point" />
<script>
$("#CallBack_point-Button").mtkngDialogPad({
  mode:"point",
  title:"CallBack + point",
  setcallback: function(data){
    $("#CallBack_point").val(data);
  },
  getcallback: function(){
    return $("#CallBack_point").val();
  }
});
</script>

• CallBack
• Mode ("calculator")

Receive the input content by others.



<button id="CallBack_calculator-Button" >Open</button><input id="CallBack_calculator" />
<script>
$("#CallBack_calculator-Button").mtkngDialogPad({
  mode:"calculator",
  title:"CallBack + calculator",
  setcallback: function(e){
    $("#CallBack_calculator").val(e);
  },
  getcallback: function(){
    return $("#CallBack_calculator").val();
  }
});
</script>

• Type ("number")
• Mode ("point")
• userKey (true) 


<input id="userKey" />
<script>
$("#userKey").mtkngDialogPad({
  title: "userKey",
  type: "number",
  mode: "point",
  userKey: true
});
</script>

• Type ("kana") 


<input id="Type-Kana" />
<script>
$("#Type-Kana").mtkngDialogPad({
  title: "kana",
  type: "kana"
});
</script>

• Type ("hira")
• Mode ("line") 


<input id="Kana-Line" />
<script>
$("#Kana-Line").mtkngDialogPad({
  title: "kana + row",
  type: "kana",
  mode: "line"
});
</script>

• Type ("kana")
• Mode ("row") 


<input id="Kana-Row" />
<script>
$("#Kana-Row").mtkngDialogPad({
  title: "kana + row",
  type: "kana",
  mode: "row"
});
</script>

• Type ("kana")
• Mode ("rows") 


<input id="Kana-Rows" />
<script>
$("#Kana-Rows").mtkngDialogPad({
  title: "kana + rows",
  type: "kana",
  mode: "rows"
});
</script>

• Type ("hira") 


<input id="Type-Hira" />
<script>
$("#Type-Hira").mtkngDialogPad({
  type: "hira"
});
</script>

• Type ("hira")
• Mode ("line") 


<input id="Hira-Line" />
<script>
$("#Hira-Line").mtkngDialogPad({
  title: "hira + row",
  type: "hira",
  mode: "line"
});
</script>

• Type ("hira")
• Mode ("row") 


<input id="Hira-Row" />
<script>
$("#Hira-Row").mtkngDialogPad({
  title: "hira + row",
  type: "hira",
  mode: "row"
});
</script>

• Type ("hira")
• Mode ("rows") 


<input id="Hira-Rows" />
<script>
$("#Hira-Rows").mtkngDialogPad({
  title: "hira + rows",
  type: "hira",
  mode: "rows"
});
</script>