新しくブログを開設しました。

Webエンジニアがデザイナーになってみる。


上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

新しくブログを開設しました。

Webエンジニアがデザイナーになってみる。


今回はdojoライブラリのフォームをつかってみました

ここで気づいたこと

dojoのvalidateチェックはdojox.validateを使わないといけないと思い込んでいました。
しかしsampleがなくて使い方がまだわからなかったので前回の「JSvalidate」を使用しようと思っていたのですが

dojo.formのフォームのプロパティにinvalid messageが存在し、

  required: true
  promptMessage: "名前を入力して下さい。

と設定するとvalidateチェックが入り、未入力の場合は上記メッセージが出力されます。

てことはJSValidateいらなかったかな
自由度もdojoの方が高いし

以下のようにJavascriptを作成します

dojo.require("dijit.form.Form");

var init = function() {

// dijit.form.Formオブジェクトの生成
var sampleForm = new dijit.form.Form({
action: "#",
method: "post"
}, dojo.byId("formcontainer"));

// 名前入力フィールド
var nameField = new dijit.form.ValidationTextBox({
name: "name",
required: true,
invalidMessage: "必須入力です。",
promptMessage: "名前を入力して下さい。"
}, dojo.byId("namefield"));

// 送信ボタン
var submitButton = new dijit.form.Button({
label: "送信"
}, dojo.byId("submitbutton"));

// リセットボタン
var resetButton = new dijit.form.Button({
label: "リセット"
}, dojo.byId("resetbutton"));

// 送信ボタンが押されたときの処理
dojo.connect(submitButton, "onClick", function(e) {
sampleForm.submit();
});

// リセットボタンが押されたときの処理
dojo.connect(resetButton, "onClick", function(e) {
sampleForm.reset();
});
}

dojo.addOnLoad(init);



あとはhtmlで設定したIDで表示するだけ

サンプルを以下に作成しました
http://smileboys.fc2web.com/WebUtility/ajax/dojo/dojo006.html

dojoって簡単かもしれない!
validate checkもふきだしメッセージも
disabledをtrueにすれば非選択も
プロパティの設定ひとつで高機能ボタン等をすぐに作成できる

というかAjaxライブラリは簡単に実装できるように作られてるのかな


以下に他にも使えるフォームの一覧を適当に・・・

dijit.form.Button(params: Object?, srcNodeRef: DomNode|String)
dijit.form.CheckBox(params: Object?, srcNodeRef: DomNode|String)
dijit.form.ComboBox(params: Object?, srcNodeRef: DomNode|String)
dijit.form.ComboBoxMixin()
dijit.form.ComboButton(params: Object?, srcNodeRef: DomNode|String)
dijit.form.CurrencyTextBox(params: Object?, srcNodeRef: DomNode|String)
dijit.form.DateTextBox(params: Object?, srcNodeRef: DomNode|String)
dijit.form.DropDownButton(params: Object?, srcNodeRef: DomNode|String)
dijit.form.FilteringSelect(params: Object?, srcNodeRef: DomNode|String)
dijit.form.HorizontalRuleLabels(params: Object?, srcNodeRef: DomNode|String)
dijit.form.HorizontalSlider(params: Object?, srcNodeRef: DomNode|String)
dijit.form.MappedTextBox(params: Object?, srcNodeRef: DomNode|String)
dijit.form.MultiSelect(params: Object?, srcNodeRef: DomNode|String)
dijit.form.NumberSpinner(params: Object?, srcNodeRef: DomNode|String)
dijit.form.NumberTextBox(params: Object?, srcNodeRef: DomNode|String)
dijit.form.NumberTextBoxMixin()
dijit.form.RadioButton(params: Object?, srcNodeRef: DomNode|String)
dijit.form.RangeBoundTextBox(params: Object?, srcNodeRef: DomNode|String)
dijit.form.SimpleTextarea(params: Object?, srcNodeRef: DomNode|String)
dijit.form.Textarea(params: Object?, srcNodeRef: DomNode|String)
dijit.form.TextBox(params: Object?, srcNodeRef: DomNode|String)
dijit.form.TimeTextBox(params: Object?, srcNodeRef: DomNode|String)
dijit.form.ToggleButton(params: Object?, srcNodeRef: DomNode|String)
dijit.form.ValidationTextBox()
dijit.form.VerticalRule(params: Object?, srcNodeRef: DomNode|String)
dijit.form.VerticalRuleLabels(params: Object?, srcNodeRef: DomNode|String)
dijit.form.VerticalSlider(params: Object?, srcNodeRef: DomNode|String)
スポンサーサイト
<<dojoライブラリでアコーディオンメニューを作ってみた | ホーム | dojoライブラリでドラッグ&ドロップ!>>

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://kanamehackday.blog17.fc2.com/tb.php/121-07671e23
この記事にトラックバックする(FC2ブログユーザー)
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。