/home/web6047/www/cgi-bin/prj/20180623-javascript／htmlタブ/javascript.html

このファイル: /home/web6047/www/cgi-bin/prj/20180623-javascript／htmlタブ/javascript.html

1 <!DOCTYPE html>
2 <head>
3 <title>HTMLタブ</title>
4 <meta content="text/html; charset=UTF-8" http-equiv="content-type">
5
6 
7
8 <script>
9 /*
10 HTMLのGUIエディタでは、スクリプトは実行されないので、
11 以下のstyleによるタブの非表示は無効になり、表示される。
12 */
13 var HereDocument = /[^]*\/\*\s([^]*)\*\/\}$/;
14 document.open();
15 document.write( ( function() {/*
16 <style>
17 .tabholder {
18 display : none;
19 }
20 </style>
21 */} ).toString().match( HereDocument )[ 1 ] );
22 document.close();
23

24 function tabinit() {
25 console.log( "tabinit()" );
26 //タブのセッティング
27
28 var holders = document.getElementsByClassName( "tabholder" );
29
30 //タブを作成、１個目のタブをクリックした状態にする。
31 for( var i = 0; i < holders.length; i++ ) {
32 var holder = holders[ i ];
33 //最初非表示だが、ページ読み込み完了したら表示
34 holder.style.display ="block";
35
36 tabbuild( holder );
37 tabonclickx( { target : holder.firstTab } );
38
39 }
40 //resize時定義
41 //※下記holdersは上記holdersのクロージャ
42 tabonresizex = function( e ) {
43 console.log( "tabonresizex()" );
44
45 /*
46 束ねたタブについて、各タブの中で一番高いheightに統一したい。
47 そのためには、
48 要素のwidthにより要素のheightは変わるので、さきにwidthを統一する。
49 bodyのスクロールバーの有無で要素のwidthが変わりそれにより要素のheightも変わるので
50 スクロールバーありでheightを調べる。
51 各タブの高さを未定義にする。
52 */
53
54 //各holderについて
55 for( var j = 0; j < holders.length; j++ ) {
56 var holder = holders[ j ];
57 var holderWidth = getComputedStyle( holder, "" ).width;
58 var tabdivs = holder.children;
59 //各タブのwidthを統一、heightを未定義にする。
60 for( var i = 0; i < tabdivs.length; i++ ) {
61 var tabdiv = tabdivs[ i ];
62 tabdiv.style.width = holderWidth;
63 tabdiv.style.height = "";
64 }
65 }
66
67 //スクロールバーありにする。
68 var overflowBak = document.body.style.overflow;
69 document.body.style.overflow = "scroll";
70
71 //各holderについて
72 for( var j = 0; j < holders.length; j++ ) {
73 var holder = holders[ j ];
74 var tabdivs = holder.children;
75 var maxtabdivheight = 0;
76 //各タブ本体について　一番高い高さを計測
77 for( var i = 0; i < tabdivs.length; i++ ) {
78 var tabdiv = tabdivs[ i ];
79 maxtabdivheight = Math.max( maxtabdivheight, tabdiv.getBoundingClientRect().height );
80 }
81 //各タブ本体について　一番高い高さに合わせる
82 for( var i = 0; i < tabdivs.length; i++ ) {
83 var tabdiv = tabdivs[ i ];
84 tabdiv.style.height = maxtabdivheight + "px";
85 }
86 holder.style.height = maxtabdivheight + "px";
87 }
88 document.body.style.overflow = overflowBak;
89 }//tabonresizex
90 tabonresizex();
91 tabonresizex(); //「HTMLタブ」を入れ子にした場合、タブに含めた要素がはみ出る場合があるため。
92 addEventListener( "resize", tabonresizex, false );
93 }

94 function tabbuild( holder ) {
95 console.log( "tabbuild()" );
96 var tabdivs = holder.children;
97 var maxtabheight = 0;
98 var tmpLeft = 0;
99 for( var i = 0; i < tabdivs.length; i++ ) {
100 var tabdiv = tabdivs[ i ];
101 with( tabdiv.style ) {
102 position = "absolute";
103 boxSizing = "border-box";
104 }
105
106 var tabdivcs = getComputedStyle( tabdiv );
107 var tab = document.createElement( "span" );
108 tabdiv.appendChild( tab );
109 tab.setAttribute( "class", "tab" );
110
111
112 //タブのタイトル
113 if( tabdiv.title == null || tabdiv.title == "" ) {
114 tab.innerHTML = "untitled " + i;
115 } else {
116 tab.innerHTML = tabdiv.title;
117 }
118
119 with( tab.style ) {
120 display = "block";
121 backgroundColor = "inherit";
122 border = "inherit";
123 position = "absolute";
124 borderBottomWidth = 0;
125 boxSizing = "border-box";
126 cursor = "pointer";
127 whiteSpace = "nowrap";
128 var tabBorderTopWidth = Number( getComputedStyle( tab, "" ).borderTopWidth.replace( "px", "" ) );
129 top = -tab.offsetHeight - tabBorderTopWidth + "px";
130 height = tab.clientHeight + tabBorderTopWidth * 2 + "px";
131 console.log( tab.innerHTML, tab.clientHeight , tabBorderTopWidth );
132 }
133
134 var tabRect = tab.getBoundingClientRect();
135
136 //タブの横の並び
137 var tabsMargin = 4; //タブ同士の間隔 -2～4 程度
138 var borderwidth = tab.clientLeft;
139 var leftRadius = Number( tabdivcs.borderBottomLeftRadius.replace( "px", "" ) );
140 tmpLeft -= borderwidth;
141 tab.style.left = tmpLeft + leftRadius + "px";
142 tmpLeft += tabRect.width + borderwidth + tabsMargin;
143
144 tab.addEventListener( "click", tabonclickx, false );
145 tab.addEventListener( "mousedown", function( e ) { e.preventDefault(); }, false ); //意図しないテキスト選択を回避
146 tab.div = tabdiv;
147 tab.divs = tabdivs;
148
149 maxtabheight = Math.max( maxtabheight, tabRect.height );
150
151 if( i == 0 ) holder.firstTab = tab;
152 }
153 with( holder.style ) {
154 position = "relative";
155 marginTop = maxtabheight + "px";
156 }
157 }

158 function tabonclickx( e ) {
159 console.log( "tabonclickx()" );
160 var thistab = e.target;
161 //タブがクリックされたら
162 //すべてのタブ本体について　タブ本体の重なりを前後する
163 for( var i = 0; i < thistab.divs.length; i++ ) {
164 var tabdiv = thistab.divs[ i ];
165 tabdiv.style.zIndex = tabdiv == thistab.div ? 1 : 0;
166 }
167 }

168 addEventListener( "load", tabinit, false );
169 </script>
170
171 
172
173 <STYLE>
174 .tabholder { /*全体*/
175 width : 80%; /*幅*/
176 }
177
178 .tabholder>*>.tab { /*タブパーツ*/
179 font-size : 10px; /*文字の大きさ*/
180 padding : .5em; /*余白*/
181 border-radius : .5em .5em 0 0; /*タブらしく角を丸め*/
182 box-shadow : -.2em .1em 0em #aaa inset; /*内影*/
183 }
184 .tabholder>*>.tab:hover { /*タブパーツ　マウスが乗ったとき*/
185 background-color : cyan; /*（これは効かない？？）*/
186 color : blue; /**/
187 }
188 .tabholder>* { /*「いくつかのdiv」*/
189 background-color : white; /*背景色がないと文書同士が透けて重なる*/
190 border : solid 2px black; /*線がないと境界がわからない*/
191 padding : 1em; /*余白*/
192 border-radius : .3em; /*角を丸め*/
193 box-shadow : .05em .1em .0em #888, /*影*/
194 -.2em -.2em .0em #aaa inset;/*内影*/
195 }
196
197 #tabs1 * {
198 box-shadow : none;
199 }
200 </STYLE>
201
202 </head>
203 <body>
204
205 手前のテキスト<BR>
206
207 <div class="tabholder">
208
209
210 <div title="テスト">
211 「相対性理論」と名づけられる理論が倚りかかっている大黒柱はいわゆる相対性理論です。私はまず相対性原理とは何であるかを明らかにしておこうと思います。私たちは二人の物理学者を考えてみましょう。この二人の物理学者はどんな物理器械をも用意しています。そして各々一つの実験室をもっています。一人の物理学者の実験室はどこか普通の場所にあるとし、もう一人の実験室は一定の方向に一様な速さで動く汽車の箱のなかにあるとします。相対性原理は次のことを主張するのです。もしこの二人の物理学者が彼等のすべての器械を用いて、一人は静止せる実験室のなかで、もう一人は汽車のなかで、すべての自然法則を研究するならば、汽車が動揺せずに一様に走る限り、彼等は全く同じ自然法則を見出すでありましょう。幾らか抽象的にこう云うことも出来ます。自然法則は相対性原理によれば基準体系の併移運動に関しません。
212 </div>
213
214 <div>
215 　私達は今この相対性原理が旧来の力学でどんな役目をもっていたかをみましょう。旧来の力学は第一にガリレイの原理の上に安坐しています。この原理に従えば、ある物体は他の物体の作用を受けない限り、直線的な一様な運動にあります。もしこの法則が上に云うた実験室の一方に対して成り立つ［＃「成り立つ」は底本では「成リ立つ」］ならば、それはまた第二に対しても成り立ちます。私達はそのことを直接に直観から取り出すことが出来ます。私達はそれをしかしまたニウトン力学の方程式からも引き出すことが出来るのです。私達はその方程式をもとの基準体系に対して一様に動いているものへ転換させればよいのです。
216 </div>
217
218 <div>
219 私はここで実験室と云っていますが、数理的物理学では事柄を一定の実験室に関係させる代りに坐標系に関係させるのが普通です。このようにある何かに関係させるという場合に本質的なのは次の事柄です。私達が一点の位置について何か云おうとするときには、いつも私達はこの点とある他の物体系の一点との合致を示し与えます。もし私が例えば自分をこの質点であると取り、そうして、私はこの部屋のなかのこの場所に居ると云いますなら、私は自分を空間的の関係でこの部屋のある点と合致させたのです。あるいは私はこの合致を云いあらわしたのです。数理的物理学ではこれを云い表わすのに、三つの数、すなわちいわゆる坐標によりて、場所を示そうとした点が坐標系と称えられる剛体体系のどの点と合致するかを云い表わします。
220 </div>
221
222 </div>
223
224 あいだのテキスト<BR>
225
226 <div class="tabholder" id="tabs1">
227
228 <div title="黒い魔物" style="background-color: magenta;">
229 　そいつは全身、墨を塗ったような、おそろしくまっ黒なやつだということでした。
230 「黒い魔物」のうわさは、もう、東京中にひろがっていましたけれど、ふしぎにも、はっきり、そいつの正体を見きわめた人は、だれもありませんでした。
231 　そいつは、暗やみの中へしか姿をあらわしませんので、何かしら、やみの中に、やみと同じ色のものが、もやもやと、うごめいていることはわかっても、それがどんな男であるか、あるいは女であるか、おとななのか子どもなのかさえ、はっきりとはわからないのだということです。
232 </div>
233
234 <div style="background-color: cyan;">
235 　あるさびしいやしき町の夜番のおじさんが、長い黒板塀の前を、例のひょうし木をたたきながら歩いていますと、その黒板塀の一部分が、ちぎれでもしたように、板塀とまったく同じ色をした人間のようなものが、ヒョロヒョロと道のまんなかへ姿をあらわし、おじさんのちょうちんの前で、まっ白な歯をむきだして、ケラケラと笑ったかと思うと、サーッと黒い風のように、どこかへ走りさってしまったということでした。
236 　夜番のおじさんは、朝になって、みんなにそのことを話して聞かせましたが、そいつの姿が、あまりまっ黒なものですから、まるで白い歯ばかりが宙にういて笑っているようで、あんなきみの悪いことはなかったと、まだ青い顔をして、さも、おそろしそうに、ソッと、うしろをふりむきながら、話すのでした。
237 </div>
238
239 <div style="background-color: gold;">
240 　あるやみの晩に、隅田川をくだっていたひとりの船頭が、自分の船のそばにみょうな波がたっているのに気づきました。
241 　星もないやみ夜のことで、川水は墨のようにまっ黒でした。ただ櫓が水を切るごとに、うす白い波がたつばかりです。ところが、その櫓の波とはべつに、船ばたにたえず、ふしぎな白波がたっていたではありませんか。
242 　まるで人が泳いでいるような波でした。しかし、ただ、そういう形の波が見えるばかりで、人間の姿は、少しも目にとまらないのです。
243 　船頭は、あまりのふしぎさに、ゾーッと背すじへ水をあびせられたような気がしたといいます。でも、やせがまんをだして、大きな声で、その姿の見えない泳ぎ手に、どなりつけたということです。
244 「オーイ、そこに泳いでいるのは、だれだっ。」
245 </div>
246
247 </div>
248
249 後のテキスト<BR>
250
251 </body>
252 </html>