জেকোয়েরি টুলটিপ টিউটোরিয়াল (jQuery tooltip tutorial)
বিভিন্ন
সাইটে দেখে থাকবেন কোন টেক্সট,বাটন,লিংক ইত্যাদির উপর মাউস নিয়ে গেলে
মাউসের আশেপাশে কিছু অতিরিক্ত বর্ননা দেখায় এটাই টুলটিপ।আমি এখানে একটা
ফর্মের জন্য টুলটিপ তৈরী করে দেখাচ্ছি যেখানে প্রতিটি ফর্ম ফিল্ডের উপর
মাউস নিয়ে গেলে এই ফিল্ডে কি ধরনের তথ্য দিয়ে পুরন করতে হবে তা দেখাবে।
index.html ফাইল
style.css ফাইল
script.js ফাইল
আউটপুট
index.html ফাইল
01.<!DOCTYPE html>02.<html>03.<head>04.<title>Webcoachbd ToolTip tutorials</title>05.<link rel="stylesheet" href="/style.css" type="text/css">06.<script type="text/javascript" src="/jquery_latest.js"></script>07.<script type="text/javascript" src="/script.js"></script>08.</head>09.<body>10.<h2>Fill up form and hit submit</h2>11.<div id="form_container">12.<form id="reg_form" action="" method="post">13.<label>First Name</label>14.<input class="tTip" type="text" name="f_name" placeholder="First Name"/>15.<span>Please Enter your name here.Remember text only</span>16.<span id="fnameInfo"></span>17.<label>Last Name</label>18.<input class="tTip" type="text" name="l_name" placeholder="Last Name"/>19.<span>Please Enter your Last name here.Remember text only</span>20.<span id="lnameInfo"></span>21.<label>Email</label>22.<input class="tTip" type="text" name="email" placeholder="Email"/>23.<span>Please Enter your Email here.Remember valid only</span>24.<span id="mailInfo"></span>25.<label>Phone Number</label>26.<input class="tTip" type="text" name="phone" placeholder="Phone"/>27.<span>Please Enter your Phone number here.Remember numbers only</span>28.<span id="phoneInfo"></span>29.<input type="submit" value="Submit"/>30.</form>31.</div>32.</body>33.</html>01.body{02.font-family:Verdana;03.font-size:13px;04.}05.#form_container{06.width:400px;07.margin:0 auto;08.overflow:hidden;09.border:1px solid #ccc;10.border-radius:5px;11.padding:10px;12.}13.h2{14.text-align:center;15.}16..error{17.color:#f00;18.}19.#form_container span{20.float:right;21.display:block;22.clear:both;23.}24.#form_container label{25.display:block;26.float:left;27.margin:5px 0;28.width:150px;29.}30.#form_container input{31.float:right;32.margin:5px 0;33.}34.#form_container input[type="submit"]{35.float:left;36.margin:8px 0 0 254px;37.}38.#form_container .tTip + span{39.display:none;40.}41..toolTip {42.display: none;43.position: absolute;44.border: 1px solid #333;45.background-color: yellow;46.padding: 2px 6px;47.border-radius:4px;48.}01.$(document).ready(function(){02.$('.tTip').hover(function(event){03.// mouse hover04.var spanText = $(this).next().html();05. 06.$('<p class="toolTip"></p>')07..text(spanText)08..appendTo('body')09..css('top', (event.pageY - 40) + 'px')10..css('left', (event.pageX + 20) + 'px')11..fadeIn('slow');12.}, function() {13.$('.toolTip').remove();14.}).mousemove(function(event){15.// when mouse move16.$('.toolTip')17..css('top', (event.pageY - 40) + 'px')18..css('left', (event.pageX + 20) + 'px');19.});20.});Fill up form and hit submit
কোন সিলেক্টর এর পর [যেমন $('#test').next()] next() মেথড দিলে সিলেক্টেড এলিমেন্টের পরের চাইল্ডকে সে ধরে।
html() এবং text() মেথড প্রায় একই,html() দিয়ে যেকোন এইচটিএমএল কোড কোন সিলেক্টরে প্রবেশ করিয়ে দেয়া যায় আর text() দিয়ে কোন এলিমেন্টের ভিতর যে টেক্সট থাকে সেটা ধরা যায়।
এরপর ৭ নম্বর লাইনে যে সিলেক্টর লেখা হয়েছে সেখানে text() মেথড ব্যবহার করে spanText এর টেক্সটটুকু এখানে ঢুকিয়ে দেয়া হয়েছে এবং এরপর appendTo মেথড দিয়ে ডকুমেন্টের body ট্যাগের শেষে এই প্যারাগ্রাফটি যোগ করা হয়েছে।তারপর css মেথড ব্যবহার করে এই প্যরাগ্রাফে কিছু ইনলাইন সিএসএস লিখে দিয়েছি।
এখানে গুরত্বপূর্ন একটা অবজেক্ট event ব্যবহার করেছি যার প্রোপার্টিজ হচ্ছে pageX এবং pageY.এর মাধ্যমে বর্তমান ইভেন্ট সাপেক্ষে (mouseover) X এবং Y অক্ষ পরিমাপ করা যায়।সুতরাং আমার প্রয়োজন অনুযায়ী আমি মাউস হোভারে Y অক্ষ থেকে মাইনাস ৪০ পিক্সেল (উপরে) এবং X অক্ষ থেকে প্লাস ২০ পিক্সেল (নিচে) নামিয়ে দিয়েছি।একই সিএসএস মাউস যখন মুভ করবে তখন ইভেন্ট সাপেক্ষে (mousemove ইভেন্ট) toolTip ক্লাস সম্বলিত টেক্সটটি মুভ করবে।
0 মন্তব্য(গুলি):
Post a Comment