最初に、あなたの人生を簡潔に簡素化し、時間と分を選択できる2つのドロップダウンリストの形式でHTMLハードコードを作成したいという要望がありました。
1.より美しく、便利なインターフェイスを作成する機能
2.現在の時刻を設定/取得するためのこのようなコンポーネントのより便利な使用
3. JavaScriptを使用してコンポーネントの新しいインスタンスを簡単に作成する機能、およびこのコンポーネントの完全な制御
4.優れたトラフィックの節約
それでは始めましょう。 コンポーネントは何をすべきですか：
1.次の形式で時間を受け入れます：H：M、分数（たとえば、125 = 2：05）
2.時間を選択するときに、非表示フィールドに入力して、フォームをサーバーに送信するときに時間を取得できるようにします
3. JavaScriptを使用する-コンポーネントの現在時刻を設定/取得するための関数
開発プロセス全体を検討してください。
1. Dojoがインストールおよび構成されます。 最初に、Dojoが正しくインストールおよび構成されていることを確認してください。 この記事では、インストールと構成のプロセスについては詳しく説明しません。このプロセスはかなりよく文書化されているからです。 Dojoが/ js / dojo / dojoフォルダーにインストールされているとします。
2.コンポーネントと連携するようにDojoを構成します。 Dojoと競合しない別のディレクトリにコンポーネントを配置します。独自のDojoコンポーネントについては、フォルダー/ js / dojo / switlleを作成します
ここで、このフォルダーからコンポーネントを使用するには、このパスを登録する必要があります。 Dojoを接続した直後にこれを行います。
3. Dojo TimeSelectモジュールを作成します。 ここで、次の内容のファイル/js/dojo/switlle/TimeSelect.jsを作成します。
if (!dojo._hasResource["switlle.dojo.TimeSelect"]) {
dojo._hasResource["switlle.dojo.TimeSelect"] = true;
dojo.require("dojo.cache");
dojo.provide("switlle.dojo.TimeSelect");
dojo.declare("switlle.dojo.TimeSelect", [dijit._Widget, dijit._Templated], {
/*
* ,
*
*/
templateString: " : />",
time: '00:00',
timemin: 0,
name: '',
/*
* name
* hiddenFieldNode.
*
*/
attributeMap: {
name: {
node: "hiddenFieldNode",
type: "attribute"
}
},
buildRendering: function () {
this.inherited(arguments);
/**
* .
* HTML .
* , 24-
*/
var thisObj = this;
var hours_dlg = new dijit.TooltipDialog({
content: "<table class='switlle-time-select-hours'><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr><tr><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td><td>22</td><td>23</td><td>00</td></tr></table>",
onOpen: function()
{
dojo.query('.switlle-time-select-hours td', this.containerNode).removeClass('hover');
},
postCreate: function()
{
//
dojo.query('.switlle-time-select-hours td', this.containerNode).forEach(function(el){
dojo.connect(el, 'onclick', function(e) {
hours_button.attr('label', e.target.innerHTML);
hours_dlg.onCancel();
thisObj._onChange();
});
dojo.connect(el, 'onmouseover', function(e) {
dojo.addClass(e.target, 'hover');
});
dojo.connect(el, 'onmouseout', function(e) {
dojo.removeClass(e.target, 'hover');
});
});
}
});
var hours_button = new dijit.form.DropDownButton({
label: '00',
dropDown: hours_dlg
});
this.hoursNode.appendChild(hours_button.domNode);
// ,
this._hours_button = hours_button;
/**
*
* 5
*/
var minutes_dlg = new dijit.TooltipDialog({
content: "<table class='switlle-time-select-minutes'><tr><td>00</td><td>05</td><td>10</td><td>15</td><td>20</td><td>25</td></tr><tr><td>30</td><td>35</td><td>40</td><td>45</td><td>50</td><td>55</td></tr></table>",
onOpen: function()
{
dojo.query('.switlle-time-select-hours td', this.containerNode).removeClass('hover');
},
postCreate: function()
{
//
dojo.query('.switlle-time-select-minutes td', this.containerNode).forEach(function(el){
dojo.connect(el, 'onclick', function(e) {
minutes_button.attr('label', e.target.innerHTML);
minutes_dlg.onCancel();
thisObj._onChange();
});
dojo.connect(el, 'onmouseover', function(e) {
dojo.addClass(e.target, 'hover');
});
dojo.connect(el, 'onmouseout', function(e) {
dojo.removeClass(e.target, 'hover');
});
});
}
});
var minutes_button = new dijit.form.DropDownButton({
label: '00',
dropDown: minutes_dlg
});
this.minutesNode.appendChild(minutes_button.domNode);
// ,
this._minutes_button = minutes_button;
},
/**
* time setter
*/
_setTimeAttr: function(time) {
this.time = time;
var dot = this.time.indexOf(':');
var hours = parseInt(this.time.substring(0, dot));
var minutes = parseInt(this.time.substring(dot+1));
this._hours_button.attr('label', hours);
this._minutes_button.attr('label', minutes);
this._onChange();
},
/**
* time getter
*/
_getTimeAttr: function() {
return this._hours_button.attr('label')+':'+this._minutes_button.attr('label');
},
/**
* timemin setter
*/
_setTimeminAttr: function(seconds) {
this.timemin = seconds;
var hours = parseInt(seconds/60);
var minutes = seconds-hours*60;
if (hours==0)
hours='00';
if (minutes<10)
minutes='0'+minutes;
this.time = hours+':'+minutes;
this._hours_button.attr('label', hours);
this._minutes_button.attr('label', minutes);
this._onChange();
},
/**
* timemin getter
*/
_getTimeminAttr: function() {
return parseInt( this._hours_button.attr('label'))*60+parseInt(this._minutes_button.attr('label'));
},
/**
*
* , onChange,
*
*/
_onChange: function() {
this.hiddenFieldNode.value = this.attr('time');
this.onChange(this);
},
onChange: function(control) {
}
});
}
4.コンポーネントの使用。 コンポーネントを使用するには、まず接続する必要があります。 これを行うには、コンポーネントへのフォルダーへのパスを登録したコードをわずかに変更します。
これで、次のコードをページのレイアウトに追加できます。
/>
または
最初の行に入力タグが含まれ、2番目のスパンに含まれるという事実に注意を払ってはなりません。 タグタグの名前は絶対に再生されません。とにかく、このデザインはテンプレートコンテンツに置き換えられます。 ただし、timeminとtimeの2つの異なる属性により、異なるセッターが発生します。 timeminでは、分数を渡し、時間では、時間の文字列表現を渡します。
また、フォームをサーバーに送信するときに、キー「timeControl」を使用して、GETまたはPOST配列からこのコンポーネントの値を取得できます。
JavaScriptを使用してプログラムでこのコンポーネントを作成するために、多くの作業も必要ありません。
ソフトウェア設定/制御値の読み取り：
最後に、onChangeイベントにサブスクライブします。
使用されるCSS：
.switlle-time-select-hours td, .switlle-time-select-minutes td {
border:1px solid #EEEEEE;
color:#333333;
cursor:pointer;
padding:5px 7px;
text-align:center;
vertical-align:middle;
}
.switlle-time-select-hours td.hover, .switlle-time-select-minutes td.hover {
background-color:#EEEEEE;
border:1px solid #DDDDDD;
}
もちろん、コントロールには時刻の正確さを確認するためのさまざまなチェックを装備することができます。いくつかの追加の装飾が役立つ場合がありますが、これは後で使います。 必要な主な機能が提供されました。