JavaScriptソース
var activeTab = ""; // 指定されているタブを保持する var activeBody = ""; // 指定されている内容エリアを保持する //------------------------------------------------------------------------- // タブを生成する // mainID : 一番外枠のエレメントID // tabTitles : タブの項目名が配列で渡される // width : 内容エリアの横幅 // height : 内容エリアの縦幅 // iniTabNo : 始めに指定するタブ(0から数える) //------------------------------------------------------------------------- function CreateTab(mainID, tabTitles, width, height, initTabNo){ mainArea = document.getElementById(mainID); mainArea.style.width = width; mainArea.style.height = height; //---------------------------------------------- // 内容エリア(DIV)にIDを振分ける //---------------------------------------------- bodys = mainArea.getElementsByTagName('DIV'); for(var bodyCount=0; bodyCount < bodys.length; bodyCount++){ bodys[bodyCount].id = "body_" + bodyCount; bodys[bodyCount].style.display = "none" } //---------------------------------------------- // タブを表示するエリアを生成して追加 //---------------------------------------------- tabArea = document.createElement('DIV'); // タブを表示するエリア(DIVエレメント生成) tabArea.id = "tabAreaPane" // タブ表示エリアのスタイル設定 firstBody = mainArea.getElementsByTagName('DIV')[0]; // メインエリア内の一番初めのDIVエレメント取得 mainArea.insertBefore(tabArea, firstBody); // firstBodyの前に、tabAreaを挿入 //---------------------------------------------- // タブを生成してタブ表示エリアへ追加 //---------------------------------------------- for(var tabCount=0; tabCount<tabTitles.length; tabCount++){ tab = document.createElement('DIV'); // タブ(DIVエレメント生成) tab.id = "tab_" + tabCount; // タブを識別する為のID振分け tab.onmouseover = MouseOverTab; // マウスがタブに乗った時のイベント登録 tab.onmouseout = MouseOutTab; // マウスがタブから離れた時のイベント登録 tab.onclick = ActiveTab; // マウスがクリックされた時のイベント登録 tabTitle = document.createElement('SPAN'); // タブのタイトル(SPANエレメント生成) tabTitle.innerHTML = tabTitles[tabCount]; // タブのタイトルをセット tab.appendChild(tabTitle); // tabTitleをtabの子要素として追加 tabArea.appendChild(tab); // tabをtabAreaの子要素として追加 } //---------------------------------------------- // 指定するタブに切り替え //---------------------------------------------- switchArea(initTabNo); } //------------------------------------------------------------------------- // タブ・内容エリアの切り替え //------------------------------------------------------------------------- function switchArea(number){ // 指定するタブに切り替え if(activeTab != "") activeTab.className = ""; // 指定されていたタブのスタイルをデフォルトに戻す activeTab = tabArea.getElementsByTagName('DIV')[number]; // activeTabに現在指定されたタブを格納 activeTab.className = "activeTab"; // 指定した状態のスタイルを指定 // 内容エリアの切り替え if(activeBody != "") activeBody.style.display = "none"; activeBody = document.getElementById("body_" + number); activeBody.style.display = "block"; } //------------------------------------------------------------------------- // マウスカーソルがタブの上にある時の処理 //------------------------------------------------------------------------- function MouseOverTab(){ if( this.className != "activeTab" ){ this.className = "overTab"; } } //------------------------------------------------------------------------- // マウスカーソルがタブの上からはなれた時の処理 //------------------------------------------------------------------------- function MouseOutTab(){ if( this.className == "overTab"){ this.className = "outTab"; } } //------------------------------------------------------------------------- // タブがクリックされた時の処理 //------------------------------------------------------------------------- function ActiveTab(){ switchArea(this.id.match(this.id.replace("tab_",''))); // 指定するタブに切り替え }
HTMLソース
<HTML> <HEAD> <TITLE>タブ タブ タブ</TITLE> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <META http-equiv="Content-Script-Type" content="text/javascript"> <LINK rel="stylesheet" href="style.css" type="text/css"> <SCRIPT type="text/javascript" src="tab.js"></SCRIPT> </HEAD> <BODY> <DIV id="main"> <DIV class="body">１画面</DIV> <DIV class="body">２画面</DIV> <DIV class="body">３画面</DIV> <DIV class="body">４画面</DIV> </DIV> <SCRIPT type="text/javascript"> CreateTab("main", Array('TAB1','TAB2','TAB3','TAB4'), 500, 300, 1); </SCRIPT> </BODY> </HTML>
JavaScriptを使ってタブ機能実装！！未完成・・・
JavaScriptを使ってタブ切り替え機能を作ってみました。
IEだと正常に見れるのですが、Firefoxですとスタイルが少しずれてしまいます・・・
Firefoxでも正常に動作するよう微調整中！！
現状のソースをメモしとこうと思います。
スタイルシート & ASP.NET
<TABLE width="760" border="0" cellpadding="0" cellspacing="0">
【スタイルシートにて定義】
#page{ width:760px; border:0px; padding:0px; border-spacing:0px; }『border-spacing』が働かない・・・どうやらIE未対応のようです。
cellspacing をスタイルシートで、どのように定義すればよいのか分かりません。
かなり痛い書き方ですが、下記のように書くしかないのかな？
#page{ width:760px; border:0px; padding:0px; }
<TABLE id="page" cellspacing="0">これだったら、スタイルシートを使わない方がいい気がします。。
ASP.NETの動き
.aspxファイルにリクエスト
１： .aspxプログラムファイルがC#またはVB.NETのクラスファイルのコードへ変換される（初回のみ） ２： クラスファイルがC#あるいはVB.NETのコンパイラによりコンパイルされる（初回のみ） ３： クラスファイルからページインスタンスが生成され、実行される。
【工程１】追記
クラスファイルへ変換される時、 HTMLデザインブロックはWeb UIコントロールツリーオブジェクト群に変換される。 Web UIコントロールツリーは３種類のオブジェクトで作られる。 ・Webコントロール <asp:XXX runat="server">タグを元にして作成される。 ※System.Web.UI.WebControls名前空間に存在するクラスでないとエラー ・HTMLコントロール 通常のHTMLタグにrunat="server"属性をつけたタグを元にして作成される。 ※System.Web.UI.HtmlControls名前空間に存在するクラスでないとエラー ・リテラルコントロール 上記以外の単純な文字列を元にして作成される。
【工程３】追記
クライアントからのリクエストごとにインスタンスが作成され、並列処理される。
C#で書いてみました。
<%@ PAGE LANGUAGE="C#" AutoEventWireup="false" Inherits="Test" Src="sample.aspx.cs" %> <html> <body> <asp:Label id="l1" runat="server" /> <br> <asp:Label id="l2" runat="server" /> </body> </html>
using System;
using System.Web.UI;
using System.Web.UI.WebControls;
public class Test : Page
{
protected Label l1;
protected Label l2;
private void Page_Init(object sender, EventArgs e) {
l1.Text = "Page_Init";
}
private void Page_Load(object sender, EventArgs e) {
l2.Text = "Page_Load";
}
// AutoEventWireupがfalseの為、上記メソッドを、
// イベントに明示的に登録しなければならない
override protected void OnInit(EventArgs e) {
Init += new System.EventHandler(Page_Init);
Load += new System.EventHandler(Page_Load);
// InitイベントはPage.OnInitメソッドの内部で発行されている。
// このメソッドをオーバーライドすると、Initイベントが発生しなくなってしまう為、
// Initイベントを発生させる為に、基本クラス（Pageクラス）のOnInitメソッドを呼ぶ。
base.OnInit(e);
}
}
VBで書いてみました。
<%@ PAGE LANGUAGE="VB" AutoEventWireup="false" Inherits="Test" Src="sample.aspx.vb" %> <html> <body> <asp:Label id="l1" runat="server" /> <br> <asp:Label id="l2" runat="server" /> </body> </html>
imports System
imports System.Web.UI
imports System.Web.UI.WebControls
public class Test
Inherits Page
protected l1 As Label
protected l2 As Label
private Sub Page_Init(sender As object, e As EventArgs) Handles MyBase.Init
l1.Text = "Page_Init"
End Sub
private Sub Page_Load(sender As object, e As EventArgs) Handles MyBase.Load
l2.Text = "Page_Load"
End Sub
End class
ASP.NETを使ってみよう No４
Meadow (矩形処理)
この機能を探してたんですよねｗ
リージョンを選択してから、下記の操作！
C-x r o : 矩形領域だけスペースを確保する (open-rectangle)
C-x r c : 矩形領域を消去する．スペースは確保． (clear-rectangle)
C-x r d : 矩形領域を消去する．スペースも消す． (delete-rectangle)
C-x r t : 矩形領域を文字で置き変える (string-rectangle)
C-x r k : 矩形領域を切り取り
C-x r y : 矩形領域を貼り付け
ASP.NETについて調べた事のメモ！
超基礎！イベント設定をやってみました。
【AutoEventWireup】： falseにする事で、Page_LoadメソッドとPage_Initを明示的にイベントに設定しなければならない。
