добавление функции jQuery для слайдов / слайдов в пользовательский интерфейс - PullRequest
Новая
       5

добавление функции jQuery для слайдов / слайдов в пользовательский интерфейс

0 голосов
/ 19 января 2012

Ниже вы найдете мой JS. код, который при запуске выдает нижеприведенное прикрепленное изображение. Я отчаянно пытаюсь понять, как реализовать это в интерфейсе таким образом http://jsfiddle.net/JHgvK/2/ Я в основном пытаюсь создать интерфейс, поэтому, когда пользователь щелкает в любом месте информацию электронной почты (первая таблица - с письмом в заголовке), информация об истории скользит вниз / вверх.

Любые предложения приветствуются! Спасибо за ваше время! Если я опущу и информацию, которая будет полезна в этом вопросе, пожалуйста, не стесняйтесь спрашивать. 

if (tab == "crm") {
    content = "";
    counter = 1;
    $.each(data.response, function(i, y) {
        $("div#userBox_" + id + " div#" + tab + "File").html(content);
        content = "<table class='crmTable'><tr><th colspan='3'>" + "<a href='mailto:" + y.email.email + "'>" + y.email.email + "</a></th></tr>";
        if (y.email.valid == "1") {
            valid = "<td class='value'><span style='color: green'>Yes</span></td>";
        }
        else {
            valid = "<td class='value'><span style='color: red'>No</span></td>";
        }
        content += "<tr class='even'><td class='key'>Valid e-mail:</td><td class='value'>" + valid + "</td></tr>";

        if (y.email.reason == null) {
            reason = "<td class='value'><span style='color: green'>N/A</span></td>";
        }
        content += "<tr class='odd'><td class='key'>Reason</td><td class='value'>" + reason + "</td></tr>";
        content += "<tr class='even'><td class='key'>Confirmed at</td><td class='value'><td class='value'>" + y.email.confirmed_at + "</td></td></tr>";
        if (y.email.email.contact_email == "1") {
            contact = "<td class='value'><span style='color: green'>Yes</span></td>";
        }
        else {
            contact = "<td class='value'><span style='color: red'>No</span></td>";
        }
        content += "<tr class='odd'><td class='key'>Contact </br> e-mail</td><td class='value'>" + contact + "</td></tr>";

        if (y.email.login_email == "1") {
            login = "<td class='value'><span style='color: green'>Yes</span></td>";
        }
        else {
            login = "<td class='value'><span style='color: red'>No</span></td>";
        }
        content += "<tr class='even'><td class='key'>Users login </br> e-mail</td><td class='value'>" + login + "</td></tr>";
        content += "<tr class='odd'><td class='key'>Users Id</td><td class='value'><td class='value'>" + y.email.users_id + "</td></td></tr>";

        $.each(y.history, function(ii, z) {
            if (z.contactBrand == "B") type = "Book";
            else {
                type = "Journal"
            }
            content += "<table class='crmTable'><tr><th colspan='3'>History " + counter + "</th></tr>";
            content += "<tr class='even'><td class='key'><b>Contact Role</b></td><td class='value'><td class='value'>" + z.contactRole + "</td></td></tr>";
            content += "<tr class='odd'><td class='key'>Contact Project</td><td class='value'><td class='value'>" + z.contactProject + "</td></td></tr>";
            content += "<tr class='even'><td class='key'>Contact Brand</td><td class='value'><td class='value'>" + type + "</td></td></tr>";
            counter++
        });
    });

    $("div#userBox_" + id + " div#" + tab + "File").append(content);
    $("div#userBox_" + id + " div#" + tab + "File").append("</table>");

}
}, "json");

enter image description here

1 Ответ

1 голос
/ 19 января 2012

Используйте аккордеон JQuery UI http://jqueryui.com/demos/accordion/ или найди эту скрипку http://jsfiddle.net/avinapaster/JHgvK/7/

...