0

我正在尝试使用 jquery 来防止页面重新加载。我已经完成了整个代码 php ......并且可以正常工作。如果可以，请访问http://www.jonathansconstruction.com/gallery3.php并单击不同的画廊子菜单查看所有类别、厨房等...我正在使用 get 作为变量。但是，我想使用 jquery 来处理 php，因此我不必将其包含到 gallery.php 中，并且还可以防止页面重新加载，因为它会使页面重新启动，这可能会造成混淆。任何帮助将不胜感激谢谢

更新，感谢所有帮助的人：

到目前为止，我在网站上取得了进展，已在帖子顶部编辑了更正的 URL

流沙效果一切正常。但是，放置流沙效果时，Lytebox 不加载。，一开始它加载得很好，但是在按下其中一个菜单以获得流沙效果之后。它停止工作。另外，我想按照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 代码中消失了..?? 这是我在网站的 html 部分拥有的代码，由于某种原因没有出现在实时网站上。

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

    跨度部分没有出现，不知道为什么

    我已经解决了最重要的部分。只是移动了 photo_show div 的顶部并编辑了定位...希望最后编辑流沙的 jquery 使我的日历消失，检查，是的，它是一些 jquery 冲突，但不知道是什么导致它..表单验证也不起作用以及......任何帮助表示赞赏！

    • 4

    1 回答 1

    2

    在更正word 的 URL 中的错字后，我访问了您的网页链接construction。

    我还看到了当单击 View All 、 Kitchen 和 Miscellaneous 时页面重新加载的问题，这是您想要防止的。sorting filter

    不幸的是，这些按钮使用通过查询字符串URL Links 请求重新加载带有过滤选项的网页。这种过滤方法无能为力，您只需重新加载网页，因为过滤是在页面加载时完成的。

    也许这个DEMO显示了您想要完成的任务，因为它不会重新加载网页。该演示具有易于创建和维护的标记，它是使用Quicksand jQuery 插件构建的。使用右下角的链接可以访问该演示的教程，但是查看源 HTML 文件可以看出它是多么简单。

    我使用Quicksand 和 Shadowbox制作了一个可下载的演示，这是一个灯箱替代品HERE，您可能会感兴趣，因为您的网页将过滤后的图标结果链接到一个名为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 回答