投稿

6月, 2014の投稿を表示しています

jQuery eq によるエレメントの取得

イメージ
複数のエレメントが存在する中から特定のものを取得する際には eq() メソッドが便利です。
例えば複数のボタンタグから2番目の要素を取得し、背景色を変更する場合下記のように記述します。
eq の引数は 0 スタートのインデクサを指定します。

Script
$(function () { // 2つ目のボタンの背景色と前景色を変更 $("input:button").eq(1).css({"background-color":"navy", "color":"white"}); });
HTML
<input type="button" value="button" /> <input type="button" value="button" /> <input type="button" value="button" /> <input type="button" value="button" /> <input type="button" value="button" /> 

実行結果

jQuery nth-child による子エレメント取得

jQuery の nth-child を利用してエレメント内に含まれる子エレメントを取得する方法です。

構文:
$(".selector:nth-child(index/even/odd/equation)")


nth-child では引数にインデックス、奇数、偶数、等間隔で子エレメントを取得することができますが、ここでは簡単にインデックス指定の例を紹介します。
例えば HTML Table があり、1列目の全エレメントを取得する場合、$("table tbody tr td:nth-child(1)") となります。

$(function () { $("#button1").click(function () { // 1列目全てのセルにテキストを追加 $("table tbody tr td:nth-child(1)").append("<span> - 1st!</span>"); }) });
もう少し条件を複雑にして、2列目1行目のセルのみを取得する場合、nth-child を tr と td それぞれに指定します。
$(function () { $("#button1").click(function () { // 2列目1行目のセルにテキストを追加 $("table tbody tr:nth-child(1) td:nth-child(2)").append("<span> - target!</span>"); }) });
例として使う HTML Table のレイアウト
<table style="width:300px; border-style:solid;" border="1"> <tr> <td>1-1</td> <td>1-2</td> </tr> <…

ASP.NET FindControl で テンプレート内のコントロールを探し出す

イメージ
ASP.NET のテンプレート機能では、サーバーサイドコントロールの定義を1つ用意しておくことで生成するデータ件数分コントロールを生成してくれます。繰り返し表示されるテーブルのレコードにユーザーコントロールを埋め込んだりするのにとても便利です。例えばこんな感じで TextBox を Repeater の ItemTemplate に1つ用意しておけば、バインドデータの件数分 TextBox を生成してくれます。

<asp:Repeater ID="Repeater1" runat="server"> <ItemTemplate> <asp:TextBox ID="TextBox1" runat="server" Text="<%# Container.DataItem %>"></asp:TextBox> </ItemTemplate> </asp:Repeater>
データをバインドすると、TextBox が繰り返し表示されます。
protected void Page_Load(object sender, EventArgs e) { List<string> values = new List<string>(); values.Add("アイ"); values.Add("マイ"); values.Add("ミー"); values.Add("マイン"); this.Repeater1.DataSource = values; this.Repeater1.DataBind(); }



ただ、テンプレート内に表示されるコントロールのうち、特定のものにアクセスする際に困ることがあります。例えば、特定の TextBox にフォーカスを設定するシナリオを考えてみましょう。単独の TextBox コントロールのようにサーバーサイドで単純に TextBox1.Focus() と指定することがで…

コードビハインドの Focus メソッドと WebForm_AutoFocus メソッド

ASP.NET のコードビハインドで下記コードを呼び出すと、出力結果の TextBox にはフォーカスが設定されています。

protected void Page_Load(object sender, EventArgs e) { this.TextBox1.Focus(); }

これはサーバーサイドでフォーカスを直接当てているのではなく、次の工程を経ているようです。

1.サーバーサイドでフォーカスを行うための JavaScript を生成
2.クライアントサイドで JavaScript を読み込み
3.JavaScript の呼び出し


出力されている HTML を見てみると、WebForm_AutoFocus メソッドが ASP.NET によって自動生成されています。
<script type="text/javascript"> //<![CDATA[ WebForm_AutoFocus('TextBox1');//]]> </script>
WebForm_AutoFocus は ASP.NET が生成する axd の中に記述がありました。確かにこの中を読むと引数で渡されたコントロールにフォーカスを設定しています。

function WebForm_AutoFocus(focusId) { var targetControl; if (__nonMSDOMBrowser) { targetControl = document.getElementById(focusId); } else { targetControl = document.all[focusId]; } var focused = targetControl; if (targetControl && (!WebForm_CanFocus(targetControl)) ) { focused = WebForm_FindFirstFocusableChild(targetControl); } if (focused) { try { …

Epson PC の NumLock が初期状態で ON になっている場合の対策

イメージ
Epson の PC(Endeavor)を購入したのですが、何かと使いにくいことが多いですね。キーボードが押しにくかったり、ハードウェア側で Wifi の ON OFF 切り替えができなかったり・・・。
NumLock に関しても、初動時に ON になってたり、OFF になってたりと動作が不安定です。そこでレジストリから起動時の NumLock の状態を OFF にする方法を調べました。


HKEY_USERS\.DEFAULT\Control Panel\Keyboard を開いて、InitialKeyboardIndicators を探します。



SQLite を使って WordPress を XAMPP にインストール

以下の5つのステップで SQLite を使った WordPress を簡単に作ることができます。

1.リソースのダウンロード

まずは、WordPress 本体と SQLite Integration をダウンロードしてきます。
WordPress
http://ja.wordpress.org/

SQLite Integration
http://wordpress.org/plugins/sqlite-integration/

(こちらにもインストール手順があります。)
SQLite Integration 本家
http://dogwood.skr.jp/wordpress/sqlite-integration-ja/


2.WordPress と SQLite Integration を XAMMP に配置

次に、WordPress と SQLite Integration を XAMMP に配置していきます。xampp は C:\xampp にインストールしている前提で説明していきます。

C:\xampp\htdocs\wordpress の様に WordPress を配置します。
また、ダウンロードした SQLite Integration を展開し、C:\xampp\htdocs\wordpress\wp-content\plugins に解凍したsqlite-integration を配置します。

3.db.php のコピー
sqlite-integration に含まれる db.php を以下フォルダにコピーします。
C:\xampp\htdocs\wordpress\wp-content

4.wp-config.php の設定
C:\xampp\htdocs\wordpress の wp-config-sample.php をコピーもしくはリネームして wp-config.php にします。

wp-config.php の 認証用ユニークキー部分を探し出します。

define('AUTH_KEY', 'put your unique phrase here'); define('SECURE_AUTH_KEY', 'put your unique phrase here'); def…

html5 meter タグを使ってゲージを表示

html5 で導入された meter タグを使って数値、割合を表示してみましょう。

<meter value="70" low="30" max="100" high="90" optimum="70">値:70/100</meter>
値:70/100

<meter value="20" low="30" max="100" high="90" optimum="70">値:20/100</meter>
値:20/100

【属性】
value : 値
low : 下限値
high : 上限値
optimum : 最適値

value 属性の値が low 属性の値より小さいとゲージがオレンジ色になります。