jQuery Mobile টুলবার

jQuery Mobile টুলবার

টুলবার ইলেকট্রনিক পদক্ষপতি এবং পাতাপদক্ষপতিতে স্থাপন করা হয় - "পরিদর্শিত" নেভিগেশন করতে:

শিরোনাম বার্তালয়

পাতাহেড়টি সাধারণত পাতাহেড় শিরোনাম / লগো এবং একটি বা দুটি বাটন (সাধারণত হোম, বিকল্প বা সার্চ বাটন) ধারণ করে。

আপনি পাতাহেড়ে বামদিকে বা / এবং ডানদিকে বাটন যোগ করতে পারেন。

নিচের কোডটি, পাতাহেড় শিরোনামের টেক্সটের বামদিকে একটি বাটন যোগ করবে এবং ডানদিকেও একটি বাটন যোগ করবে:

প্রয়োগ

<div data-role="header">
  <a href="#" data-role="button">হোম</a>
  <h1>স্বাগত মোর হোমপেজ</h1>
  <a href="#" data-role="button">সার্চ</a>
</div>

আপনার নিজেই চেষ্টা করুন

নিচের কোডটি পাতাহেড় শিরোনামের বামদিকে একটি বাটন যোগ করবে:

<div data-role="header">
  <a href="#" data-role="button">হোম</a>
  <h1>স্বাগত মোর হোমপেজ</h1>
</div>

কিন্তু, আপনি যদি <h1> ইলেকট্রনিক পদক্ষপতিতে বাটন লিঙ্ক প্রস্তুত করেন, তবে তা টেক্সটের ডানদিকে দেখা যাবে না। পাতাহেড় শিরোনামের ডানদিকে বাটন যোগ করতে, "ui-btn-right" শ্রেণী নির্দিষ্ট করুন:

প্রয়োগ

<div data-role="header">
  <h1>স্বাগত মোর হোমপেজ</h1>
  <a href="#" data-role="button" class="ui-btn-right"> সার্চ</a>
</div>

আপনার নিজেই চেষ্টা করুন

টীকা:পাতাহেড়টি একটি বা দুটি বাটন ধারণ করতে পারে, কিন্তু পাতাপদক্ষপতিতে নিয়ন্ত্রণ নেই。

পাতাপদক্ষপতি বার্তালয়

পাতাহেড়ের তুলনায়, পাতাপদক্ষপতি আরও লম্বা - তা আরও প্রয়োগী এবং বিবিধ, তাই প্রোগ্রামের পরিমাণ বাটনগুলি সমাবেশ করতে পারে:

প্রয়োগ

<div data-role="footer">
  <a href="#" data-role="button">রেডিও শেয়ার করুন সাইনা মাইক্রোবলগ</a>
  <a href="#" data-role="button">রেডিও শেয়ার করুন টেকনসি মাইক্রোবলগ</a>
  <a href="#" data-role="button">রেডিও শেয়ার করুন QQ স্পেস</a>
</div>

আপনার নিজেই চেষ্টা করুন

মন্তব্য:ফুটার ও হেডারের শৈলী ভিন্ন (এটা কিছু ইন্টারপেডিং ও ব্লাকস্পেস কম করবে, এবং বান্ধব ডিবটন না মধ্যস্থ হবে)। এই সমস্যা সমাধান করতে, ফুটার সেটিংয়ে ক্লাস নাম "ui-btn" প্রদান করুন:

প্রয়োগ

<div data-role="footer" class="ui-btn">

আপনার নিজেই চেষ্টা করুন

আপনি ফুটারের মধ্যে বান্ধব ডিবটন লেভেল কিংবা ভার্টিক্যাল কিংবা সমন্বয় করতে পারেন:

প্রয়োগ

<div data-role="footer" class="ui-btn">
  <div data-role="controlgroup" data-type="horizontal">
    <a href="#" data-role="button" data-icon="plus">রেডিও শেয়ার করুন সাইনা মাইক্রোবলগ</a>
    <a href="#" data-role="button" data-icon="plus">রেডিও শেয়ার করুন টেকনসি মাইক্রোবলগ</a>
    <a href="#" data-role="button" data-icon="plus">রেডিও শেয়ার করুন QQ স্পেস</a>
  </div>
</div>

আপনার নিজেই চেষ্টা করুন

হেডার ও ফুটার অবস্থান নিশ্চিত করুন

হেডার ও ফুটার পস্থান দিতে তিনটি পদ্ধতি রয়েছে:

  • Inline - ডিফল্ট। হেডার ও ফুটার পাতার মুখের মধ্যে থাকবে。
  • Fixed - পাতা ও ফুটার পাতার শীর্ষ ও নিচে থাকবে。
  • ফুলস্ক্রিন - fixed-র মতো; পাতা ও ফুটার পাতার শীর্ষ ও নিচে থাকবে, but also over the page content. It is also slightly see-through

পাতার হেডার ও ফুটার অবস্থান নিশ্চিত করতে data-position অবয়ব ব্যবহার করুন:

ইনলাইন অবস্থান (ডিফল্ট)

<div data-role="header" data-position="inline"</div>
<div data-role="footer" data-position="inline"</div>

আপনার নিজেই চেষ্টা করুন

স্থায়ী অবস্থান

<div data-role="header" data-position="fixed"</div>
<div data-role="footer" data-position="fixed"</div>

আপনার নিজেই চেষ্টা করুন

যদি পূর্ণ অবস্থান সক্রিয় করতে হয়, তাহলে data-position="fixed" ব্যবহার করুন এবং এই ইলেকট্রনমাত্র তাকে data-fullscreen অবয়ব যোগ করুন:

ফুলস্ক্রিন অবস্থান

<div data-role="header" data-position="fixed" data-fullscreen="true"</div>
<div data-role="footer" data-position="fixed"} data-fullscreen="true"</div>

আপনার নিজেই চেষ্টা করুন

টীকা:fullscreen ফটো, চিত্র ও ভিডিওর জন্য অত্যন্ত ভালো

টীকা:fixed ও fullscreen অবস্থানের জন্য, টাচ স্ক্রিনের মাধ্যমে হেডার ও ফুটার লুক এবং দেখা যাবে