خط باد على الشاشة عند التمرير

باد وإصبع واحد التمرير في flexmls

نيك في 13 أبريل 2011

آخر اليوم هي من نيك لارسون، أحد المتدربين وتطوير الشبكة FBS والذي كلف بمهمة اتخاذ باد متوافق مع flexmls. وقال انه يناقش التفاصيل الفنية أدناه كيفية نفذها التمرير على جهاز آي باد في flexmls.

-جريج Kilwein

باد: إصبع واحد IFRAME التمرير

عندما بدأنا أول اختبار باد من أجل التوافق مع flexmls، كانت قضية رئيسية واحدة أن التمرير لم تنجح في كثير من الأماكن الأساسية داخل flexmls. بشكل افتراضي على جهاز آي باد، ليس فقط التمرير شعبة تتطلب اثنين من أصابع بدلا من إصبع واحد، ولكن نوافذ الأطر المدمجة ليست قادرة على تمرير على الإطلاق. وكان الهدف توفير إصبع واحد التمرير كلما كان ذلك ممكنا.

الحمد لله، ويوفر باد لنا مع بعض بني كبير في أحداث اللمس التي يمكننا استخدامها لبدء حل المشكلة. باستخدام زوجين من الأحداث، touchstart على وجه التحديد وtouchmove. ونحن قادرون على إنشاء وظيفة البسيطة التي يمكن أن تأخذ الرعاية من تهيئة إصبع واحد التمرير على أي شعبة أو غيرها من العناصر التمرير جانبا من نوافذ الأطر المدمجة (سنتحدث عن نوافذ الأطر المدمجة في وقت لاحق). النبأ العظيم هو أن هذه هي جميلة عبر متصفح متوافق، حتى بين المتصفحات قادرة على اتصال. اختبرته على زوجين متصفحات الجوال، وحتى يبدو للعمل مع Internet Explorer على هاتف ويندوز 7! ذلك بفضل القادمة عبر عدد قليل من المصادر المفيدة، خطرت لي هذه:

ما اعتقدت في البداية كان على وشك أن هذا المشروع الضخم، انتهى تحديد بسيط بفضل المدمج في أحداث اللمس وقليل من البحث.

الآن إلى الجزء الصعب، ونوافذ الأطر المدمجة. تعتمد flexmls على نوافذ الأطر المدمجة لعرض الكثير من المحتوى الذي يراه في جميع أنحاء النظام. المشكلة مع باد هو أنه لا يلعب لطيفة مع إطارات على الإطلاق.

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

على الفور فكرت مجرد التفاف على شعبة من حوله، واستخدام ذلك شعبة التمرير. ومع ذلك، لم يفلح ذلك. المشكلة مع ذلك هو عندما يتم تطبيق وظيفة initMobileScroll إلى الإطار من ومحاولة التمرير، والإطار من يلتقط فقط الأحداث التي تعمل باللمس بدلا من شعبة. حسنا، بعد بعض التفكير وكنت قادرا على مع اثنين من الأساليب.

الطريقة الأولى، "الإصدار 1"، ويشمل وضع شعبة ضعه تماما على IFRAME حتى أحداث اللمس البقاء في سياق نفس النافذة ولا ننشغل بها IFRAME. المشكلة الوحيدة مع هذا الأسلوب هو أنه يجعلها كل شيء في إطار iframe قابل للنقر عليه (مثل وصلات). ومن شأن هذا الخيار أن ننظر بشيء من هذا القبيل:

حسنا هذا هو خيار لائق، ولكن ماذا لو كان يحتاج المستخدمون لتكون قادرة على انقر على الأشياء في إطار iframe؟ الطريقة الثانية، "الإصدار 2"، ويتناول هذه المسألة. في حين أنه يتطلب محتوى مؤطرة ليتم استضافتها على نفس المجال مثل الوثيقة الأصلية، وأنها تعمل بالتأكيد.

ما يمكننا القيام به هو مجرد الحفاظ على الإطار من مخفية واستخدام "HTML داخلي" الملكية لسحب محتوى من الإطار من بعد هو تحميله. يمكننا ثم ضع المحتويات إلى شعبة، وتطبيق لدينا التمرير المحمول لشعبة بدلا من IFRAME.

فإن هذا الأسلوب ننظر بشيء من مثل ما يلي:

هذا الى حد كبير ذلك. مجرد أخذ المحتوى من IFRAME مخفي ورميها إلى شعبة، الذي يتصرف أفضل بكثير على باد. الآن كل مرة تغيير مصدر إطار iframe، وسوف شعبة إعادة تحميل تلقائيا مع محتوى جديد! شيء واحد هو أن نلاحظ أن HTML داخلي يعمل فقط عندما يتم استضافة المحتوى في iframe على نفس المجال. إذا لم تكن كذلك، فإن المتصفح كتلة المحاولة.

خط باد على الشاشة عند التمرير

آمل أن يكون هذا يعطي بعض الضوء على كيفية إنجاز التمرير على جهاز آي باد.

توسيع نوافذ الأطر المدمجة حسب التصميم. أعتقد التمرير = "لا" وتعطيله، ولكن لست متأكدا إذا كنت سوف تكون بعد ذلك قادرة على تمرير محتويات من شبيبة.

ولكن هذا هو بداية رائعة كبيرا بالنسبة لي. شكر

نيك 20 يونيو 2011 في 07:46

شكر! يمكنك دائما محاولة إضافة المضاعف لtouchMovedY وtouchMovedX. أنا لست متأكدا مما اذا كان من شأنه أن يشعر الطبيعي أم لا عند التمرير، ولكن سيكون من يستحق المحاولة.

أعتقد أنا في عداد المفقودين شيء هنا.

أنا في حاجة إلى الإطار من لاستضافة المحتوى الخاص بي الرئيسي على باد (وأي "الشاشة الكبيرة" الأخرى) نظرا لصفحة "انزلاق المحتوى 'تغييرات المشتركة بين اي فون - تراجع من اليمين مع الشرائح في وقت واحد إلى اليسار على سبيل المثال. في هذه الحالة، فشل "شعبة" كلمة دلالية لإخفاء محتوى انزلاق بإظهار تماما كل من الصفحات الواردة والصادرة، جنبا إلى جنب، لأنها الشريحة في مكانها. لا تبدو جيدة.

فعدت إلى بلدي نموذج الإطار من العمر، وضعت أصلا لعرض محتوى فلاش تراكب HTML. في الإطار من "الأقنعة" للمحتوى انزلاق عرض فقط وجهة نظر صفحة واحدة على النحو المنشود. وتهدف هذه صفحات المحتوى مع رأس الثابتة وتذييل الصفحة في أعلى داخل وأسفل الشاشة الإطار من، و"شعبة" العلامة مع محتوى تمرير بين - هدفي المطلوب بالضبط.

هذا سكرولر هو واحد الإصبع للتمرير، والمحتوى هو اختيار والصفحة هي، انتقد قادرة كذلك.

لذلك أجد وظيفة أعلاه قليلا محير. بالنسبة لي، فإن "شعبة" البطاقة هي / لم يكن حلا قابلا للتطبيق. ولكن الإطار من هو الكمال، ويبدو أن تعمل بشكل جيد في بلدي التجارب محدودة. (ملاحظة: لدي أكثر قليلا جدا جافا سكريبت من المذكورة أعلاه).

نيك 7 ​​سبتمبر 2011 في 10:45

ذلك مثير للاهتمام. آخر بدا لي، وقد أشخاص لديهم من نصف طن من مشاكل مع نوافذ الأطر المدمجة والتمرير على جهاز آي باد. ما لم يكن أحد من الإصدارات الجديدة من دائرة الرقابة الداخلية حددت منذ بعض المشاكل. في هذه الحالة، رهيبة! مجرد القيام جوجل للبحث من "نوافذ الأطر المدمجة باد" سيتم ملء لكم على بعض من المشاكل لقد تم التعامل مع.

مايكل 7 سبتمبر 2011 في 12:10

"شيء واحد هو أن نلاحظ أن HTML داخلي يعمل فقط عندما يتم استضافة المحتوى في iframe على نفس المجال. إذا لم تكن كذلك، فإن المتصفح كتلة المحاولة ".

غير متأكد ما يعني هذا - المحتوى المعروض في الإطار من أن تتواجد على نفس الخادم كموقع الويب التي يتم عرض إطار iframe؟ إذا كان الأمر كذلك، فإنه هزيمة الهدف الرئيسي من بينهم إطارات iFrames في موقع على شبكة الانترنت: بما في ذلك المحتوى لا استضاف هناك.

شكرا للتوضيح

نيك 7 ​​سبتمبر 2011 في 10:29

وهذا هو الصحيح، والمحتوى يجب أن يكون على نفس الخادم بسبب سياسة المصدر نفسه (en.wikipedia / ويكي / Same_origin_policy).

في حالتنا، نحن تستخدم أساسا نوافذ الأطر المدمجة في الماضي لعرض مختلف الميزات / العناصر / الخ. على الصفحة بدلا من محتوى من نطاق آخر. صفحة ويكيبيديا على عنصر iframe لديه تفسير جيد جدا لماذا اخترنا في البداية استخدامها: en.wikipedia / ويكي / HTML_element # إطارات

ومع ذلك، الآن أن هناك دعما أفضل بكثير لطلبات XMLHTTP (في شكل اياكس)، معظم (إن لم يكن كل) من هذه الحالات التي أجريناها في ليمكن تجنبها.

اهلا بالجميع. لقد نسيت عن هذا المنصب، آسف.

كما يمكنني استخدام iScroll Cubiq في 4 حاليا لتمرير المحتوى. وهذا يسمح رأس الثابتة وتذييل أثناء التمرير المحتوى. أساسا كل ما يلزم. على أي حال، هنا هو ارتباط إلى إصدار تجريده من سكرولر في حاوية قص (لا الإطار من) وهو مصمم (العمل في عملية للتو) على أي شيء - متصفحات، آي باد، اي فون، وما إلى ذلك فون صغير جدا بحيث يختفي الحاوية.

هذا يستخدم مسج كأساس متاحة عبر المتصفح وتستخدم أيضا وحدة تحكم JavaScriptMVC كمدير "القطعة". على سبيل المثال، وأزرار وجميع لا تعمل. هو الحال بالنسبة لسكرولر عرض فقط. سكرولر يعمل وكأنه حلم.

(النص الذهب في أعلى هو سجل التصحيح النشط).

فإن استخدام HTML داخلي يعمل، إذا ما توفرت بعض محتويات حيوي بواسطة جافاسكريبتس وكان أن معالجات الأحداث أيضا المرفقة حيوي للعناصر؟

الوظائف ذات الصلة

  • لا تغطي خطة AppleCare العادية التلف العرضي كما يلي شروط الضمان العامة التي تغطي الاستخدام العادي عموما وتغطي إلا إذا كان على حد سواء إعاقة طبيعية ارتداء ...

  • على افتراض أننا نتحدث عن جهاز iPad من خدمة (لا عفا عليها الزمن) أنها تعتمد نسبيا على ما إذا كان لديك تغطية AppleCare زائد. تقدم AppleCare بالاضافة الى ما يصل الى اثنين التلف العرضي ...

  • متصدع بلدي باد الجديد! ماذا أفعل؟ وقال Tracilynnribble: مرحبا! أنا جديدة على العالم الالكتروني ولها 3. باد أنا تصدع باد بلدي ليست المحطمة لكنني لم يترك شرخا كبيرا. أنا بحاجة لــ...

  • حتى قادرة، فإنك لن ترغب في وضعها. رقيقة جدا وخفيفة، سوف لا يكون لديك ل. ليس مجرد عرض أرق. وعرض جميل. القوة الهائلة. في شكل الحد الأدنى. حتى بطارية ساعة 10 غير ...

  • اي فون أو آي باد عدم فرض؟ وفيما يلي كيفية اصلاحها! لا يمكن اتهام اي فون الخاص بك أو تطلب الشركة؟ وفيما يلي بعض الإصلاحات يمكنك أن تجرب! إذا كنت لا يمكن اتهام اي فون الخاص بك، آي باد أو آي بود، سواء كان ذلك في ...