0

jqueryを使用してページの再読み込みを防止しようとしています。私はコード全体のphpを実行しました...そして機能しています。http://www.jonathansconstruction.com/gallery3.phpにアクセスして、カテゴリ[すべて表示]、[キッチン]などのさまざまなギャラリーのサブメニューをクリックしてください。変数にgetを使用しています。ただし、jqueryを使用してphpを処理したいので、それをgallery.phpに含める必要はありません。また、ページが元に戻って混乱する可能性があるため、ページの再読み込みを防ぐことができます。どんなhlepwilllも大歓迎ですTHanks

更新、助けてくれたすべての人に感謝します：

これまでのところ、私はウェブサイトで前進しました、修正されたURLは投稿の上に編集されました

すべてが流砂の効果でスムーズに機能しています。ただし、流砂効果が配置されている場合、Lyteboxはロードされません。、最初は問題なくロードされますが、メニューの1つを押した直後に流砂効果が得られます。動作を停止します。また、 http：//www.jonathansconstruction.com/gallery.phpのようにメニューボタンのスタイルを設定したいと思います。jqueryが追加せず、

  • ダウンロードしたサンプルはありません。また、「ギャラリーの写真」と書かれているものは、クイックサンドのデモで消えます。

    どんな助けでも大歓迎です。以下は私がこれまでに変更したscript.jsコードです

    $(document).ready(function(){

var items = $('.photo_show figure'),
    itemsByTags = {};

// Looping though all the li items:

items.each(function(i){
    var elem = $(this),
        tags = elem.data('tags').split(',');

    // Adding a data-id attribute. Required by the Quicksand plugin:
    elem.attr('data-id',i);

    $.each(tags,function(key,value){

        // Removing extra whitespace:
        value = $.trim(value);

        if(!(value in itemsByTags)){
            // Create an empty array to hold this item:
            itemsByTags[value] = [];
        }

        // Each item is added to one array per tag:
        itemsByTags[value].push(elem);
    });

});

// Creating the "Everything" option in the menu:
createList('View All',items);

// Looping though the arrays in itemsByTags:
$.each(itemsByTags,function(k,v){
    createList(k,v);
});

$('#gallery_menu nav a').live('click',function(e){
    var link = $(this);

    link.addClass('current').siblings().removeClass('current');

    // Using the Quicksand plugin to animate the li items.
    // It uses data('list') defined by our createList function:

    $('.photo_show').quicksand(link.data('list').find('figure'), {adjustHeight: 'dynamic'} );
    e.preventDefault();
});

$('#gallery_menu nav a:first').click();

function createList(text,items){

    // This is a helper function that takes the
    // text of a menu button and array of li items

    // Creating an empty unordered list:
    var ul = $('<ul>',{'class':'hidden'});

    $.each(items,function(){
        // Creating a copy of each li item
        // and adding it to the list:

        $(this).clone().appendTo(ul);
    });

    ul.appendTo('.photo_show');

    // Creating a menu item. The unordered list is added
    // as a data parameter (available via .data('list'):

    var a = $('<a>',{
        html: text,
        href:'#',
        data: {list:ul}
    }).appendTo('#gallery_menu nav');
}
  });

    別の編集：

    これまでのところすべて良さそうですが、多くの問題が修正されました。ただし、何らかの理由で、静的htmlのスパンが表示されなくなり、jquery流砂コードをロードするとhtmlコードも表示されなくなります。これが、何らかの理由でライブWebサイトに表示されないWebサイトのhtml部分にあるコードです。

    <div id="portfolio">
                <div class="photo_show"><span>Gallery Pictures</span>

    スパン部分が表示されない、理由がわからない

    TOpパーツを解決してもらいました。photo_show divの上に移動し、位置を編集しました...うまくいけば、流砂のjqueryを最後に編集すると、カレンダーが消えてチェックされ、はい、jqueryの競合が発生しましたが、原因がわかりません。フォームの検証も機能しません。同様に...どんな助けも大歓迎です！

    • 4

    1 に答える 1

    2

    単語のURLのタイプミスを修正した後、あなたのWebページのリンクにアクセスしましたconstruction。

    また、 [すべて表示]、 [キッチン] 、 [その他]などをクリックすると、ページが再読み込みされるという問題もあります。これは、防止したいことです。sorting filter

    残念ながら、これらのボタンは、クエリ文字列を介してフィルタリングされたオプションを使用してWebページをリロードするようにURL Links 要求しています。フィルタリングはページの読み込み時に行われるため、そのフィルタリング方法では何もできません。Webページを再読み込みするだけです。

    おそらく、このデモはWebページをリロードしないため、達成したいことを示しています。そのデモには、 QuicksandjQueryプラグインを使用して構築された作成と保守が容易なマークアップが含まれています。そのデモのチュートリアルには、右下のリンクを使用してアクセスしますが、ソースHTMLファイルを見ると、それがいかに簡単であるかがわかります。

    QuicksandとShadowboxの両方を使用してダウンロード可能なデモを作成しました。これは、ライトボックスの代替手段です。これは、Webページがフィルター処理されたアイコンの結果をLyteboxという名前のライトボックスの代替手段にリンクしているためです。

    編集内容はLyteboxへの関心を反映しているため、次のマークアップは、Quicksandでフィルタリングイベントが発生した後、そのライトボックスの代替を再初期化します。それに応じてscript.jsファイルを更新します。

    $('.photo_show').quicksand(link.data('list').find('figure'), function(){

    adjustHeight = 'dynamic';
    initLytebox();

});

    また、等号の代わりにセミコロンを使用していたため、既存のadjustHeightを修正しましたが、正しい場所と使用法は無関係です。

    箇条書きが表示されないul/li tagsのは、デモで使用しているものを使用していないためです。

    于 2012-05-27T06:29:28.100 に答える