[تحدي JQuery !] اريد طريقة لحل مشكلة CSS داخل X ربما حلها بالـ JQuery, ممكن مساعدة؟

المظفر بالله · 22-04-2011, 11:56 PM

السلام عليكم ورحمة الله وبركاته

اخواني الكرام عندي مشكلة بتعديل برمجية معمولة على JSP , المهم المشكلة انه اريد تعريب البرمجية, المشكلة هي ان الستايل الموجود في هذه المنتج رغم انه عالمي ان الستايل موجود على شكل inline style بمعنى كل تاج ينعمل له اتريبيوت style وينكتب الستايل داخله, للتوضيح انظروا المثال التالي:

الملف يحتوي على اكواد HTML :

إقتباس:

<div style="text-align: left; margin-left:2px;">Something</div>

طبعا المشكلة انه عدد ملفات الجي اس بي كبير جداً, لكن اريد ان اضع كود في الهيدر يقوم بقراءة كل الصفحة وقلب الستايلات بحيث يصبح

إقتباس:

<div style="text-align: right; margin-right:2px;">Something</div>

هل هذا ممكن بالجيكويري ؟؟؟؟

بمعنى اريد ان يبحث كود الجيكويري عن كل tag عنده style يخص text-align ويقرأه ويقوم بكتابة عكسه, ان كان left يجعله right والعكس صحيح !!!

بحيث احافظ على الملفات بدون تعديل, وبنفس الوقت يكون مريح؟

تحدي صحيح

وشكراً لكم ...

خالد الحضري · 23-04-2011, 02:27 AM

سهلة إن شاء الله

جرب التالي في الهيدر (JQuery)

كود PHP:

  <script type="text/javascript">
$(document).ready(function() {
    $('*').css({
        'text-align': 'right' ,
        'margin-left' : '0' ,
        'margin-right' : '2px'
    });
});
</script>

وفقك الله .

ahmad sadiq · 03:54 AM

جرب هذا:

كود HTML:

<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1.5.js"></script> </head> <body> <div style="text-align: left; margin-left:2px;background:red">Something left</div> <div style="text-align: right; margin-right:2px;;background:blue">Something right</div> <script>
    $(document).ready(function () {
      $("*").each(function (i) {
        if ($(this).css("text-align") != "right") {
          $(this).css({
        'text-align': 'right' ,
        'margin-left' : '0' ,
        'margin-right' : '2px'
    });
        } else {
          $(this).css({
        'text-align': 'left' ,
        'margin-left' : '2px' ,
        'margin-right' : '0px'
    });
        }
      });
    });
</script> </body> </html>

المظفر بالله · 23-04-2011, 12:35 PM

إقتباس:

المشاركة الأصلية بواسطة ahmad sadiq

جرب هذا:

كود HTML:

<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1.5.js"></script> </head> <body> <div style="text-align: left; margin-left:2px;background:red">Something left</div> <div style="text-align: right; margin-right:2px;;background:blue">Something right</div> <script> $(document).ready(function () { $("*").each(function (i) { if ($(this).css("text-align") != "right") { $(this).css({ 'text-align': 'right' , 'margin-left' : '0' , 'margin-right' : '2px' }); } else { $(this).css({ 'text-align': 'left' , 'margin-left' : '2px' , 'margin-right' : '0px' }); } }); }); </script> </body> </html>

صدق غابت عن بالي, لا اعرف لماذا فكرت انه الامر معقد وترسخت هذه الفكرة ببالي حتى ظننت انه حلها تحدي

, << خبرتي بسيطة بالجيكويري

أظن رح تشتغل ان شاء الله ...

الاخ خالد بارك الله فيك , لكن الكود اللي كتبته حضرتك فيه مشكلة انه يعمم على كل التاجز الموجودة في الصفحة, انا اريد فقط قلب الموجود يعني ممكن يكون شمال اخليه يمين والعكس ...

المظفر بالله · 23-04-2011, 01:30 PM

طيب ممكن عمل نفس الشيء بالـ YUI ... ؟

خالد الحضري · 23-04-2011, 05:54 PM

إقتباس:

المشاركة الأصلية بواسطة المظفر بالله

الاخ خالد بارك الله فيك , لكن الكود اللي كتبته حضرتك فيه مشكلة انه يعمم على كل التاجز الموجودة في الصفحة, انا اريد فقط قلب الموجود يعني ممكن يكون شمال اخليه يمين والعكس ...

صدقت ، و ردي كان مفتاح فقط و ليس حلا

وفقك الله .

المظفر بالله · 23-04-2011, 06:19 PM

إقتباس:

المشاركة الأصلية بواسطة خالد محمد الحسن

صدقت ، و ردي كان مفتاح فقط و ليس حلا

وفقك الله .

بارك الله فيك , لكن تعرف YUI ...

لاكون واضح انا اعدل على الفريسكو , والعربي فيه مشكلة , اقصد الفريسكو اكسبلورر, ففكرت مبدئياً بتعديله بالجيكويري, لكن كنت نسيت انه يتعامل مع YUI فهل يوجد حل

المظفر بالله · 24-04-2011, 12:38 AM

إقتباس:

المشاركة الأصلية بواسطة ahmad sadiq

جرب هذا:

كود HTML:

<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1.5.js"></script> </head> <body> <div style="text-align: left; margin-left:2px;background:red">Something left</div> <div style="text-align: right; margin-right:2px;;background:blue">Something right</div> <script> $(document).ready(function () { $("*").each(function (i) { if ($(this).css("text-align") != "right") { $(this).css({ 'text-align': 'right' , 'margin-left' : '0' , 'margin-right' : '2px' }); } else { $(this).css({ 'text-align': 'left' , 'margin-left' : '2px' , 'margin-right' : '0px' }); } }); }); </script> </body> </html>

بالمناسبة اخي احمد, هنالك تاجز لا تملك margin سيضيف الكود عليها مارجن, هل هذا يؤثر !, لا اقصد بالتأثير المرئي فبتأكيد لن يكون هنالك مشكلة لانه مثلا الافتراضي هو 0 , لكن اقول من حيث السورس كود, هل يؤثر على سرعة التصفح ؟

أظن الجواب لا ! , صحيح ؟

واذا كان عندك علم بالـ YUI هل يوجد حل من خلاله ..

بارك الله فيك

المظفر بالله · 11:20 AM

إقتباس:

المشاركة الأصلية بواسطة ahmad sadiq

جرب هذا:

كود HTML:

<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1.5.js"></script> </head> <body> <div style="text-align: left; margin-left:2px;background:red">Something left</div> <div style="text-align: right; margin-right:2px;;background:blue">Something right</div> <script> $(document).ready(function () { $("*").each(function (i) { if ($(this).css("text-align") != "right") { $(this).css({ 'text-align': 'right' , 'margin-left' : '0' , 'margin-right' : '2px' }); } else { $(this).css({ 'text-align': 'left' , 'margin-left' : '2px' , 'margin-right' : '0px' }); } }); }); </script> </body> </html>

وما رأيك بهذا الكود :

كود PHP:

  $(function () {
    $("*").each(function (i) {
        var align = $(this).css("text-align");
        var leftPadding = $(this).css("padding-left");
        var rightPadding = $(this).css("padding-right");
        var leftMargin = $(this).css("margin-left");
        var rightMargin = $(this).css("margin-right");
        var floatVal = $(this).css("float");

        if (align == "left") {$(this).css({'text-align': 'right'});} 
        else if (align == "right"){$(this).css({'text-align': 'left'});}
        if (floatVal == "left") {$(this).css({'float': 'right'});}
        else if (floatVal == "right"){$(this).css({'float': 'left'});}
        
        if (rightPadding != leftPadding)
        {
            $(this).css("padding-left") = rightPadding;
            $(this).css("padding-right") = leftPadding;
        }
        if (rightMargin != leftMargin)
        {
            $(this).css("margin-left") = rightMargin;
            $(this).css("margin-right") = leftMargin;
        }
    });
});

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

ahmad sadiq · 24-04-2011, 12:41 PM

لا والله ما بعرف بال yui
الصراحة لم يعجبني استعمال مكتبات الجافاسكربت لهذه المهمة
اﻻفضل ان يتم ذلك يدويًا،
عن طريق التعابير القياسية، او عن طريق تطبيق للاخ خليل سليم طرحه لهذا الغرض

massalha · 24-04-2011, 01:05 PM

ممكن حل من عندي يا شباب ...

أن تضيف خاصية كاش لموقعك يقوم بمهمتان:
1. حفظ ملفات كاش
2. قلب الستايل كيفما تريد.

أي ... أن تعمل دالة JS تقوم بقلب الستايل ... وأيضاً تحفظ النتيجة في ملفات كاش ... عصفورين في حجر ...

أو ....

ان تستعمل دريم ويفر مثلاً ... وتقوم بالبحث في كل الملفات التي بها text-align:left وغيرها ... وتقلبها الى التي تريد ... أو
style='text-align:left;padding-right:4px'
الى
class='something'

شكراً

فهد علي · 24-04-2011, 06:52 PM

ولا تتعب نفسك
في ثواني يقلب لك الاستايل.
http://www.ahmadh.com/tools/cssmirror/

المواضيع المشابهه
الموضوع	كاتب الموضوع	القسم	الردود	آخر مشاركة
[طلب مستعجل] حركة تقلب اخبار او مقالات بالـ JQuery كيف اعملها	المظفر بالله	الويب والويب 2.0 والـ Semantic Web	6	15-01-2011 02:47 AM
مشكلة ترتيب ندا الدوال في JQuery	soma	البرمجية القياسية Ajax +XML+ CSS+ JavaScript وغيرها	0	04-06-2009 12:29 AM
صناعة داله داخل jquery	MiNi.SpIdEr	البرمجية القياسية Ajax +XML+ CSS+ JavaScript وغيرها	1	07-03-2009 08:44 AM
نوافذ استعلامية وتنبيهية بالـ jQuery	apitos	البرمجية القياسية Ajax +XML+ CSS+ JavaScript وغيرها	8	04-02-2009 02:18 AM
حل مشكلة الـ height بإستخدام JQuery !	PS-LITE	البرمجية القياسية Ajax +XML+ CSS+ JavaScript وغيرها	0	24-01-2009 12:31 AM

أدوات الموضوع
مشاهدة نسخة مطبوعة إرسال هذه الصفحة