jQuery.fn.flick

laphroaig

2010-08-04 23:56:57

License: MIT License

Fork: 1

Fav: 6

View: 6612

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 192 lines
HTML 2 lines
CSS 110 lines

【マウスでフリック入力】
TODO

jQuery.fn.flick
jQuery.fn.getTextRange
jQuery v1.4.2

// 【マウスでフリック入力】
//
// TODO
// ・ひらがな以外も入力可能にする

(function($){

$.fn.flick = function(option){
  return new Flick(this, option);
};

$.fn.flick.defaults = {
  classPrefix: "flick-"
};

})(jQuery);

if (location.pathname == "/laphroaig/jquery.fn.flick") {
  $("#text").flick().show();
}

jQuery.fn.flick

body {
  padding: 10px 50px;
}

.flick-root {
  margin: 0;
  background-color: #dddddd;
  border: 1px outset #000000;
  box-shadow: 5px 5p 5px #000000;
  -moz-box-shadow: 5px 5px 5px #000000;
}

.flick-keys {
  position: relative;
  margin: 5px;
  width: 50px;
  height: 50px;
}

.flick-mode-key {
  background-color: #ffeeee;
}

.flick-mode-key.flick-key-0 {
  font-size: 12px;
}

.flick-key {
  width: 50px;
  height: 50px;
  font-size: 20px;
}

.flick-key.hover {
  background-color: #ccccff;
}

.flick-key-base,
.flick-key-min,
.flick-key-han,
.flick-key-daku {
  display: none;
}

.flick-mode-base .flick-key-base.flick-key-0,
.flick-mode-base .flick-keys-active .flick-key-base,
.flick-mode-min .flick-key-min.flick-key-0,
.flick-mode-min .flick-keys-active .flick-key-min,
.flick-mode-han .flick-key-han.flick-key-0,
.flick-mode-han .flick-keys-active .flick-key-han,
.flick-mode-daku .flick-key-daku.flick-key-0,
.flick-mode-daku .flick-keys-active .flick-key-daku,
.flick-keys-active .flick-mode-key {
  display: block;
}

.flick-key-1,
.flick-key-2,
.flick-key-3,
.flick-key-4 {
  display: none;
  position: absolute;
}

.flick-key-1 {
  top: 0;
  left: -50px;
}

.flick-key-2 {
  top: -50px;
  left: 0;
}

.flick-key-3 {
  right: -50px;
  top: 0;
}

.flick-key-4 {
  bottom: -50px;
  left: 0;
}

.flick-keys-active .flick-key-0,
.flick-keys-active .flick-key-1,
.flick-keys-active .flick-key-2,
.flick-keys-active .flick-key-3,
.flick-keys-active .flick-key-4 {
  font-weight: bold;
  z-index: 5000;
  border: 3px solid #000000;
}

.flick-keys-active .flick-key-1 {
  border-right: none;
}

.flick-keys-active .flick-key-2 {
  border-bottom: none;
}

.flick-keys-active .flick-key-3 {
  border-left: none;
}

.flick-keys-active .flick-key-4 {
  border-top: none;
}

【マウスでフリック入力】 TODO// 【マウスでフリック入力】 // // TODO // ・ひらがな以外も入力可能にする (function($){ $.fn.flick = function(option){ return new Flick(this, option); }; var Flick = function($target, option){this.init($target, option);}; Flick.prototype = { init: function($target, option){ this._$target = $target; this._option = {}; $.extend(this._option, $.fn.flick.defaults, option); this._modes = ["base", "min", "daku", "han"]; this._map = [ [{base: ["あ", "い", "う", "え", "お"], min: ["ぁ", "ぃ", "ぅ", "ぇ", "ぉ"]}, {base: ["か", "き", "く", "け", "こ"], daku: ["が", "ぎ", "ぐ", "げ", "ご"]}, {base: ["さ", "し", "す", "せ", "そ"], daku: ["ざ", "じ", "ず", "ぜ", "ぞ"]}], [{base: ["た", "ち", "つ", "て", "と"], daku: ["だ", "ぢ", "づ", "で", "ど"], min: ["っ"]}, {base: ["な", "に", "ぬ", "ね", "の"]}, {base: ["は", "ひ", "ふ", "へ", "ほ"], daku: ["ば", "び", "ぶ", "べ", "ぼ"], han: ["ぱ", "ぴ", "ぷ", "ぺ", "ぽ"]}], [{base: ["ま", "み", "む", "め", "も"]}, {base: ["や", null, "ゆ", null, "よ"], min: ["ゃ", null, "ゅ", null, "ょ"]}, {base: ["ら", "り", "る", "れ", "ろ"]}], [{mode: ["min:<sup>゛゜</sup>小", "daku:゛", "han:゜", "base:あ", null]}, {base: ["わ", "を", "ん", "ー", "　"]}, {base: ["、", "。", "?", "!"]}] ]; this._$root = null; this._initElements(); this._initEvents(); }, show: function(){ this._$root.show(); return this; }, hide: function(){ this._$root.hide(); return this; }, end: function(){ return this._$target; }, getClassName: function(className){ return this._option.classPrefix + className; }, _initElements: function(){ this._$root = $("<table>") .hide() .addClass(this.getClassName("root")) .addClass(this.getClassName("mode-base")) .insertAfter(this._$target); var self = this; $(this._map).each(function(i, row){ var $tr = $("<tr>").appendTo(self._$root); $(row).each(function(i, col){ var $td = $("<td>").appendTo($tr); var $keys =$("<div>") .addClass(self.getClassName("keys")) .appendTo($td); $(self._modes).each(function(i, mode){ $(col[mode]).each(function(i, key){ if (key == null) return; $("<button>") .html(key) .addClass(self.getClassName("key")) .addClass(self.getClassName("key-" + mode)) .addClass(self.getClassName("key-" + i)) .appendTo($keys); }); }); $(col.mode).each(function(i, key){ if (key == null) return; var data = key.split(":"); $("<button>") .html(data[1]) .addClass(self.getClassName("key")) .addClass(self.getClassName("key-" + i)) .addClass(self.getClassName("mode-key")) .addClass(self.getClassName("mode-key-" + data[0])) .appendTo($keys); }); }); }); }, _initEvents: function(){ this._$root .delegate("." + this.getClassName("key"), "mouseover", $.proxy(this._onMouseoverKey, this)) .delegate("." + this.getClassName("key"), "mouseout", $.proxy(this._onMouseoutKey, this)) .delegate("." + this.getClassName("key-0"), "mousedown", $.proxy(this._onMousedownKey, this)); }, _createKey: function(value, mode){ }, _onMouseoverKey: function(ev){ $(ev.target).addClass("hover"); }, _onMouseoutKey: function(ev){ $(ev.target).removeClass("hover"); }, _onMousedownKey: function(ev){ var $target = $(ev.target); $target.parent("." + this.getClassName("keys")) .addClass(this.getClassName("keys-active")); $(document).bind("mouseup", $.proxy(this._onMouseup, this)); return false; }, _onMouseup: function(ev){ var self = this; $(document.body).unbind("mouseup", $.proxy(this._onMouseup)); var $target = $(ev.target); var $keys = $target.parent("." + this.getClassName("keys")); if ($keys.hasClass(this.getClassName("keys-active"))) { if ($target.hasClass(this.getClassName("mode-key"))) { var currentMode = ""; $(this._modes).each(function(i, mode){ if ($target.hasClass(self.getClassName("mode-key-" + mode))) { self._$root.addClass(self.getClassName("mode-" + mode)); } else { self._$root.removeClass(self.getClassName("mode-" + mode)); } }); } else { if ($.browser.msie) { var range = document.selection.createRange(); range.text = $target.html(); range.select(); } else { var value = this._$target.val(); rangeObj = this._$target.getTextRange(); this._$target.val(value.substr(0, rangeObj.start) + $target.html() + value.substr(rangeObj.start)) .setTextRange(rangeObj.start + 1); } var baseClassName = this.getClassName("mode-base"); var removeClassNames = $(this._modes).map(function(){ var className = self.getClassName("mode-" + this); if (className != baseClassName) { return className; }; }); this._$root.removeClass(removeClassNames.get().join(" ")) .addClass(baseClassName); } } this._$root.find("." + this.getClassName("keys")) .removeClass(this.getClassName("keys-active")); return false; } }; $.fn.flick.defaults = { classPrefix: "flick-" }; })(jQuery); if (location.pathname == "/laphroaig/jquery.fn.flick") { $("#text").flick().show(); } <textarea id="text"></textarea> body { padding: 10px 50px; } .flick-root { margin: 0; background-color: #dddddd; border: 1px outset #000000; box-shadow: 5px 5p 5px #000000; -moz-box-shadow: 5px 5px 5px #000000; } .flick-keys { position: relative; margin: 5px; width: 50px; height: 50px; } .flick-mode-key { background-color: #ffeeee; } .flick-mode-key.flick-key-0 { font-size: 12px; } .flick-key { width: 50px; height: 50px; font-size: 20px; } .flick-key.hover { background-color: #ccccff; } .flick-key-base, .flick-key-min, .flick-key-han, .flick-key-daku { display: none; } .flick-mode-base .flick-key-base.flick-key-0, .flick-mode-base .flick-keys-active .flick-key-base, .flick-mode-min .flick-key-min.flick-key-0, .flick-mode-min .flick-keys-active .flick-key-min, .flick-mode-han .flick-key-han.flick-key-0, .flick-mode-han .flick-keys-active .flick-key-han, .flick-mode-daku .flick-key-daku.flick-key-0, .flick-mode-daku .flick-keys-active .flick-key-daku, .flick-keys-active .flick-mode-key { display: block; } .flick-key-1, .flick-key-2, .flick-key-3, .flick-key-4 { display: none; position: absolute; } .flick-key-1 { top: 0; left: -50px; } .flick-key-2 { top: -50px; left: 0; } .flick-key-3 { right: -50px; top: 0; } .flick-key-4 { bottom: -50px; left: 0; } .flick-keys-active .flick-key-0, .flick-keys-active .flick-key-1, .flick-keys-active .flick-key-2, .flick-keys-active .flick-key-3, .flick-keys-active .flick-key-4 { font-weight: bold; z-index: 5000; border: 3px solid #000000; } .flick-keys-active .flick-key-1 { border-right: none; } .flick-keys-active .flick-key-2 { border-bottom: none; } .flick-keys-active .flick-key-3 { border-left: none; } .flick-keys-active .flick-key-4 { border-top: none; }

Play on jsdo.it games
- Author
- Share
- ブログに埋め込む
- QR
- Tag
Download

Complete!

Description What kind of game?

Control Device

	Smartphone Controllerjsdo.it WebSocket Controller»
	Mouse
	Keyboard
	Touch Device

Fullscreen

Activated
Inactivated

jsdo.it games から削除する Submit

laphroaig

URL
http://jsdo.it/laphroaig

Size

Width: px
Height: px

code

<script type="text/javascript" src="http://jsdo.it/blogparts/j2SQ/js"></script>

QR Code

Discussion

Questions on this code?

Favorite by

demouth

paq

tetsuwo:

flick keyboard

Thy:

あとこのことあん .. im learning japanese :D (rosseta stone) ... thx!

hokaccha:

jquery library

clockmaker:

期待

Forked

sort by

forked: jQuery.fn.flick

funkymusicbo

193/2/110
- flick
- jquery
- plugin
- ui

forked: jQuery.fn.flick

hat

193/2/110
- flick
- jquery
- plugin
- ui

forked: jQuery.fn.flick

hat

193/2/110
- flick
- jquery
- plugin
- ui

forked: jQuery.fn.flick

hat

193/2/110
- flick
- jquery
- plugin
- ui

jQuery.fn.flick

Description What kind of game?

Control Device

Fullscreen

Author

Default Panel

Size

code

Discussion

Tags

Favorite by

Forked