掲示板お問い合わせランダムジャンプ



この広告は30日以上更新がないブログに表示されております。 新しい記事を書くことで広告を消すことができます。

Top Index

2012年09月16日
jQuery UI でオートコンプリート
※今回はVBは関係ありません。
今回はjQuery UI のお話。
公式サイトにあるオートコンプリートデモを触ってみてスゲーと思いましたが、
「あとちょっとこうだったら・・・」という部分があったので手を入れてみました。
具体的には以下のようなことをしたかったのです。

1.選択肢にないものが選べてはいけない。
2.入力値が完全でなくても候補が1つしかないのであれば、自動的にそれとみなす。

これに近いデモがコンボボックスによるオートコンプリートなのですが、
「2」はカバーできていないようです。
これに手を入れるにしても、scriptがやたら長いのでとてもじゃないがやりたくない。
というわけで「Custom data and display」のサンプルに手をいれて、「2」を実装してみました。

で、どうやって実装するか?なんですが、
・テキストボックスのロストフォーカスをフックする。
・入力値をもとにデータソースを検索、HIT数を調べる。
・HIT数が1なら、そのアイテムを選択したとする。
・HIT数が1以外なら、アイテムの選択はなかったものとする。
といういたってシンプルなもの。

実装結果はコレ
autocomplete
ポイントは
・ID、名前(漢字、ひらがな)で都道府県の検索ができる。
・選択候補が1つになったときにロストフォーカスすると、選択したとみなす。
・選択候補が1つでないときにロストフォーカスすると、入力値などが初期化される。

注意点としては、
・テキストボックス編集の有無にかかわらず、ロストフォーカスすると処理が走る。
・リストにないものは選べない。(当たり前ですが)
です。

以下、ソースコードベタ貼りとダウンロード。

続きを読む ...
 
[ 投稿者:mk3008 at 22:22 | jQuery | コメント(0) | トラックバック(0) ]

2012年09月08日
jQueryで表に行を追加したり、削除したりする
※今回はVBは関係ありません。
jQueryの勉強がてらに表の表追加・削除サンプルを作成しましたので、ソースを載っけておきます。
table_edit
ポイントは
・jQueryのバージョンは1.7.2
なお開発環境はVS2010、IE9。
・動的に追加したボタンは、live関数でないとイベントをフックできない
行を追加した時に動的に「-」ボタンを作っているので、
同ボタンのクリックイベントをフックするときに使用しました。
・セレクタに変数を使用
テーブルに追加する行の位置を求めるときに使用しました。

あたりでしょうか。

※イメージを出すため、商品名とか単価とか書いてありますが、検索機能や計算機能はありません。あしからず。

以下、仕様、ソースコードとダウンロード。

続きを読む ...
 
[ 投稿者:mk3008 at 13:25 | jQuery | コメント(0) | トラックバック(0) ]

2012年09月02日
jQueryで横計、縦計を行う
※今回はVBは関係ありません。
jQueryの勉強がてらに金種表入力サンプルを作成しましたので、ソースを載っけておきます。

kinsyu

仕様
・金種の数量を変更(change)すると、入力した金種の合計金額(横計)が計算されます。
また、全金種の合計金額(縦計)も計算されます。
・jQuery1.7.2を使用しています。該当スクリプトのファイルはGoogleAPIを参照しているため、本サンプルを実行するのに同ファイルを用意する必要はありません。
・動作検証はIE9のみです。他のブラウザでの動作保証はありません。

参考サイト
jQuery日本語リファレンス
非常にわかりやすい。
特に「セレクターで要素を選択する」にある、「セレクター書式確認用ツール」はスゴイ!デバッグしやすくなりました。
ちなみに、同ツールを使って、先ほどのサンプルを「#CurrencySpecieDetails tbody tr」でセレクタを走らせると、このような結果になります。わかりやすい!
tool
debug_results
※実際はHITした件数を示すダイアログが出た後、HITした箇所に赤の目印が付きます。

・備考
HTMLはASP.NET MVC3 で生成されたものを流用しているため、命名規則がやたら長ったらしいですが、気にしないでください。


以下、ソースコードをべた張り。

続きを読む ...
 
[ 投稿者:mk3008 at 11:02 | jQuery | コメント(0) | トラックバック(0) ]