موبايل مسج موبايل
يوفر مسج موبايل موضوعين نمط مختلف، "a" و "b" - مع كل ألوان مختلفة للأزرار والحانات، وكتل المحتوى، وهلم جرا.
لتخصيص مظهر من التطبيق الخاص بك، استخدم data-theme السمة، وتعيين السمة مع بريد إلكتروني:
<div data-role="page" data-theme="a|b" >
| القيمة | وصف | مثال |
|---|---|---|
| a | النص سوداء على خلفية رمادية خفيفة لمحتوى الصفحة النص سوداء على خلفية رمادية للالرؤوس والتذييلات النص سوداء على خلفية رمادية فاتحة للأزرار نص أبيض على خلفية زرقاء لأزرار النشطة النص الأزرق على وصلات نص رمادي فاتح (نائبا) أو نص أسود (القيمة) على خلفية بيضاء لحقول الإدخال | جربها |
| b | نص أبيض على خلفية رمادية داكنة لمحتوى الصفحة نص أبيض على خلفية رمادية داكنة لالرؤوس والتذييلات نص أبيض على خلفية الفحم لأزرار نص أبيض على "cyan" خلفية زرقاء لأزرار النشطة "Cyan" النص الأزرق على وصلات النص الرمادي (نائبا) أو نص أبيض (القيمة) على خلفية سوداء لحقول الإدخال | جربها |
لأزرار مع class="ui-btn" ، استخدم "ui-btn-a|b" الطبقة أسلوب زر إما رمادي (افتراضي) أو الأسود:
<a href="#" class="ui-btn ui-btn-a|b" >Button</a>
و "a" ويستخدم موضوع لمعظم العناصر، والعناصر التابعة غالبا ما يرث موضوع الأم (أو الصفحة).
سمات رأس وتذييل
مثال
<div data-role="header" data-theme="b"></div>
<div data-role="footer"
data-theme="b"></div>
انها محاولة لنفسك » سمات رأس وتذييل في الحوارات
مثال
<div data-role="page" data-dialog="true" id="pagetwo">
<div
data-role="header" data-theme="b"></div>
<div
data-role="footer" data-theme="b"></div>
</div> انها محاولة لنفسك » أزرار تطبيق السمات
سمات الأيقونات
مثال
<a href="#" class="ui-btn ui-btn-b ui-icon-search
ui-btn-icon-notext">Search</a>
انها محاولة لنفسك » سمات بالنوافذ
أزرار تطبيق السمات في رأس وتذييل
مثال
<div data-role="header">
<a href="#" class="ui-btn
ui-btn-b">Home</a>
<h1>Welcome To My Homepage</h1>
<a href="#" class="ui-btn">Search/a>
</div>
<div data-role="footer">
<a href="#" class="ui-btn ui-btn-b">Add Me On Facebook</a>
<a href="#" class="ui-btn">Add Me On Twitter</a>
<a href="#"
class="ui-btn ui-btn-b">Add Me On Instagram</a>
</div>
انها محاولة لنفسك » البارات سمات الملاحة
مثال
<div data-role="footer" data-theme="b">
<h1>Insert Footer Text
Here</h1>
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="home" data-theme="a">Button 1</a></li>
<li><a href="#" data-icon="arrow-r">Button 2</a></li>
<li><a href="#" data-icon="arrow-r">Button 3</a></li>
<li><a href="#" data-icon="search" data-theme="a">Button 4</a></li>
</ul>
</div>
</div> انها محاولة لنفسك » لوحات سمات
سمات زر قابل للانهيار والمحتوى
مثال
<div data-role="collapsible" data-theme="b" data-content-theme="b">
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded
content.</p>
</div> انها محاولة لنفسك » قوائم سمات
مثال
<ul data-role="listview" data-theme="b">
<li><a href="#">List
Item</a></li>
<li><a href="#">List
Item</a></li>
<li data-theme="a"><a href="#">List
Item</a></li>
<li><a href="#">List Item</a></li>
</ul> انها محاولة لنفسك » أزرار تطبيق السمات سبليت
سمات قوائم لطي
مثال
<div data-role="collapsible" data-theme="b"
data-content-theme="b">
<ul data-role="listview">
<li><a href="#">Agnes</a></li>
</ul>
</div> انها محاولة لنفسك » أشكال تطبيق السمات
مثال
<label for="name">Full Name:</label>
<input type="text" name="text"
id="name" data-theme="b">
<label for="colors">Choose Favorite
Color:</label>
<select id="colors"
name="colors" data-theme="b">
<option value="red">Red</option>
<option value="green">Green</option>
<option
value="blue">Blue</option>
</select> انها محاولة لنفسك » سمات أشكال جاهزة
مثال
<fieldset data-role="collapsible" data-theme="b" data-content-theme="b">
<legend>Click me - I'm collapsible!</legend> انها محاولة لنفسك » اضافة مواضيع جديدة
يتيح مسج موبايل أيضا إضافة مواضيع جديدة إلى صفحات المحمول الخاص بك.
إضافة أو تعديل موضوعات جديدة عن طريق تحرير ملف CSS (إذا كان لديك تحميل مسج موبايل). مجرد نسخ كتلة من الأساليب وإعادة تسمية الطبقات مع اسم بريد إلكتروني (تشيكوسلوفاكيا)، وضبط الألوان والخطوط كما تريد.
يمكنك أيضا إضافة أساليب جديدة باستخدام الفئات موضوع في وثيقة HTML - إضافة الطبقة "واجهة المستخدم bar- (من الألف إلى الياء)" لأشرطة الأدوات، "واجهة المستخدم بين الهيئة (من الألف إلى الياء)" للمحتوى واجهة المستخدم، صفحة theme- ( من الألف إلى الياء) "للصفحة:
مثال
<style>
.ui-bar-f {
color: red;
background-color: yellow;
}
.ui-body-f {
font-weight: bold;
color: white;
background-color: purple;
}
.ui-page-theme-f {
font-weight: bold;
background-color: green;
}
</style>
انها محاولة لنفسك » في الإصدارات السابقة من مسج جوال، وتستخدم جافا سكريبت على التعامل مع كم عنصر يجب أن ترث موضوع الأصل. اعتبارا من 1.4، ويركز الإطار على تحسين الأداء وتم استبدال جافا سكريبت عن طريق CSS النقي.
أنشأت فريق مسج المحمول أداة، والتي تساعدك على خلق بنفسك موضوع مخصص الخاص بك: ThemeRoller . يمكنك أيضا استخدام هذه الأداة لرفع مستوى الموضوعات القديمة لجعلها متوافقة مع الإصدار الجديد.