باستخدام مسج لتجميل شخص آخر html

StackOverflow https://stackoverflow.com/questions/54138

  •  09-06-2019
  •  | 
  •  

سؤال

لدي طرف ثالث التطبيق الذي يخلق HTML المستندة إلى التقارير التي لا تحتاج إلى عرض.لدي بعض السيطرة على كيف تبدو ، ولكن في عام انها بدائية جدا.أنا يمكن حقن بعض جافا سكريبت ، على الرغم من.أود أن محاولة لحقن بعض مسج الخير في ذلك إلى مرتبة فوق بعض.واحد محدد شيء أود القيام به هو أن تأخذ الجدول (الفعلي HTML <table>) دائما يحتوي على صف واحد و عدد متغير من الأعمدة سحرية تحول ذلك إلى كلفه حيث عرض محتويات (دائما واحد <div> أستطيع أن العرض معرف إذا لزم الأمر) من كل الأصلية خلية الجدول يمثل ورقة في كلفه الرأي.لم أجد أي جيد (قراءة:بسيطة) أمثلة إعادة التربية البنود مثل هذا, لذلك أنا لست متأكدا من أين تبدأ.شخص ما يمكن أن نقدم بعض النصائح حول كيف يمكن أن تجرب هذا ؟

هل كانت مفيدة؟

المحلول

وبالنظر إلى صفحة html مثل هذا:

<body><br/>
    <table id="my-table">`<br/>
        <tr><br/>
            <td><div>This is the contents of Column One</div></td><br/>
            <td><div>This is the contents of Column Two</div></td><br/>
            <td><div>This is the contents of Column Three</div></td><br/>
            <td><div>Contents of Column Four blah blah</div></td><br/>
            <td><div>Column Five is here</div></td><br/>
        </tr><br/>
    </table><br/>
</body><br/>

التالية مسج كود تحويل خلايا الجدول في علامات التبويب (اختبار في FF 3 و IE 7)

$(document).ready(function() {
    var tabCounter = 1;
    $("#my-table").after("<div id='tab-container' class='flora'><ul id='tab-list'></ul></div>");
    $("#my-table div").appendTo("#tab-container").each(function() {                    
        var id = "fragment-" + tabCounter;
        $(this).attr("id", id);
        $("#tab-list").append("<li><span><a href='#" + id + "'>Tab " + tabCounter + "</a></span></li>");
        tabCounter++;
    });
    $("#tab-container > ul").tabs();
});

للحصول على هذا العمل وأنا المشار إليها التالية مسج الملفات

  • jquery-latest.js
  • ui.core.js
  • ui.tabs.js

وأشرت إلى النباتات.كل.css stylesheet.أساسا أنا نسخ مقطع الرأس من التبويب مسج سبيل المثال

نصائح أخرى

هل يمكن أن تفعل هذا مع مسج ولكن قد جعل صيانة إضافية كابوس.أنصح ضد أفعل هذا / شاشة تجريف لأنه إذا كان المصدر من أي وقت مضى التغييرات حتى لا العمل الخاص بك حول.

هذا يبدو بالتأكيد ممكن.مع مزيج من مسج.إلحاق و مسج.fadeIn و fadeOut يجب أن تكون قادرة على خلق لطيف قليلا كلفه التحكم.

ترى مسج UI/علامات التبويب طريقة بسيطة لإنشاء مجموعة من علامات التبويب على أساس <ul> عنصر ومجموعة من <div>'s: http://docs.jquery.com/UI/Tabs

أود أن أقترح أيضا حقن إضافية الأنماط واستخدام ذلك إلى إظهار/إخفاء وأسلوب القبيح العناصر.

تجميل HTML ليست هذه عملية بسيطة ، لأن كل خط فاصل بين الكلمات هو نص عقدة التعسفي تجميل يخلق ويزيل نص العقد في الطريقة التي يمكن أن تكون ضارة إلى هيكل الوثيقة و من المرجح الضارة إلى المحتوى.أوصي باستخدام برنامج بالفعل فكرت في كل هذه الظروف من خلال مثل http://prettydiff.com/?m=beautify

يبدو وكأنه كنت لا ترغب في HTML تنظيف HTML مرتبة لا ، ولكن في تفاعلية تعزيز HTML ثابتة مكونات (مثلتحويل جدول ثابت في واجهة كلفه).

بعض الردود هنا بالفعل أعطى لك تلميحات مثلباستخدام علامات التبويب مسج, ولكن أنا لا أحب HTML كتابة النهج في إجاباتهم.

IMHO أفضل لاستخراج محتوى خلايا الجدول التي تريد مع مسج محدد ، مثل: 

var mycontent = $('table tr[:first-child]').find('td[:first-child]').html()

ثم يمكنك تغذية هذه البيانات إلى واجهة المستخدم مسج البرنامج المساعد من خلال برمجيا إنشاء علامات التبويب:

$('body').append($('<div></div>').attr('id','mytabs'));
$('#mytabs').tabs({}); //specify tab preferences here
$('#mytabs').tabs('add',mycontent);
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top