JinHo-Dev/WheelPickerJSJinHo-Dev/WheelPickerJS
WheelPicker is web-based UI project that improves consistent experiencing of selecting options between various platforms.
It interacts with user by various ways: flicking, clicking and even scrolling.
Reading this document, you will find out how easy it is to apply this beautiful UI to your projects.
WheelPicker는 다양한 플랫폼 간 선택상자에 대한 사용자의 일관적인 경험을 위해 만들어진 웹기반 선택상자 UI 프로젝트입니다.
터치, 클릭 및 스크롤의 다양한 방식으로 조작할 수 있습니다.
이 문서를 읽고나면, 이 세련된 UI를 어떻게 웹프로젝트에 적용할 수 있는지 알게 될 것입니다.
WheelPickerは、さまざまなクロスプラットフォーム選択ボックスに対するユーザーの一貫した経験のために作成されたWebベースの選択ボックスUIプロジェクトです。
タッチ、クリック、スクロールのさまざまな方法で操作できます。
この記事を読んだら、このスタイリッシュなUIをどのようにWebプロジェクトに適用できるかを知ることができます。
If you know some basic HTML tags, you don't have to study new things at all.
All you have to do is making a new DIV object that contains your SELECT object.
Then name the DIV's className as "WheelPicker".
That's it!
몇가지 간단한 HTML 태그를 사용할 줄 안다면 그것으로 충분합니다.
DIV를 하나 만들고 그 안에 원하는 SELECT 오브젝트를 구성하세요.
DIV의 클래스네임은 "WheelPicker"로 해주세요.
완성!
いくつかの簡単なHTMLタグを使用することを知っていればそれで十分です。
DIVを1つ作成し、その中に必要なSELECTオブジェクトを設定します。
DIVのクラス名は「WheelPicker」にしてください。
完成！
It can combine multiple SELECT objects into one UI.
In its OPTION, "selected" attribute actually works as it is.
If you assign "infinite" attribute to the SELECT object, its options are recursive and can scroll infinitely.
Here's an example code.
<div class="WheelPicker" style="width: 200px;">
<select>
<option> 1 </option>
<option selected> 2 </option>
<option> 3 </option>
</select>
<select infinite>
<option> A </option>
<option> B </option>
<option> C </option>
</select>
</div>
SELECT 여러개를 하나로 묶을 수도 있습니다.
OPTION에 "selected" 속성을 부여하더라도 예상대로 잘 작동됩니다.
SELECT에 "infinite" 속성을 부여하면 옵션이 반복적으로 나오게 되며 무한히 스크롤 할 수 있게 됩니다.
다음은 이를 적용한 예시 코드입니다.
<div class="WheelPicker" style="width: 200px;">
<select>
<option> 1 </option>
<option selected> 2 </option>
<option> 3 </option>
</select>
<select infinite>
<option> A </option>
<option> B </option>
<option> C </option>
</select>
</div>
SELECT 複数を1つにまとめることもできます。
OPTIONに "selected"属性を付与しても、期待どおりに機能します。
SELECTに「infinite」属性を付与すると、オプションが繰り返し出てしまい、無限にスクロールできるようになります。
以下は、これを適用したサンプルコードです。
<div class="WheelPicker" style="width: 200px;">
<select>
<option> 1 </option>
<option selected> 2 </option>
<option> 3 </option>
</select>
<select infinite>
<option> A </option>
<option> B </option>
<option> C </option>
</select>
</div>
You can change its theme by changing its style.
Try different colors to its "color" and "background-color".
Let's see in action.
스타일을 변경하여 디자인을 바꿀 수 있습니다.
"color" 나 "background-color" 을 바꾸어 색다른 분위기로 꾸며보세요.
スタイルを変更してデザインを変更できます。
「color」や「background-color」を変えて風変わりな雰囲気にしてみてください。
You might ask how to get its value.
But don't worry.
Just do as you do with SELECT tag.
Even onchange event also triggers when its value changes.
When it comes to changing OPTIONs, you have to execute a single command like this:
[WheelPicker DOM].WheelPicker.reloadAll();
Let's see in action.
자바스크립트로 값을 가져오고 싶다면 어려울 것 없습니다.
그냥 다른 SELECT 에서 하던대로 하면 됩니다.
onchange 이벤트도 예상하는대로 작동할 겁니다.
다만, OPTION 내용을 수정하는 경우에는 다음과 같은 함수 호출이 필요합니다:
[WheelPicker DOM].WheelPicker.reloadAll();
예시를 보도록 하겠습니다.
JavaScriptで値を取得したい場合は難しいことはありません。
ただ他のSELECTでやったようにすればいいです。
onchangeイベントも期待どおりに機能します。
ただし、OPTION 内容を変更する場合には、次のような関数呼び出しが必要です。
[WheelPicker DOM].WheelPicker.reloadAll();
例を見てみましょう。
Some features you expect might missing at this point.
"disabled" attribute, "multiple" attribute, keyboard selecting etc.
If you have an idea to make it better, feel free to contact me.
And any contributions are welcome.
아직 기대하는 모든 기능이 다 있지 않을 겁니다.
"disabled" 속성, "multiple" 속성, 키보드 조작 등.
개선할 점이나 참신한 아이디어가 있다면 부담없이 알려주세요.
또, 기여는 언제나 환영입니다.
まだ期待しているすべての機能がありません。
「disabled」属性、「multiple」属性、キーボード操作など。
改善する点や斬新なアイデアがある場合は、お気軽にお知らせください。
また、貢献はいつも歓迎です。