إنشاء صفحة
على الرغم من مسج موبايل يعمل على جميع الأجهزة المحمولة، فإنه قد يكون لها بعض مشكلات التوافق على أجهزة الكمبيوتر المكتبية (بسبب دعم CSS3 محدودة).
لهذا البرنامج التعليمي، ونحن ننصح باستخدام متصفح جوجل كروم لأفضل تجربة القراءة.
أدناه، قمنا بإنشاء بسيطة، ومعيار الصفحة مسج الجوال:
مثال
<body>
<div data-role="page" >
<div
data-role="header" >
<h1>Welcome To My Homepage</h1>
</div>
<div data-role="main" class="ui-content" >
<p>I Am Now A Mobile Developer!!</p>
</div>
<div data-role="footer" >
<h1>Footer
Text</h1>
</div>
</div>
</body> انها محاولة لنفسك » وأوضح سبيل المثال:
- و data-role="page" هي الصفحة عرض في المستعرض
- و data-role="header" يخلق شريط الأدوات في أعلى الصفحة (غالبا ما تستخدم للقب أو البحث الأزرار)
- و data-role="main" يحدد محتوى الصفحة، مثل النصوص والصور والأزرار، والأشكال، الخ
- في "ui-content" تضيف فئة الحشو الزائد والهامش داخل محتوى الصفحة
- و data-role="footer" يخلق شريط الأدوات في أسفل الصفحة
- داخل هذه الحاويات، يمكنك إضافة أي عناصر HTML - الفقرات والصور والعناوين، والقوائم، الخ
وHTML5 data-* تستخدم سمات طوال مسج موبايل لإنشاء "touch-friendly" نظرة وجذابة للأجهزة المحمولة.
مضيفا الصفحات في مسج موبايل
في مسج موبايل، يمكنك إنشاء صفحات متعددة في ملف HTML واحد.
فصل كل صفحة مع معرف فريد واستخدام href السمة لربط بينهما:
مثال
<div data-role="page" id="pageone" >
<div data-role="main" class="ui-content">
<a href="#pagetwo" >Go to
Page Two</a>
</div>
</div>
<div data-role="page"
id="pagetwo" >
<div
data-role="main" class="ui-content">
<a href="#pageone" >Go to Page
One</a>
</div>
</div> انها محاولة لنفسك » نصيحة: سوف تتأثر وقت التحميل من قبل تطبيقات الويب مع الكثير من المحتوى (أي النص، وصلات، والصور، ومخطوطات وغيرها). استخدام الملفات الخارجية إذا كنت لا ترغب في ربط صفحات داخليا:
<a href="externalfile.html">Go To External Page</a>
باستخدام صفحات كما الحوارات
مربع الحوار هو نوع من الإطار المستخدم للمزيد من المعلومات الخاصة أو طلب الإدخال.
لإنشاء مربع الحوار الذي يفتح عند نقر المستخدم على رابط، إضافة data-dialog="true" إلى الصفحة التي تريد عرضها على النحو الحوار:
مثال
<div data-role="page" id="pageone">
<div
data-role="main" class="ui-content">
<a href="#pagetwo">Go to Page Two</a>
</div>
</div>
<div data-role="page"
data-dialog="true" id="pagetwo">
<div
data-role="main" class="ui-content">
<a href="#pageone">Go to Page One</a>
</div>
</div> انها محاولة لنفسك »