0

これが私のスクリプトです。完全に機能し、問題はありません。なぜ私はこれをここに投稿しているのですか？主にそれを強化して改善できるようにするためです。また、これが他の人を助けるためになると思います! Jクエリ！ここに実用的なサンプルがありますhttp://jsfiddle.net/cornelas/4eUgf/2/

    $(document).ready(function() {
        $('.select').click(function () {
        $('.pdf_grey').fadeIn('slow');
        $('.select').hide();
        $('.deselect').show();
   });
     $('.deselect').click(function() {
        $('.pdf_grey').fadeOut('slow');
        $('.select').show();
        $('.deselect').hide();
    });
        $('.pdf_grey').css({'opacity' : 0.8});
    });
    $(document).mouseup(function (e)
{
    var container = $(".pdf_grey");
var deselect = $(".deselect");
var select = $(".select");

    if (container.has(e.target).length === 0)
    {
        container.hide();
       deselect.hide();
       select.show();
    }
});

そして、ここに私のHTMLがあります

サイトマニュアル

プレビュー最小化 | ダウンロード 

<div class="pdf_grey">
<span class="deselect top_inf"><h3>Close<h3></span><br>
<iframe id="manual" style="border:1px solid #666CCC" title=" Manual" src="Images/pdf/UserMaual.pdf" frameborder="1" scrolling="auto" height="600" width="850" ></iframe>
</div>
</div>  
</div>

そして最後にCSS

.pdf_grey {
position: absolute;
left: 500px;
top: 100px;
display: none;
padding: 25px;
background: #333;
}
.deselect {
    display: none;
    cursor: pointer;
}
.select {
    cursor: pointer;
    color: #666;

}
.select:hover {
    color: red;

}

私がこのスクリプトを書いたことに気付いた場合、特にクラス PDF グレーをターゲットにし、非表示に設定されているクラスを明らかにすることに気付いた場合、div には PDF をロードする Iframe が含まれています。これは、ページを変更せずに PDF をロードするための非常にシンプルでクールな方法だと思いました。今..百万ドルの質問です。pdfのクラスがある場合、非表示のコンテンツをロードするようにするにはどうすればよいですか。ご覧のとおり、クラスの設定に夢中になりたくありません。私はahrefまたはIframeをロードするクラスを設定する必要があるものを理解しています。助けてくれてありがとう、名前を付けるのを手伝ってくれた人が完成したら、スクリプトを投稿します。

4

2 に答える 2

0

ここの例を参照してくださいhttp://jsfiddle.net/cornelas/4eUgf/4/ Iframe は、ページをロードする iframe を示すリンクではなく、リンクに基づいています!

    $(document).ready(function() {
        $("a.select").live('click', function (e) {
           e.preventDefault();
           var href = this.href;
          $("#manual").attr("src", href);
        });
    $('.full').css({'opacity' : .7});

    $('.select').click(function () {
        $('.pdf_grey').fadeIn('slow');
        $('.full').fadeIn('slow');
        $('.select').hide();
        $('.deselect').show();
    });
    $('.deselect').click(function() {
        $('.pdf_grey').fadeOut('slow');
        $('.full').fadeOut('slow');
        $('.select').show();
        $('.deselect').hide();
    });

    });
    $(document).mouseup(function (e)
{
    var container = $(".pdf_grey");
    var bkg = $(".full");
    var deselect = $(".deselect");
    var select = $(".select");

    if (container.has(e.target).length === 0)
    {
        container.hide();
        deselect.hide();
        select.show();
        bkg.hide();
    }
});


    <div class="full">
    <div class="pdf_grey">
    <span class="deselect top_inf"><h3>Close<h3></span><br>
    <iframe id="manual" style="border:1px solid #666CCC" title=" Manual" src="" frameborder="1" scrolling="auto" height="600" width="850" ></iframe>
    </div>
    </div>
    <div id="wrapper">
    <p class="1">
    <h3>Site Manual</h3><a href="http://www.ntxmsk.com/pdf/nwpt.pdf#zoom=100" class="select">Preview</span><span class="deselect">Minimize</span> | <a href="Images/pdf/Site_Help_Manual_2012.zip">Download</a><br>
        </p>
    <p class="2">
    <h3>Site Manual</h3><a href="http://www.ntxmsk.com/pdf/HIPPA.pdf#zoom=100" class="select">Preview</span><span class="deselect">Minimize</span> | <a href="Images/pdf/Site_Help_Manual_2012.zip">Download</a>
        </p>
    <div class="topdiv">

    </div>    
    </div>

        body {
        padding:0px;
        margin: 0px;
        }
        .full {
        background: #000;
         width: 100%;
    height: 100%;
    position: absolute;
    z-index: 5;
    display: none;
    }
    .red {
    background: red;
    width: 10%;
    height: 25%;
    }
    .pdf_grey {
    position: absolute;
    left: 25%;
    top: 15%;
    display: none;
    padding: 25px;
    background: #333;

    }
    .deselect {
        display: none;
        cursor: pointer;
    }
        .select {
        cursor: pointer;
        color: #666;

    }
    .select:hover {
        color: red;

    }
于 2012-09-28T17:34:25.357 に答える
0

ソース URL を提供する .load 関数を調べる必要があります。必要なのは、ソースを変数として保存し、それをロード関数にパッチする方法を見つけ出すことだけです。サムネイルをクリックした場合: .pdf がクリックされるたびに、最初に src を保存します: var src=$(this).parent('a').attr('src'); 次に、.load を使用し、src 変数を使用して iframe をターゲットにすることができます。.load の API ドキュメントを見ると、かなり明確になるはずです。オフを if​​rame にロードする際に注意すべき点がいくつかあります。iframe は外部の html ドキュメントを対象としていますが、object タグは flash、PDF、ビデオなどの外部ファイルに使用されます。object タグを調べることをお勧めします。

iframe はエラー処理の設定が非常に難しいため、PDF が読み込まれない場合、エラーの表示が非常に困難になる可能性があります。いくつかの回避策がありますが、良いものは見たことがありません.iframeがロードされたかどうかを確認するためにタイマーを設定することに主に依存しており、一部のサイト/pdfはロードに時間がかかり、誤ったエラーが発生する可能性があります.

ブラウザにはプラグインが必要なため、PDF は扱いにくいものです。PDF リーダーがインストールされていないユーザーはどうでしょうか。この場合も、エラーをチェックする方法はありません。

于 2012-09-28T15:50:09.940 に答える