الدرس الثالث: اتجاه الصفحة وأحداثها

يتحدث هذا الدرس الجديد عن اتجاه صفحة الهاتف، وأحداث الصفحة (مثل pagebeforecreate، و pagecreate، و pageinit ...إلخ)، واللمس وأحداث التمرير (مثل swipe) وأحداث الفأرة الافتراضية. ستجد العديد من الأمثلة تشرح لك هذه الأحداث.

هذا الدرس جزء من سلسلة دروس تشرح jQuery Mobile:

التكيف مع حدث الاتجاه

هنالك خيارين/وضعين لاتجاه الشاشة عند عرض جهاز الهاتف، فعند عرض الصفحة عموديًا (portrait)، هذا يعني أن ارتفاع الشاشة أكبر من عرضها، وعند عرض الصفحة أفُقيًّا (landscape)، سيكون عرض الصفحة أكبر من طولها.

ما لم يُقفل الجهاز على وضع عرض واحد، يمكن أن تستدير الشاشة وسيتحول المحتوى تلقائيا للاستفادة من المساحة الإضافية، بينما يعالج jQuery Mobile تغيير حجم العديد من العناصر، قد تحتاج إلى تشغيل دالة معينة كلما تغيّر وضع الشاشة.

المثال 7: استخدام الحدث `orientationchange`، حدث تغيير الاتجاه

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  <script>
  $(document).on("pagecreate",function(event){
    $(window).on("orientationchange",function(){
      if(window.orientation == 0) {
        $("p").text("The orientation has changed to portrait!").css({"background-color":"yellow","font-size":"300%"});
      } else {
        $("p").text("The orientation has changed to landscape!").css({"background-color":"pink","font-size":"200%"});
      }
    });
  });
  </script>
</head>
<body>
  <div data-role="page">
    <div data-role="header">
      <h1>The orientationchange Event</h1>
    </div>
    <div data-role="main" class="ui-content">
      <p>Try to rotate your device!</p>
      <p><b>Note:</b> You must use a mobile device, or a mobile emulator to see the effect of this event.</p>
    </div>
    <div data-role="footer">
      <h1>Footer Text</h1>
    </div>
  </div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <title>Script-tutorials: Page orientaton Event</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script>
  $(document).on('pageinit', function() {
    $(window).on('orientationchange', function(e) {
      $("#mode").html('orientation is currently '+e.orientation);
    });
  });
  </script>
  <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
  <div data-role="page" id="mode">
    <div data-role="header"><h1>Page orientaton Event</h1></div>
    <div data-role="main" class="ui-content">
      <p>Content in orientation</p>
      <a href="pageexist.html" data-role="button">External Page Exist</a>
      <a href="page_notexist.html" data-role="button">No Page Exist</a>
      <p>Try to rotate your device!</p>
      <p><b>Note:</b> You must use a mobile device, or a mobile emulator to see the effect of this event.</p>
    </div>
    <div data-role="footer">
      <h1>Script-tutorials.com</h1>
    </div>
  </div>
</body>
</html>

تهيئة الصفحة في jQuery mobile

المثال 8: تهيئة الصفحة في jQuery mobile

شيفرة الصفحة قبل تهيئة jQuery Mobile:

<!-- begin first page -->
<section id="page1" data-role="page">
  <header data-role="header"><h1>jQuery Mobile</h1></header>
  <div data-role="content">
    <p>First page!</p>
  </div>
  <footer data-role="footer"><h1>Footer</h1></footer>
</section>
<!-- end first page →

شيفرة الصفحة بعد تهيئة jQuery Mobile:

<!-- begin first page -->
<section class="ui-page ui-body-c ui-page-active" data-url="page1" id="page1" data-role="page">
  <header role="banner" class="ui-bar-a ui-header" data-role="header">
    <h1 aria-level="1" role="heading" tabindex="0" class="ui-title">jQuery Mobile</h1>
  </header>
  <div role="main" data-role="content" class="ui-content">
    <p>First page!</p>
  </div>
  <footer role="contentinfo" class="ui-bar-a ui-footer" data-role="footer">
    <h1 aria-level="1" role="heading" tabindex="0" class="ui-title">Footer</h1>
  </footer>
</section>
<!-- end first page →

تعطي كلا الشيفرتين نفس النتيجة:

عند إنشاء تطبيق jQuery، من الشائع ربط معالجات الحدث (event handlers) في حدث تحميل الصفحة (document load)، ويمكنك فعل شيء مشابه باستخدام أحداث عرض الصفحة وإخفاء الصفحة في jQuery Mobile، لكن كن حذرًا، بما أن أحداث عرض وإخفاء الصفحة تعمل في كل مرة يحدث فيها انتقالًا للصفحة. فقد تربط معالجات الحدث أكثر من مرة، فعلى سبيل المثال، إذا ربطت مستمع حدث الضغط إلى عنصر داخل حدث عرض الصفحة (page show event)، فإن مستمع حدث الضغطة يرتبط في كل مرة تظهر فيها الصفحة، وهذا جيد إذا كنت تستخدم تلك الصفحة فقط، لكن إذا ذهب المستخدم لتلك الصفحة عدة مرات، فإن مستمع الحدث سيرتبط عدة مرات.

لحل هذه المشكلة، يمكنك إما التحقق لمعرفة إذا كان معالج الحدث قد رُبط بالفعل (لكن لا تربطه مرة أخرى)، أو مسح الارتباط في كل مرة قبل إعادة الربط. وإذا استخدمت الطريقة الأخيرة، فاستعمال مجالات الأسماء (namespacing) سيكون مُفيدًا. للمزيد من المعلومات حول الأحداث ذات الأسماء المصنفة ضمن مجالات أسماء، راجع هذا التوثيق.

الأحداث المحدِّدة ضمن مجالات أسماء هي أداة مفيدة جدًا يمكن وضعها في صندوق أدوات jQuery.

استخدام الحدث `pagebeforecreate` لإضافة خاصية بشكل ديناميكي

يُستخدم الحدث pagebeforecreate عندما تملك محتوى تريد تغييره قبل أن يمتلك jQuery Mobile فرصة لقفله وكتابة data-roles وخاصيات عناصر الصفحة إلى DOM.

المثال 9: استخدام الحدث `pagebeforecreate` لإضافة خاصية بشكل ديناميكي

يبدأ الملف كملف HTML قياسي يستخدم jQuery Mobile، لكننا بدأنا بالعنصر script، تُستخدم بعض الشيفرات البرمجية لـ jQuery لربط الحدث pagebeforecreate إلى الصفحة، ويتم هذا باستخدام الدالة ‎.on()‎ المتوفرة عند استخدام الإصدار jQuery 1.7 ومابعده. عندما يبحث الحدث pagebeforecreate على أية عناصر تملك الخاصية class="modify"‎ وتطبق الخاصية datainset="true"‎ إلى أي واحدة يُعثَر عليها باستخدام الدالة ‎.attr()‎.

يرى jQuery Mobile الخاصية data-inset="true"‎ ويضعها في قائمة بسبب عمل الحدث pagebeforecreate قبل إضافة شيفرة الصفحة إلى DOM.

<!DOCTYPE html>
<html>
<head>
  <title>Script-tutorials: Developing with jQuery Mobile</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script>
  $(document).on('pagebeforecreate', function(event) {
    $(".modify").attr('data-inset','true');
  });
  </script>
  <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
  <div data-role="page" id="home">
    <div data-role="header"><h1>pagebeforecreate event</h1></div>
    <div data-role="content">
      <p>The following list will be inset during the pagebeforecreate event</p>
      <ul class="modify" data-role="listview">
        <li>A</li>
        <li>B</li>
        <li>C</li>
      </ul>
    </div>
  </div>
</body>
</html>

استخدام الحدث `pagecreate`

يمكن استخدام الحدث pagecreate إما لتطبيق الودجات (widgets) الخاصة بك أو استخدام ودجة (widget) مدمجة أو إضافة تحكم يوفرها jQuery Mobile.

المثال 8: استخدام الحدث `pagecreate` بالاقتران مع الإضافة listview

تبدأ الشيفرة البرمجية كصفحة قياسية باستخدام jQuery Mobile، وتستخدم الدالة ‎.on()‎ الحدث pagecreate للعمل.

هنالك مُحدد (selector) لإيجاد أي عنصر في الصفحة التي تملك الخاصية class="modify"‎ ومن ثم يُضيف الخاصية data-inset="true"‎. وبعد فعل ذلك، يمكنك أن ترى عمل الدالة listview()‎. تُعرف هذه الدالة على أنها الإضافة listview وتُستخدم لتطبيق نمط وشكل أي قائمة. السطر 11 هو نهاية الدالة ‎.on()‎، والتي هي ربط للحدث pagecreate.

هنالك عنصر ul يحتوي فقط على الخاصية class="modify"‎؛ الخاصية data-role="listview"‎ لن تكون موجودة ولا الخاصية data-inset="true"‎.

<!DOCTYPE html>
<html>
<head>
  <title>Script-tutorials: Developing with jQuery Mobile</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script>
  $(document).on('pagecreate', function(event) {
    $(".modify").attr('data-inset','true').listview();
  });
  </script>
  <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
  <div data-role="page" id="home">
    <div data-role="header"><h1>pagecreate event</h1></div>
    <div data-role="content">
      <p>The following list will be styled during the pagecreate event</p>
      <ul class="modify">
        <li>A</li>
        <li>B</li>
        <li>C</li>
      </ul>
    </div>
  </div>
</body>
</html>

استخدام الحدث `pageinit`

أفضل وصف للحدث pageinit هو: «استخدمه كما لو تستخدم الدالة ‎$(document).ready()‎ في jQuery. يعمل هذا الحدث بعد تحميل DOM وعمل جميع الودجات والإضافات، ويعمل أيضًا كلما تُحمّلت الصفحة إما مباشرةً أو من خلال استدعاء AJAX من الصفحة الأخرى، وسيعمل هذا الحدث مرة واحدة عند تضمينه في DOM.

استخدام `pageinit` عند تحميل صفحة ثانية

يجب أن يكون الإعداد الأولي للصفحة مألوفًا بالنسبة لك الآن؛ في البداية، يمكنك أن ترى أنه يستخدم نفس الأسلوب لربط الحدث pageinit كما رُبِط الحدثpagebeforecreate والحدث pagecreate. الفرق هو في استخدام مُحدد (selector) لعنصر ذي المُعرِّف id="away"‎ في الدالة ‎.on()‎ لربط الدالة alert()‎ التي ستعمل فقط على الصفحة التي تطابق ذلك المحدد عند تحميلها لأول مرة في DOM.

بالنزول إلى الأسفل أكثر، سترى أن الصفحة أُعدّت مع عنصر div باستخدام الخاصية data-role="page"‎.

المثال 9: استخدام `pageinit` عند تحميل الصفحة الثانية

<!DOCTYPE html>
<html>
<head>
  <title>Script-tutorials: Developing with jQuery Mobile</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script>
  $(document).on('pageinit','#away', function(event) {
    alert("The pageinit event has been run");
  });
  </script>
  <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
  <div data-role="page" id="home">
    <div data-role="header"><h1>pageinit event</h1></div>
    <div data-role="content">
      <p>I am the #home page</p>
      <a href="#away" data-role="button">Go Away</a>
    </div>
  </div>
  <div data-role="page" id="away">
    <div data-role="header"><h1>pageinit event</h1></div>
    <div data-role="content">
      <p>
      I am the #away page. The pageinit event runs on first page load.
      </p>
      <a href="#home" data-role="button">Go Back</a>
    </div>
  </div>
</body>
</html>

الصورة الأولى للمعاينة في المتصفح.

الصور الثانية تظهر عند الضغط على الزر Go Away في المتصفح.

الصورة الثالث هي للصورة المُهيَّأة.

الآن لننظر في نمط تهيئة الصفحة في jQuery Mobile.

المثال 10: تغريدة جميلة دون سكربت التهيئة

<!DOCTYPE html>
<html>
<head>
  <title>Script-Tutorials: My first mobile site</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"/>
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
  <style>
    img {max-width:100%;} p{text-align:center;}
  </style>
</head>
<body>
  <!-- begin first page -->
  <section id="page1" data-role="page">
    <header data-role="header">
      <h1>Nice Tweet</h1>
    </header>
    <div data-role="content" class="content">
      <p>Twitter feed goes here.</p>
      <p><a href="#page2" data-role="button">Settings</a></p>
      <p><img src="images/twitter-logo-hashtag.jpg" alt="Twitter settings" /></p>
      <p>Powered by jQuery Mobile</p>
    </div>
    <footer data-role="footer">
    <h2>Because the world needed another Twitter app.</h2>
    </footer>
  </section>
  <!-- end first page -->
  <!-- Begin second page -->
  <section id="page2" data-role="page">
    <header data-role="header">
      <h1> Nice Tweet: Settings</h1>
    </header>
    <div data-role="content" class="content">
      <p>Settings go here. <a href="#page1" data-role="button">Go back</a></p>
      <p><img src="images/business-twitter-page-img.png" alt="Settings" /></p>
      <p style="text-align:center;">Powered by jQuery Mobile</p>
    </div>
    <footer data-role="footer">
      <h2>Because the world needed another Twitter app.</h2>
    </footer>
  </section>
  <!-- end second page -->
</body>
</html>

<script>
$(document).ready(function() {
  // Refresh the feed on first load
  // (pretend we've written this function elsewhere)
  refreshFeed();
  $("#page1").bind("pageshow", function(event, ui) {
    // Refresh the feed on subsequent page shows
    refreshFeed();
  })
})
</script>

أحداث اللمس

عند تفاعل المستخدم مع موقعك عن طريق اللمس، ستعمل أحداث اللمس، ويمكنك الاستفادة من هذه الأحداث لعمل دوال مخصصة.

استخدام أحداث tap الفرق الرئيسي بين حدث النقر click وحدث بدء اللمس touchstart هو حوالي 300 ملي ثانية. في حين أن هذا لا يبدو فارقًا كبيرًا في الوقت، لكن تأخير ثلث ثانية قد يجعل موقعك أو تطبيقك يبدو بطيئًا وغير متجاوب.

بينما يُستخدم الحدث tap بشكل افتراضي على الروابط، والقوائم، وودجات وإضافات jQuery Mobile المتشابهة، يمكنك استخدام الحدث tap لتنفيذ دوال مخصصة في مختلف عناصر صفحتك.

مثال 11: استخدام الحدثين `tap` و `taphold`

<!DOCTYPE html>
<html>
<head>
  <title>Developing with jQuery Mobile</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script>
  $(document).on("pageinit", function(){
    $("#home").on('tap', '#image', function(event, ui) {
      var tapCaption = $(this).data("tap");
      $("#caption").addClass("comment").html(tapCaption);
    });
    $("#home").on('taphold','#caption', function(event, ui) {
      var $this = $(this);
      var tapholdCaption = $this.data("appTaphold");
      $this.html(tapholdCaption);
    });
  });
  </script>
  <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
  <style type="text/css">
  img {max-width: 100%}
  .comment {background: #FFF;border-radius: 5px;
  border: 2px solid #000;padding: 5px}
  </style>
</head>
<body>
  <div data-role="page" id="home">
    <div data-role="header"><h1>Tap Events</h1></div>
    <div data-role="content">
      <p>Tap or tap-and-hold the image below.</p>
      <img id="image" src="images/golden_gate.jpg" alt="An image of a river" data-tap="You tapped the picture, try tap-and-holding on this caption" />
      <div id="caption" data-app-taphold="This picture was taken during a flood.">Caption</div>
    </div>
  </div>
</body>
</html>

يجب ربط الحدثين tap و taphold إما في الدالة document.ready()‎ أو داخل الحدث pageinit. بما أننا نعلم بالفعل أنه من غير المستحسن استخدام الدالة document.ready()‎ مع jQuery Mobile، لذلك سنربط الحدث pageinit باستخدام الدالة ‎.on()‎. داخل الدالة، يمكنك رؤية الدالة ‎.on()‎ تربط الحدث tap إلى عنصر يملك الخاصية id="image"‎.

استخدام أحداث التمرير

من الشائع التمرير في الهاتف عند التنقل في معرض صور، وحذف بريد إلكتروني، وإحضار معلومات الاتصال …إلخ. يمكنك مع jQuery Mobile استخدام ثلاثة أحداث متعلقة بالتمرير هي: swipe، و swipeleft، و swiperight. تشبه عملية التمرير (swipe) في الهاتف المحمول عملية النقر والسحب (click-and-drag ) في الحاسوب. ليعمل أي حدث من أحداث التمرير، يجب أن يتحرك اللمس على أكثر من 30 بيكسل أفقيًا ويبقى 1 ثانية ليكتمل، كما أنه لا يجب أن يتحرك أكثر من 20 بيكسل عموديًا وإلا سيُلغى تشغيل الحدث.

مثال 12: استخدام أحداث التمرير

ستُعرض الصورة في الأسفل عند تمرير المربع إلى اليمين كما يظهر على متصفح هاتفك في جهازك المحمول.

<!DOCTYPE html>
<html>
<head>
  <title>Developing with jQuery Mobile</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script>
  $(document).on('pageinit', function() {
    $("#home").on('swipe','#swipe', function(event, ui) {
      $("#caption").html("Swipe detected!");
    });
    $("#home").on('swipeleft','#swipe-box', function(event, ui) {
      ("#caption").html("Swipe to the left detected!");
    });
    $("#home").on('swiperight','#swipe-box', function(event, ui) {
      $("#caption").html("Swipe to the right detected!");
    });
  });
  </script>
  <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
  <style type="text/css">
  #swipe-box {
    width: 200px;
    height: 200px;
    background: #FFF;
    border: 2px solid #000
  }
  .comment {
    background: #FFF;
    border-radius: 5px;
    border: 2px solid #000;
    padding: 5px
  }
  </style>
</head>
<body>
  <div data-role="page" id="home">
    <div data-role="header"><h1>Swipe Events</h1></div>
    <div data-role="content">
      <p id="swipe">Take a swipe this text or at the box below.</p>
      <div id="swipe-box"></div>
      <br />
      <div id="caption" class="comment">Waiting for swipe...</div>
    </div>
  </div>
</body>
</html>

أحداث الفأرة الافتراضية

أحداث الفأرة الافتراضية هي حل لمشاكل التوافق بين متصفحات الهاتف والحاسوب، فعلى سبيل المثال، تدعم بعض المتصفحات حدثًا يسمى touchstart في حين بعض المتصفحات الأخرى لا تدعمه.

تدعم متصفحات الحاسوب الحدث mousemove وتدعم الحومان (hover) عبر استخدام الحدث mouseover في حين تواجه أجهزة الهاتف صعوبةً في محاكاة أو استخدام الحدث الصحيح. هذه المشاكل حلتها jQuery Mobile عن طريق استخدام أحداث الفأرة الافتراضية، فعند تحميل صفحة مع jQuery Mobile، سيتأكد المتصفح من دعم الحدث.

وستُدعم الأحداث آنذاك بناءً على أحداث الفأرة الافتراضية، بينما يحدث هذا في الخلفية، يمكنك ربط أحداث الفأرة الافتراضية لتشغيل دوال محدد أو حتى الحصول على بيانات يمكن استخدامها في دوال أخرى.

أحداث الفأرة الافتراضية المتاحة هي:

vmouseover
vmousedown
vmousemove
vmouseup
vclick
vmousecancel

ستجد في الأسفل جزءًا من شيفرة برمجية موجودة في الوسم <head> لاستخدام الأحداث vmousedown و vmousemove و vmouseover.

المثال 13: مقتطف شيفرة برمجية لأحداث `vmousedown`، و `vmousemove` و `vmouseover`

<script>
$(function(){
  $(document).on("vmousedown", "p", function() {
    $(this).append('<span style="color:#108040;">vmousedown...</span>');
  });
});
</script>

المثال 14: الحدث `vmousedown` في jQuery mobile

بمجرد النقر على التسمية التوضيحية داخل المتصفح، سيُطلَق الحدث vmousedown.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Script-tutorials: vmousedown</title>
  <link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
  <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
  <script>
  $( function(){
    $(document).on("vmousedown", "p", function() {
      $(this).append('<span style="color:#108040;"> vmousedown...</span>');
    });
  });
  </script>
  <script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
  <div data-role="page">
    <div data-role="header"><h1>Vmousedown event example</h1></div>
    <div data-role="content">
      <p>Touch here to see what happens.</p>
    </div>
  </div>
</body>
</html>

المثال 15: الحدث `vmouseup` في jQuery mobile

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Script-tutorials: vmouseup</title>
  <link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
  <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
  <script>
    $(function() {
      $(document).on("vmouseup", "p", function() {
        $(this).append('<span style="color:#108040;"> vmouseup when you click i will not until you releases the click button up...</span>');
      });
    });
  </script>
  <script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
  <div data-role="page">
    <div data-role="header">
      <h1>VmouseUp event example</h1>
    </div>
    <div data-role="content">
      <p>Touch here to see what happens.</p>
    </div>
  </div>
</body>
</html>

المثال 16: الحدث `vmouseup` في jQuery mobile

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Script-tutorials: vmouseover</title>
  <link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
  <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
  <script>
    $(function() {
      $(document).on("vmouseover", "p", function() {
        $(this).append('<span style="color:#108040;"> vmouseover I will not appear unless you move the pointer over that touche and see...</span>');
      });
    });
  </script>
  <script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
  <div data-role="page">
    <div data-role="header">
      <h1>VmouseOver event example</h1>
    </div>
    <div data-role="content">
      <p>Touch here to see what happens.</p>
    </div>
  </div>
</body>
</html>

بناء موقعك الأول المخصص للهواتف باستخدام jQuery mobile

هذا القسم هو أول شيء يراه المستخدم، وقد يكون أبرز خاصية لموقع الهاتف، ويُعلم هذا المستخدمين بمكانهم، وقد يتضمن شريط بحث، وزر دعوة إلى إجراء (call-to-action)، و/أو شعار.

قسم المحتوى (Content)

يحتوي هذا القسم على ما يبدو عليه: أزرار، ونصوص وكل شيء آخر لم يتضمن في الأقسام الأخرى. يضم هذا القسم جوهر موقعك ويعرض كل ما تريد أن يراه المستخدم أو يقضي فيه وقته.

غالبا ما يُتجاهل هذا القسم لكنه منطقة مهمة من موقعك، فيمكن أن يحتوي على كل شيء بدءًا من الروابط الإضافية إلى سطر بسيط لملكية الموقع.

عند تطوير مواقع الويب للهواتف، يُحذَف في العادة هذا القسم ويُستبدل بشريط تنقل أو عنصر ثابت آخر.

مثال 16: تخطيط أساسي للهواتف

<!DOCTYPE html>
<html>
<head>
  <title>Script-tutorials: My first mobile site</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
  <div data-role="page">
    <div data-role="content">
      Welcome message.
    </div>
  </div>
</body>
</html>

مثال 17: إضافة ترويسة وتذييل إلى موقعك المخصص للهواتف

<!DOCTYPE html>
<html>
<head>
  <title>Script-tutorials: My first mobile site</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
  <div data-role="page">
    <div data-role="header">
      My First Mobile Site
    </div>
    <div data-role="content">
      Welcome to my first mobile site.
    </div>
    <div data-role="footer">
      Tutors footer!
    </div>
  </div>
</body>
</html>

المثال 18: تنسيق المحتوى النصي في الموقع عبر تضمين وسوم التنسيق

<!DOCTYPE html>
<html>
<head>
  <title>Script-tutorials: My first mobile site</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
  <div data-role="page">
    <div data-role="header">
      <h1>My First Mobile Site</h1>
    </div>
    <div data-role="content">
      <p>Welcome to my first mobile site.</p>
      <p>Try me on all of your mobile devices! You can use any
        <strong>valid HTML</strong> on this page</p>
      <p style="text-align:center;">Powered by jQuery Mobile</p>
    </div>
    <div data-role="footer">
      <h3>Tutors footer!</h3>
    </div>
  </div>
</body>
</html>

المثال 19: إضافة صور ذات حجم متغير (متجاوبة) إلى الموقع

<!DOCTYPE html>
<html>
<head>
  <title>My first mobile site</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
  <style>
    img {
      max-width: 100%;
    }
  </style>
</head>
<body>
  <div data-role="page">
    <div data-role="header">
      <h1>My First Mobile Site</h1>
    </div>
    <div data-role="content">
      <p>Welcome to my first mobile site.</p>
      <p>Try me on all of your mobile devices! You can use any<strong>valid HTML</strong> on this page</p>
      <img src="images/golden_gate.jpg" alt="Golden Gate Bridge" />
      <p style="text-align:center;">Powered by jQuery Mobile</p>
    </div>
    <div data-role="footer">
      <h3>Tutor footer!</h3>
    </div>
  </div>
</body>
</html>

المثال 20:الربط مع صفحة ثانية عبر الحدث `vmouseup`

<!DOCTYPE html>
<html>
<head>
  <title>Script-Tutorials: My first mobile site</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
  <style>
    img {
      max-width: 100%;
    }
  </style>
</head>
<body>
  <div id="pageone" data-role="page">
    <div data-role="header">
      <h1>My First Mobile Site</h1>
    </div>
    <div data-role="content">
      <p>Welcome to my first mobile site.</p>
      <p>Try me on all of your mobile devices! You can use any
        <strong>valid HTML</strong> on this page</p>
      <img src="images/golden_gate.jpg" alt="Golden Gate Bridge" />
      <a href="#pagetwo" data-role="button">Go to Page 2</a>
      <p style="text-align:center;">Powered by jQuery Mobile</p>
    </div>
    <div data-role="footer">
      <h3>Tutor footer!</h3>
    </div>
  </div>
  <div id="pagetwo" data-role="page">
    <div data-role="header">
      <h1>My First Mobile Site</h1>
    </div>
    <div data-role="content">
      <p>You've made it to page 2!</p>
      <p>Isn't that awesome?</p>
      <a href="#pageone" data-role="button">Go Back to Page 1</a>
      <p style="text-align:center;">Powered by jQuery Mobile</p>
    </div>
    <div data-role="footer">
      <h3>Viva la footer!</h3>
    </div>
  </div>
</body>
</html>

مثال 21: ثلاثة صفحات داخلية في ملف HTML واحد

<!DOCTYPE html>
<html>
<head>
  <title>Script-Tutorials: My first mobile site</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
  <style>
    img {
      max-width: 100%;
    }
  </style>
</head>
<body>
  <!-- begin first page -->
  <section id="page1" data-role="page">
    <header data-role="header">
      <h1>jQuery Mobile</h1>
    </header>
    <div data-role="content" class="content">
      <p>First page!</p>
      <p>Welcome to my first mobile site.</p>
      <p>Try me on all of your mobile devices! You can use any<strong>valid HTML</strong> on this page</p>
      <img src="images/golden_gate.jpg" alt="Golden Gate Bridge" />
      <p style="text-align:center;">Powered by jQuery Mobile</p>
      <p><a href="#page2" data-role="button">Go to Second Page</a>
      </p>
    </div>
    <footer data-role="footer">
      <h1>Footer</h1>
    </footer>
  </section>
  <!-- end first page -->
  <!-- Begin second page -->
  <section id="page2" data-role="page">
    <header data-role="header">
      <h1>jQuery Mobile</h1>
    </header>
    <div data-role="content" class="content">
      <p>Second page!</p>
      <p>Welcome to my first mobile site.</p>
      <p>Try me on all of your mobile devices! You can use any<strong>valid HTML</strong> on this page</p>
      <img src="images/cable_car2.jpg" alt="Cable Car" />
      <p style="text-align:center;">Powered by jQuery Mobile</p>
      <p><a href="#page3" data-role="button">Go to Third Page</a>
      </p>
    </div>
    <footer data-role="footer">
      <h1>Footer</h1>
    </footer>
  </section>
  <!-- end second page -->
  <!-- begin third page -->
  <section id="page3" data-role="page">
    <header data-role="header">
      <h1>jQuery Mobile</h1>
    </header>
    <div data-role="content" class="content">
      <p>Third page!</p>
      <p>Welcome to my first mobile site.</p>
      <p>Try me on all of your mobile devices! You can use any<strong>valid HTML</strong> on this page</p>
      <img src="images/alcatraz.jpg" alt="alcatraz" />
      <p style="text-align:center;">Powered by jQuery Mobile</p>
      <p><a href="#page1" data-role="button">Go back to First Page</a>
      </p>
    </div>
    <footer data-role="footer">
      <h1>Footer</h1>
    </footer>
  </section>
  <!-- end third page -->
</body>
</html>

ترجمة -وبتصرّف- للمقال jQuery Mobile Lesson 3 لصاحبه Andrew

أفضل التعليقات

لا توجد أية تعليقات بعد

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

أضف تعليق

× لقد أضفت محتوى بخط أو تنسيق مختلف. Restore formatting

Only 75 emoji are allowed.

× Your link has been automatically embedded. Display as a link instead

× جرى استعادة المحتوى السابق.. امسح المحرر

× You cannot paste images directly. Upload or insert images from URL.

أضف صورة من رابط خارجي

jquery mobile الدرس الثالث: اتجاه الصفحة وأحداثها

التكيف مع حدث الاتجاه

المثال 7: استخدام الحدث orientationchange، حدث تغيير الاتجاه

تهيئة الصفحة في jQuery mobile

المثال 8: تهيئة الصفحة في jQuery mobile

استخدام الحدث pagebeforecreate لإضافة خاصية بشكل ديناميكي

المثال 9: استخدام الحدث pagebeforecreate لإضافة خاصية بشكل ديناميكي

استخدام الحدث pagecreate

المثال 8: استخدام الحدث pagecreate بالاقتران مع الإضافة listview

استخدام الحدث pageinit

استخدام pageinit عند تحميل صفحة ثانية

المثال 9: استخدام pageinit عند تحميل الصفحة الثانية

المثال 10: تغريدة جميلة دون سكربت التهيئة

أحداث اللمس

مثال 11: استخدام الحدثين tap و taphold

استخدام أحداث التمرير

مثال 12: استخدام أحداث التمرير

أحداث الفأرة الافتراضية

المثال 13: مقتطف شيفرة برمجية لأحداث vmousedown، و vmousemove و vmouseover

المثال 14: الحدث vmousedown في jQuery mobile

المثال 15: الحدث vmouseup في jQuery mobile

المثال 16: الحدث vmouseup في jQuery mobile

بناء موقعك الأول المخصص للهواتف باستخدام jQuery mobile

الترويسة (Header)

قسم المحتوى (Content)

تذييل الصفحة (Footer)

مثال 16: تخطيط أساسي للهواتف

مثال 17: إضافة ترويسة وتذييل إلى موقعك المخصص للهواتف

المثال 18: تنسيق المحتوى النصي في الموقع عبر تضمين وسوم التنسيق

المثال 19: إضافة صور ذات حجم متغير (متجاوبة) إلى الموقع

المثال 20:الربط مع صفحة ثانية عبر الحدث vmouseup

مثال 21: ثلاثة صفحات داخلية في ملف HTML واحد

اقرأ أيضًا

تفاعل الأعضاء

أفضل التعليقات

انضم إلى النقاش

التصنيفات

إعلانات

أحدث أسئلة البرمجة

تابعنا على

إعلانات

أحدث مشاريع التطوير على مستقل

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية