jQuery.fn.flick laphroaig Follow 2010-08-04 23:56:57 License: MIT License Fork1 Fav6 View6612 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); }; 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> 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; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? 【マウスでフリック入力】 TODO Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author laphroaig URLhttp://jsdo.it/laphroaig Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/j2SQ/js"></script> flick jquery plugin ui Discussion Questions on this code? Tags flick jquery keyboard library plugin ui Favorite by demouth paq tetsuwo: flickkeyboard Thy: あとこのこと あん .. im learning japanese :D (rosseta stone) ... thx! hokaccha: jquerylibrary clockmaker: 期待 Forked sort by latest page views favorite forked forked: jQuery.fn.flick funkymusicbo 00 586 193/2/110 flick jquery plugin ui forked: jQuery.fn.flick hat 00 786 193/2/110 flick jquery plugin ui forked: jQuery.fn.flick hat 00 464 193/2/110 flick jquery plugin ui forked: jQuery.fn.flick hat 00 606 193/2/110 flick jquery plugin ui 1 2NEXT>>