размещение тегов отслеживания партнерских программ на вкладках пользовательского интерфейса jquery - PullRequest
Новая
       5

размещение тегов отслеживания партнерских программ на вкладках пользовательского интерфейса jquery

0 голосов
/ 11 августа 2011

Я использую вкладки jquery ui на странице моего jpery-приложения asp.net c #. Вкладки хорошо разделяют содержимое, предоставляя пользователю возможность перемещаться по нескольким страницам.

У меня есть сторонняя аффилированная компания, которая должна отслеживать действия пользователей и поэтому хочет размещать пиксельные теги на каждой из страниц («вкладки»).

Если я добавлю теги непосредственно на каждую вкладку, то она не будет правильно отслеживаться, так как все будет запущено при загрузке страницы.

Я думал о загрузке изображения на лету, используя java-скрипт, когда пользователь перемещается по вкладкам. Это лучший подход, и если да, то как мне этого добиться? Любые другие предложения. Пример того, что должно быть включено для каждой вкладки, когда пользователь перемещается по ним: 

Tab 1: <img src="https://xxxxx.com/xxxx.html?p=xxxx&d=1" width="0" height="0" />
Tab 2: <img src="https://xxxxx.com/xxxx.html?p=xxxx&d=2" width="0" height="0" />
Tab 3: <img src="https://xxxxx.com/xxxx.html?p=xxxx&d=3" width="0" height="0" />
Tab 4: <img src="https://xxxxx.com/xxxx.html?p=xxxx&d=4" width="0" height="0" />

Я хотел бы создать некую структуру, чтобы можно было легко добавлять дополнительные теги для плавной загрузки на вкладку пользовательского интерфейса.

1 Ответ

0 голосов
/ 11 августа 2011

Вы можете поместить изображения в соответствующие вкладки, но оставить атрибут src пустым. Поместите ссылку на изображение в HTML5-атрибуте «data».

Затем, когда выбрана вкладка, загрузите изображение:

HTML 

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">First Tab</a></li>
        <li><a href="#tabs-2">Second Tab</a></li>
        <li><a href="#tabs-3">Third Tab</a></li>
    </ul>

    <div id="tabs-1">
        <img class="affiliate" src="" height="0" width="0" data-src="https://xxxxx.com/xxxx.html?p=xxxx&d=1" />
        <p>The tabs contents goes here.</p>
    </div>

    <div id="tabs-2">
        <img class="affiliate" src="" height="0" width="0" data-src="https://xxxxx.com/xxxx.html?p=xxxx&d=2" />
        <p>The tabs contents goes here.</p>
    </div>

    <div id="tabs-3">
        <img class="affiliate" src="" height="0" width="0" data-src="https://xxxxx.com/xxxx.html?p=xxxx&d=3" />
        <p>The tabs contents goes here.</p>
    </div>
</div>

Затем, когда вы создаете вкладки, передайте обработчик события select для загрузки этих изображений.

Javascript 

$('#tabs').tabs({
    select: function(event, ui)
    {
        $(ui.panel).find('img.affiliate').each(function()
        {
            $(this).attr( 'src', $(this).data('src') );
        });
    }
});
...