Demo<mtkng.DialogPad.js>

Demo < mtkng.DialogPad.js >

development version : 1.5.1 ( Other versions )

• Specification Change

• We abolished "result".

• In place, "setcallback" and "getcallback" were prepared.

• Fixed a minor bug in the calculator function.

• Install

When using this plug-in, please load it with the contents described below.

 $<script type="text/javascript" src="https://api.m-tkng.com/js/DialogPad/development/mtkng.DialogPad.js"></script>$

Please load "jQuery" and "jQuery UI" before using this plugin. The recommendations are described below.

 $<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/redmond/jquery-ui.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>$

• Options

The options for this plug-in are described below.

 $$(`id`or`name`or`class`).mtkngDialogPad({
    title: "free text", // defalt "Dialog".
    type: "numbar" or "kana" or "hira", // defalt "numbar".
    mode: "normal", // defalt.
      ` When type is number "normal" or "point" or "calculator" `
      ` when type is kana or hira "normal" or "line" or "row" or "rows" `
    userKey: false, //
    width: 350, // defalt dialog size.
    height: 400, // defalt dialog size.
    setcallback: null, // defalt "null". option function.
    getcallback: null // defalt "null". option function.
});$

• 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>$