مسج الجوال تلقائيا أشكال HTML أسلوب لجعلها تبدو جذابة وسهلة تعمل باللمس.
jQuery Mobile Form هيكل
يستخدم مسج موبايل CSS لأسلوب عناصر النموذج HTML، مما يجعلها جذابة وسهلة الاستخدام.
في مسج المحمول يمكن استخدام عناصر تحكم النموذج التالي:
- المدخلات النص
- البحث المدخلات
- أزرار الراديو
- مربعات
- تحديد القوائم
- المتزلجون
- مفاتيح تبديل الوجه
عند العمل مع الأشكال مسج المحمول يجب أن نعرف:
- و <form> يجب أن يكون عنصر طريقة وسمة العمل
- يجب أن يكون كل عنصر النموذج فريدة من نوعها "المعرف" السمة. يجب أن يكون معرف فريد عبر صفحات الموقع. هذا هو لنموذج الملاحة صفحة واحدة مسج موبايل يتيح العديد من "الصفحات" مختلفة ليكون حاضرا في نفس الوقت
- يجب أن يكون كل عنصر النموذج تسمية. تعيين لسمة التسمية لتتناسب مع معرف العنصر
مثال
<form method="post" action="demoform.asp" >
<label for="fname"> First name: </label>
<input
type="text" name="fname" id="fname" >
</form>
انها محاولة لنفسك » نصيحة: استخدم عنصر نائب لتحديد تلميح القصير الذي يصف القيمة المتوقعة لحقل الإدخال:
مثال
<label for="fname">First name:</label>
<input
type="text" name="fname" id="fname" placeholder="First name..." >
انها محاولة لنفسك » نصيحة: لإخفاء التسمية، استخدم "ui-hidden-accessible" الطبقة. وكثيرا ما يستخدم هذا عندما تريد السمة نائبا للعنصر لتكون بمثابة التسمية:
مثال
<label for="fname"
class="ui-hidden-accessible" ">First name:</label>
<input
type="text" name="fname" id="fname" placeholder="First name..." >
انها محاولة لنفسك » نصيحة: إذا كنت ترغب في "clear button" (رمز X على الجانب الأيمن من حقل إدخال يمهد محتويات الحقل)، إضافة إلى BTN بيانات واضحة = "true" السمة:
مثال
<label for="fname">First name:</label>
<input type="text" name="fname"
id="fname" data-clear-btn="true" >
انها محاولة لنفسك » و "clear button" ويمكن أن يضاف على أي <input> عنصر، باستثناء <textarea> . حقول البحث لديها هذه السمة لتعيين "true" كما الافتراضي - لتغييره، ببساطة تحديد data-clear-btn="false" .
أزرار مسج نموذج موبايل
يتم ترميز أزرار بأشكال مع HTML القياسية <input> عناصر (زر إعادة تعيين، تقديم). هي التي تطلق تلقائيا، مما يجعلها جذابة وسهلة الاستخدام على كل من الأجهزة المحمولة وأجهزة الكمبيوتر المكتبية:
مثال
<input type="button" value="Button">
<input type="reset" value="Reset
Button">
<input type="submit" value="Submit Button">
انها محاولة لنفسك » أسلوب بالإضافة إلى <إدخال> زر، استخدام أي من سمات * بالبيانات، المدرجة في الجدول أدناه:
وتشير قيمة جريئة القيمة الافتراضية.
| السمة | القيمة | وصف |
|---|---|---|
| data-corners | true | false | تحدد ما إذا كان ينبغي أن يكون على زر تدوير زوايا أو لا |
| data-icon | Icons Reference | يحدد رمز من الزر |
| data-iconpos | left | right | top | bottom | notext | تحديد موضع رمز |
| data-inline | true | false | يحدد ما إذا كان الزر يجب أن تكون مضمنة أو لا |
| data-mini | true | false | تحديد ما إذا كان ينبغي أن يكون زر صغير أم لا |
| data-shadow | true | false | تحدد ما إذا كان ينبغي أن يكون على الزر الظلال أم لا |
تضمين أو استثناء السمة (ق) التي تريد / لا تريد:
<input type="submit" value="Submit" data-icon="check"
data-iconpos="right" data-inline="true">
انها محاولة لنفسك » Field Containers
لجعل التسميات وعناصر النموذج تبدو بشكل صحيح على شاشات أوسع، التفاف <div> أو <fieldset> العنصر مع "ui-field-contain" الطبقة حول العنصر التسمية / النموذج:
مثال
<form method="post" action="demoform.asp">
<div class="ui-field-contain" >
<label for="fname">First name:</label>
<input
type="text" name="fname" id="fname">
<label for="lname">Last
name:</label>
<input type="text" name="lname" id="lname">
</div>
</form>
انها محاولة لنفسك » في "ui-field-contain" تسميات أسلوب الصف وعناصر تحكم النموذج بناء على عرض الصفحة. عندما عرض الصفحة أكبر من 480px، فإنه تلقائيا وضع علامة على نفس الخط، كما تحكم النموذج. عندما يكون أقل من 480px، سيتم وضع التسمية فوق عنصر النموذج.
نصيحة: لمنع مسج الجوال تلقائيا / العناصر القابلة للنقر عليها tappable الأسلوب، استخدام data-role="none" السمة:
مثال
<label for="fname">First name:</label>
<input type="text" name="fname"
id="fname" data-role="none" >
انها محاولة لنفسك » تقديم النموذج في مسج موبايل
ومسج جوال التعامل مع تلقائيا تقديم النموذج عبر أجاكس، وسيحاول لدمج استجابة الملقم في DOM التطبيق.