- PR -

JavaScript

«前のページへ 1|2|3 次のページへ»
投稿者投稿内容
ぴあちゃん
ぬし
会議室デビュー日: 2008/02/07
投稿数: 287
投稿日時: 2008-06-08 16:52
ヘッダを固定するスクリプトってのが悪いのですか？
使わない方向で検討できないのですか？

※ヘッダ固定すんのに、スクリプト使うやり方とCSSのみで出来るやり方と
onload なんぞ使わなくても出来るやり方と。。。。。ありますが。。。。

だいいち、onload を使っているから実装側でonload を使うな、ってゆー
条件の方がうさんくさいです。

本人がそこらへんの情報を提示しないのでなんとも対処しようがありません。
ビギ
ベテラン
会議室デビュー日: 2006/04/03
投稿数: 56
投稿日時: 2008-06-08 17:07
初期バージョンを作成時、いろいろ調査し、たくさん試作し、思ったとおりの
ことができたので、ここを参考にさせていただきました。
　　　　　　　　↓
http://chaichan.web.infoseek.co.jp/qa3500/qa3637.htm

もっと他の方法があったのかもしれませんが、知識不足と時間的な問題でできませんでした。
これを今から他の方法にするのは・・・ちょっと無理かなと思ってるしだいです。


ビギ
ベテラン
会議室デビュー日: 2006/04/03
投稿数: 56
投稿日時: 2008-06-08 17:10
追伸：
書き忘れましたが、先ほどのサイトの
table-layout:fixed　を使用しているのを参考にさせていただきました。
ぴあちゃん
ぬし
会議室デビュー日: 2008/02/07
投稿数: 287
投稿日時: 2008-06-08 21:10
http://blog.asura.co.jp/takehara/5219ac5dcee34422a506ab9f3df120df/entry.aspx

DTDなんちゃらかんちゃらってヘッダを付けないとうまく動作しないけど
コレ。CSSだけでヘッダ固定できます。

onload 使わないし、DTDもこれがあるために不都合になるようなヘッダでは
無いので問題無いかと。

http://www.cssplay.co.uk/menu/tablescroll.html

出所はこれですね。

横スクロールにも対応させたいなら ヘッダ部とコンテンツ部に分割して
onscroll="this.scrollLeft=xx.scrollLeft" とかってやってあげないとダメですが。

＞ちょっと無理かなと思ってる
そんなこと無いです。上記エゲレスのHPの奴はそのまんまコピペするだけ。
右クリックして、ソース見るでページのソースを参照して、
１行目にあるこの記述、
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

これを自分の作ってるページに貼り付けるだけ。これを貼り付けることで
他の部分が崩れる可能性が多々ありますがｗ、そこらへんは適当に微調整
です。

この書き込みはFirefox2.0 で行っていて、上記HPのヘッダ固定テーブルの
動作確認もコレですが、IEでも問題ないでしょう。

簡単なのでお試しアレ。


ぴあちゃん
ぬし
会議室デビュー日: 2008/02/07
投稿数: 287
投稿日時: 2008-06-08 22:13
コード:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="jp">
<HEAD> 
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<TITLE></TITLE>
<style type="text/css">
 
.dataGridHeader {
position:relative;
padding-top:24px;
width:100%;
border: 1px inset #999;
}

table.scrolltablestyle thead tr {
position:absolute;
top:0;
left:0;
}

.dataGridContent {
overflow:auto;
height:150px;
}

table.scrolltablestyle tbody tr td{
width:80px;
padding: 4px 9px;
}
table.scrolltablestyle thead tr th{
width:80px;
background-color: #FFFFD9;
padding: 4px 9px 4px 9px;
border-right: 1px solid #D9D9D9;
border-bottom: 1px solid #999999;
}

table.scrolltablestyle tbody tr td{
border-right: 1px solid #D9D9D9;
border-bottom: 1px solid #f0f0f0;
}
</style>
</HEAD>
<BODY>

<div class="dataGridHeader">
  <div class="dataGridContent">
    <table cellpadding="0" cellspacing="0" class="scrolltablestyle">
      <thead>
        <tr>
          <th>Shopper</th>
          <th>First</th>
          <th>Last</th>
          <th>User ID</th>
          <th>Status</th>
        </tr>
      </thead>
      <tbody>
  <tr>
    <td>Fishing</td>
    <td>John</td>
    <td><span class="style1">Doe</span></td>
    <td>C2C Fishing</td>
    <td>Enabled</td>
  </tr>
    <tr>
    <td>Someone</td>
    <td>Jane</td>
    <td><span class="style1">Joe</span></td>
    <td>Guppy </td>
    <td>Disabled</td>
  </tr>
      <tr>
    <td>Someone</td>
    <td>Jane</td>
    <td><span class="style1">Joe</span></td>
    <td>Guppy </td>
    <td>Disabled</td>
  </tr>
      <tr>
    <td>Someone</td>
    <td>Jane</td>
    <td><span class="style1">Joe</span></td>
    <td>Guppy </td>
    <td>Disabled</td>
  </tr>
      <tr>
    <td>Someone</td>
    <td>Jane</td>
    <td><span class="style1">Joe</span></td>
    <td>Guppy </td>
    <td>Disabled</td>
  </tr>
      <tr>
    <td>Someone</td>
    <td>Jane</td>
    <td><span class="style1">Joe</span></td>
    <td>Guppy </td>
    <td>Disabled</td>
  </tr>
      <tr>
    <td>Someone</td>
    <td>Jane</td>
    <td><span class="style1">Joe</span></td>
    <td>Guppy </td>
    <td>Disabled</td>
  </tr>
      <tr>
    <td>Someone</td>
    <td>Jane</td>
    <td><span class="style1">Joe</span></td>
    <td>Guppy </td>
    <td>Disabled</td>
  </tr>
      </tbody>
    </table>
  </div>
</div>
</BODY>
</HTML>


コレ。ヘッダ固定のサンプル。
コピペしてエディタで保存してIEでもFirefoxでもいいから実行してみそ。

とりあえず、手元にあるWeb開発環境が VisualWebDeveloper しか無いのだ
けれど、これで、Webフォーム追加して、そのまんまの状態で、DOCTYPEも
そのまんまでスタイルシートとテーブルだけコピペして動かしてみたら
IE6-SP2 で普通にヘッダ固定できました。

どうも、違いを見るに、 XHTML かそうでないかの違いだけみたいですね。
transitional と strict は関係ないみたい。
ビギ
ベテラン
会議室デビュー日: 2006/04/03
投稿数: 56
投稿日時: 2008-06-09 10:36
ぴあちゃんさん、ありがとうございます。
cssでのヘッダ固定、できました！
当初、作成したときは<thead>等がまだ有効に動かないときだったので
使えなかったのを思い出しました。
すごく簡単で便利ですね。
今回の画面だけ、cssに変更していいかをまず相談しないとだめなのですが
この度の問題解決には必要・・・とのことで押してみたいと思います。
まずはそこからですが、onloadが使えれば、少し先が見えてきたように思います。
また報告させていただきます。
よろしくお願いします。


ぴあちゃん
ぬし
会議室デビュー日: 2008/02/07
投稿数: 287
投稿日時: 2008-06-09 11:54
# Java と JavaScript は違う、とのご指摘です。

君の場合も、サーバーサイドは C++ です。あっちはレガシーASP。
スレッドに動きがある分だけ黙認されているようですが、次回も
ここで質問すると叩かれる可能性はあります。十分注意して下さい。

とりあえず、結果報告はお願いします。
上司の説得成否もね。

Javaではないけど、Web絡みでスレッド自体に資産価値があれば
問題ないと思いますが、自分の掲示板ではないので周りの意見は
真摯に受け止めます。

これが君への最後のレスになります。

訂正：あっちはコレ。
http://www.atmarkit.co.jp/bbs/phpBB/viewtopic.php?topic=45130&forum=12&6


[ メッセージ編集済み 編集者: ぴあちゃん 編集日時 2008-06-09 11:56 ]
ビギ
ベテラン
会議室デビュー日: 2006/04/03
投稿数: 56
投稿日時: 2008-06-09 12:06
ご指摘ありがとうございます。
どの会議室に質問したらいいのか迷って、JavaScriptの質問を投げている会議室を「ぱっ」と探して質問してしまいました。
すみませんでした、気をつけます！

«前のページへ 1|2|3 次のページへ»

スキルアップ／キャリアアップ（JOB@IT）