تنزيل Smart Web App Banner - تنزيل Smart Web App Banner المصدر

Smart Web App Banner

بيانات الموقع

Version 1.5

تنزيل

لافتة تطبيقات الويب الذكية jQuery

عنوان URL الرسمي للمشروع: http://kurtzenisek.com/p/smart-web-banner/

هل تبحث عن لافتة iOS 6 & 7+ الذكية ، ولكنها حزينة من أنها تدعم التطبيقات فقط في متجر التطبيقات وليس تطبيقات الويب؟ هذا البرنامج النصي الصغير الذي يعمل به JQuery هو هنا للمساعدة. أضف هذا البرنامج النصي الصغير إلى موقعك ودعوة زوارك إلى حفظ موقعك على شاشتهم الرئيسية إلى جانب بقية تطبيقاتهم!

معاينة سريعة

متاح على: http://kurtzenisek.com/p/smart-web-banner/

سمات

يبدو أن iOS 6 & 7+ Smart Banner Look & Feel ، ولكن تم صنعه لتطبيقات الويب!
يعرض بذكاء تصميم لافتة iOS 6/7+ اعتمادًا على ما يستخدمه الزائر.
قم بانزلاق الموقع بأكمله لأسفل بدلاً من عرقلة الصفحة من زوارك مع نافذة منبثقة.
أضف CSS & JavaScript ، واتصل بالنص ... هذا كل شيء. تستخدم الرسومات CSS 3 واستخدم الرموز المدمجة في دقة شبكية العين (وهي مثالية ل Safari المتنقلة) لذلك لا توجد صور للقلق.
يتم عرضه فقط عند استخدام Safari المحمول لأن هذا هو المتصفح الوحيد مع تكامل الشاشة الرئيسية.
حدد المدة التي ستستغرقها قبل عرض اللافتة مرة أخرى بعد إغلاقها وبعد أن يضغط الزائر "Save" (يتجنب الزوار المزعجين).
اكتشاف الأيقونات التلقائية عبر العلامة (لا يتم عرضه إذا لم يكن متاحًا ، يتيح لك الكتابة فوقه بسهولة إذا رغبت في ذلك ، ويضيف حتى لمعان إلى الرمز إذا اكتشف أنه لم يتم ضبطه [يمكن أيضًا تعيينه عبر خيار]).
يمكن تلقائيًا إضافة <meta name="apple-mobile-web-app-capable" content="yes" /> إذا لم يكن موجودًا بالفعل (يحفظ الموقع كتطبيق ويب عند إضافته إلى الشاشة الرئيسية ويجعله لا يتم عرض اللافتة عند إعادة النظر في الموقع).
موضوعات Light & Dark لجعلها تناسب تصميم موقعك (أنا أحب كليهما حقًا). معاينة السمات مع الأزرار على http://kurtzenisek.com/p/smart-web-banner/
إظهار/إخفاء اللافتة عند الطلب باستخدام <a href="#show">$().smartWebBanner('show');</a> & <a href="#hide">$().smartWebBanner('hide');</a></a> .
مشغلات الأحداث لـ SWB: معروضة ، SWB: مغلق ، SWB: تعليمات ، و SWB: التعليمات: مغلقة على عنصر اللافتة لإجراء إجراءات إضافية عند عرض اللافتة أو التعليمات أو إغلاقها.
يضيف فصولًا إلى عنصر HTML الخاص بالصفحة بناءً على حالة الشعار لضبط جوانب الموقع عبر CSS بناءً على ولاية اللافتة.
يمكن تحجيم/تغيير حجمها لتناسب منفذ عرض الهاتف المحمول في موقعك من خلال تغيير حجم الخط من #SmartWebBanner & #swb-instructions عبر CSS للحصول على مقاييس الراحة معها (إضافة .Ipad إلى المحدد لأحجام iPad الخاصة).
تقع الإرشادات الخاصة بالجهاز ("إضافة إلى الشاشة الرئيسية" في الجزء العلوي من جهاز iPad أثناء وجوده في أسفل جهاز iPhone). حتى يتطابق مع مظهر ومظهر المنبثقة الأصلية للجهاز (اختلاف اللون والحجم الدقيق).
يتبادل عنوان URL الخاص بالصفحة مع عنوان URL المحدد (باستخدام HTML5 REPLACESTATE) ، وهذا هو ما يأخذه أيقونة الشاشة الرئيسية الزائر بعد حفظه بدلاً من الصفحة التي حدثوا فيها عندما ذهبوا لإضافته إلى شاشتهم الرئيسية (وهو السلوك الافتراضي). على سبيل المثال ، اجعله زر الشاشة الرئيسية هو دائمًا صفحتك الرئيسية.
يتبادل عنوان الصفحة مع العنوان المحدد بحيث يكون هذا ما هي العلامة الافتراضية للرمز عند إضافتها إلى الشاشة الرئيسية (والتي من شأنها أن تستخدم علامة Apple-Mobile-Web-App-Title Meta الحالية أو عنوان الصفحة). يبدو بسيطًا ، لكن هذا يمكن أن يكون مؤثرًا.
خيار التصحيح المفيد (يعين لافتة ليتم عرضها في جميع المتصفحات وتجاهل ملفات تعريف الارتباط المغلقة/المحفوظة بالفعل) يجعل معاينة/اختبار الراية نسيمًا.
قابلة للتكوين بشكل لا يصدق عبر الكثير من الخيارات! *انظر المثال أدناه للحصول على القائمة الكاملة.

خريطة الطريق

تنفيذ الدعم والأناقة Chrome لأجهزة Android.
قم بتحسين ميزة AutoApp التي تضيف علامة meta mobile-web-web-app بحيث تمنع أيضًا الروابط العادية (غير Ajax) من فتح Safari (ما لم تترك المجال أو الذهاب إلى ملف الوسائط [بسبب عدم وجود زر استرداد]). قم بتغيير إعداد AutoApp الافتراضي لأنه الآن أكثر فائدة للمواقع القياسية.
فكر في التنفيذ في نموذج WordPress Plugin لأولئك الذين يبحثون عن هذه الوظيفة دون القدرة/الوقت على تنفيذ البرنامج النصي نفسه (اجعله يسحب اسم المدونة للعنوان والوصف لـ "المؤلف") ، وابحث في إنشاء صفحة إعدادات البرنامج المساعد لخيارات البرنامج النصي. أيضًا ، يجب تحديث البرنامج النصي لإقامة شريط مسؤول WordPress تلقائيًا.
إصلاح رمز/إعادة كتابة/تنظيف.
قم بإنشاء نظام موضوع يسمح بتوفير ملفات CSS بشكل فردي لتحديد التصميم (منفصل عن الأنماط الأساسية). هذا ممكن من الناحية الفنية ، لكن العديد من أنماط CSS الحالية تحتاج إلى الكتابة فوقها لإنجاز تصميم جديد.
الحصول على ملاحظات من المجتمع! (راسلني)

Changelog

الإصدار 1.5 - 11 أغسطس 2017

تمت إضافة swb:shown ، swb:closed ، swb:instructions-shown و swb:instructions-closed إلى عنصر $('#smartWebBanner') الذي يتم إطلاقه عند عرض اللافتة وإغلاقها على التوالي. يسمح هذا بحدوث الإجراءات عندما يتم عرض اللافتة/مخفيها ( $('#smartWebBanner').on('swb:closed',function(){alert('Banner was closed');}); سبيل المثال
جعل عنصر HTML لديه .swb-shown و .swb-closed تبديله وفقًا لما إذا تم عرض اللافتة أو إغلاقها. يتيح ذلك تغيير أي أجزاء من الموقع بناءً على Wheter يتم عرض اللافتة من خلال الرجوع إلى فئات CSS هذه.
البرنامج النصي المحدث لمتابعة JShint.
تم تنفيذ SCSS لورقة أنماط العمل.
تأكد من <title> "Apple-Mobile-Web-App-title".

الإصدار 1.4 - 24 مايو 2014

تم تحديثه لاستخدام تصميم iOS 7 على أجهزة iPhone و iPad التي تعمل على تشغيل iOS 7 (أيقونات جديدة ، ومواقع ، وملابس منبثقة ، والتصميم العام).
الآن ، قم بتصميم الأسلوب التلقائي iOS 6/7 عند الاقتضاء. هام: لقد تغيرت أسماء الموضوعات حيث يوجد الآن "Auto" (افتراضي) ، "iOS 6" ، "iOS 7" ، و "Dark". سيستخدم Auto إما iOS 6 و 7 اعتمادًا على ما يعمله الجهاز.

20 مايو 2014

JQuery Smart Web App Banner متاح الآن على Cdnjs.com كخيار CDN المستضافة!

الإصدار 1.3 - 22 مارس 2013

تمت إضافة الميزة التي تبادل عنوان URL الخاص بالصفحة بعنوان URL المحدد عبر خيارات البرنامج النصي. هذا يعني أنه يمكنك تعيينه على الصفحة الرئيسية لموقعك بحيث يؤدي استخدام ميزة الإضافة إلى الشاشة الرئيسية إلى حفظ الصفحة الرئيسية بدلاً من الصفحة التي يكون الزائر على (السلوك الافتراضي).
لا تزال عالقة على jQuery أقدم من الإصدار 1.7؟ تمت إضافة ميزة تبديل عنوان URL هذه إلى هذا الإصدار أيضًا وتتوفر هنا (يوصى بخلاف ذلك بتشغيل أحدث إصدار موجود أدناه).

الإصدار 1.2 - 20 مارس 2013

تم تغيير كيفية تنظيم CSS لاستخدام ثلاث قيم PX فقط واستخدام EM للباقي. هذا يسمح بتغيير مقياس اللافتة مع الاستمرار في منع أحجام الخطوط الخارجية من التأثير عليه عن غير قصد.

الإصدار 1.1.2 - 20 مارس 2013

تم تبديل Out Out .Live () لـ .on () لتوافق jQuery 1.9+.
يتطلب الآن JQuery 1.7+ ، ولكن يمكن تنزيل الإصدار السابق هنا (باستخدام أحدث CSS سيعمل).

الإصدار 1.1.1 - 3 أكتوبر 2012

تمت إضافة خيار لتمكين الإضافة التلقائية لعلامة MPITA-Web-APP META (معطل بشكل افتراضي).

الإصدار 1.1 - 27 سبتمبر 2012

تمت إضافة الميزة التي تم تبديل سمة الصفحة <title> بالصفحة مع العنوان المحدد عبر خيارات البرنامج النصي.
تمت إضافة خيار لتعطيل ميزة مبادلة العنوان الجديدة.

الإصدار 1.0 - 19 سبتمبر 2012

الإصدار الأولي (نفس اليوم مثل iOS 6).

دليل البدء في المبتدئين

دليل البدء المفتوح

مثال (باستخدام الإعدادات الافتراضية)

أمثلة/basic.js

مثال (مع خيارات كاملة)

أمثلة/خيار كامل

مثال على إجراء الإجراءات عندما يتم عرض اللافتة و/أو إخفائها

https://github.com/kzeni/Smart-web-app-banner/blob/master/examples/perform-actions-on-toggle.js

تحميل الآن

تحميل
استخدام CDNJS

إنه مفتوح المصدر: يمكنك عرضه على Github والتنزيل من هناك أيضًا!

يتطلب: jQuery v1.7 أو في وقت لاحق لا يزال يستخدم jQuery 1.3.2 - 1.8.x؟ استخدم ملف jquery.smartwebbanner.pre-1.7.min.js بدلاً من ذلك.

يدعم

أرسل لي

الأسئلة الشائعة

هل تحتاج إلى توفير الصفحة الرئيسية لموقعك بدلاً من الصفحة التي يوجد فيها الزائر؟ يحفظ حفظ صفحة على الشاشة الرئيسية الصفحة الحالية بشكل افتراضي ، ولكن يمكنك تعيين خيار عنوان URL ليكون أي عنوان URL الذي ترغب في حفظه ويعتني المكون الإضافي بالباقي.

نصيحة: قم بتعيين عنوان URL على "/" لجعله دائمًا الصفحة الرئيسية لموقعك بينما تكون مستقلاً عن المجال نفسه. أيضًا ، لا يمكن أن يكون مجالًا مختلفًا لأسباب أمنية.

هل تحتاج إلى ضبط حجم اللافتة لتناسب مقياس موقعك؟ تم تصميم CSS المكون الإضافي هذا للإشارة إلى عنصرين (مع متغير واحد) الذي يحدد بعد ذلك حجم كل شيء آخر. ما عليك سوى تغيير حجم الخط لـ #SmartWebBanner & #SWB-instructions (إضافة .IPAD لأحجام iPad الخاصة) في CSS الخاصة بك (أو تعديل المكون الإضافي مباشرة) لتناسب احتياجاتك.

تتطلع إلى استخدام هذا للترويج لتطبيقات Android غير المستندة إلى الويب و/أو تطبيقات iOS على إصدارات iOS الأقدم و/أو المتصفحات المختلفة؟ تحقق من Jasny's Fork لتطبيقات Android و IOS الأقدم من iOS 6. تحقق أيضًا من شوكة Ijason التي تهدف إلى إتاحتها لتطبيقات iOS في متصفحات iOS الأخرى (Google Chrome) وإصدارات IOS الأقدم. ملاحظة: كلاهما للتطبيقات غير ويب. هذا هو المكون الإضافي الوحيد الذي يهدف إلى تطبيقات الويب (على حد علمي).