آموزش برنامه نویسی ، پایگاه داده sql server
آموزشگاه برنامه نویسی تحلیل داده : دوره های آموزشی برنامه نویسی و طراحی وب ASP.Net , C# , HTML , CSS , SQL Server


آموزشگاه برنامه نویسی مجتمع فنی تهران میرداماد : دوره های آموزشی برنامه نویسی و طراحی وب ASP.Net , C# , HTML , CSS , SQL Server

آموزش jQuery Mobile > مقدمه آموزش jQuery Mobile
آموزش طراحی صفحات ( Pages ) در jQuery Mobile

مقدمه طراحی صفحات در jQuery Mobile:

نحوه طراحی صفحات در jQuery Mobile را با ارایه یک مثال عملی و سپس تشریح آن آموزش می دهیم . به کد زیر دقت کنید ، سپس نکات آن را آموزش خواهیم داد :

کد <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>
خروجی مشاهده خروجی مثال

توضیح کد مثال :

  • تگ <div> با خاصیت " data-role = " pages ، قسمت اصلی صفحه و محدوده آن را تعیین می کند . سایر محتویات بایستی درون این تگ قرار بگیرند .
  • تگ <div> با خاصیت" data-role = " header ، یک هدر یا سر عنوان را در بالای صفحه ایجاد می کند که از آن معمولا برای قرار دادن دکمه های اصلی ، عنوان یا دکمه جستجو استفاده می شود .
  • تگ <div> با خاصیت" data-role = " main ، بدنه اصلی صفحه را مشخص کرده و محتویات اصلی آن ( مثل متن ها ، دکمه ها ، فرم ها و ... ) درون آن قرار می گیرند .
  • در تگ <div> با خاصیت " data-role = " main ، یک class با عنوان " ui-content " قرار داده ایم که حاشیه و فواصل دور صفحه را تعیین می کند .
  • تگ <div> با خاصیت " data-role = " footer ، یک فوتر یا قسمت پایینی را برای صفحه ایجاد می کند .

نکته 1 : درون تمامی این تگ ها ، می توانید انواع تگ ها و محتویات مثل پاراگراف ها ، عکس ها ، عنوان ها و ... را قرار دهید .

طراحی چند صفحه با هم در jQuery Mobile :

در jQuery Mobile می توانید چندین صفحه را در یک فایل HTML ایجاد کنید . هر صفحه بایستی توسط یک تگ <div> مستقل و با خاصیت " data-role = " page  و id منحصر به فرد تعریف شود .
همانند کد زیر دو صفحه را در فایل 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>

استفاده از صفحات به عنوان کادرهای نمایش هشدار یا متن ( Dialog Box ) :

یک Dialog Box ، نوعی از پنجره است که برای نمایش اطلاعاتی خاص یا دریافت ورودی از کاربر ، به وی نشان داده می شود .
برای باز شدن یک صفحه به صورت پنجره متحرک ( Dialog Box ) ، در زمانی که کاربر بر روی لینک صفحه کلیک می کند ، همانند کد زیر ، بایستی مقدار خاصیت " data-dialog = " true را قرار دهید . به مثال زیر توجه کنید :

کد // کد صفحه اول
<div data-role="page" id="pageone">
       <div data-role="header">
            <h1>صفحه خانه</h1>
       </div>

       <div data-role="main" class="ui-content">
            <p> خوش آمدید </p>
            <a href="#pagetwo">به صفحه دیالوگ باکس بروید</a>
       </div>

       <div data-role="footer">
           <h1> متن پا صفحه </h1>
       </div>

</div>

// کد دیالوگ باکس
<div data-role="page"  data-dialog="true"   id="pagetwo">
       
<div data-role="header">
              <h1> این یک دیالوگ باکس است </h1>
        </div>

        <div data-role="main" class="ui-content">
            <p>  یک دیالوگ باکس ، نوعی از پنجره است که برای نمایش اطلاعاتی خاص یا دریافت ورودی از کاربر ، به وی نشان داده می شود </p>
            <a href="#pageone">بازگشت به صفحه اول</a>
        </div>

        <div data-role="footer">
             <h1>پا صفحه دیالوگ باکس</h1>
        </div>

</div>
خروجی مشاهده خروجی مثال


راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...         >>>>>  ورود به انجمن تخصصی


نظر خودتان درباره این صفحه را با ما در میان بگذارید :

آیا مطالب این صفحه برای شما مناسب و مفید بوده است :

نام :                 
آدرس Email :    
 
نظر شما :  
 
سوال امنیتی : جمع سه + پنج چنده ؟