آموزش ساخت چک باکس

آموزش ساخت چک باکس

در این آموزش ما به شما نحوه ساخت چک باکس رو میدیم البته با ظاهری متفاوت که باآن چه که تا حالا دیدید فرق می کند.

برای مشاهده لینک وارد شود

در این آموزش ما به شما نحوه ساخت چک باکس رو میدیم البته با ظاهری متفاوت که باآن چه که تا حالا دیدید فرق می کند.حالا ما کار را با نوشتن کد های HTML اغاز می کنیم.در ابتدای کار ما نیاز به یک فرم با تعدادی چک باکس داریم که بعدا توسط jQuery انها را به حالت مورد نظرمان در خواهیم آورد پس اول کد HTML را می نویسیم

index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Better Check Boxes with jQuery and CSS | 8np Demo</title>

<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="stylesheet" type="text/css" href="jquery.tzCheckbox/jquery.tzCheckbox.css" />

</head>
<body>
<div id="page">
<form method="get" action="./">
<ul>
<li>
<label for="ch_effects">Display effects: </label>
<input type="checkbox" id="ch_effects" name="ch_effects"
data-on="Show effects"
data-off="Hide effects" />
</li>
<li>
<label for="ch_location">Enable location tracking: </label>
<input type="checkbox" id="ch_location" name="ch_location" checked />
</li>
<li>
<label for="ch_showsearch">Include me in search results: </label>
<input type="checkbox" id="ch_showsearch" name="ch_showsearch" />
</li>
<li>
<label for="ch_emails">Email notifications: </label>
<input type="checkbox" id="ch_emails" name="ch_emails" data-on="ON"
data-off="OFF" />
</li>
</ul>
</form>

</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js">
</script>
<script src="jquery.tzCheckbox/jquery.tzCheckbox.js"></script>
<script src="js/script.js"></script>

</body>
</html>

تگ page# فرم ما را نگه میدارد و در کنار آن ما تعدادی lable برای توضیح چک باکس ها داریم.یکی از قابلیت های جالب این است که وقتی روی توضیحات کلیک کنیم چک باکس فعال یا غیر فعال خواهد شد.توجه کنید که برخی از ویژگی های HTML5 روی توضیحات قرار داده شده است.ما از این برای متصل کردن هر نوع داده ای بر روی توضیحات استفاده خواهیم کرد به عنوان مثال

<span class="tzCheckBox checked">
<span class="tzCBContent">ON</span>
<span class="tzCBPart"></span>
</span>

خوب حالا بریم سراغ استایل ها.

ما از یک تصویر زمینه روشن با فرمت PNG برای پس زمینه چک باکس ها استفاده کردیم.رنگ سبز به نشانه انتخاب کردن و رنگ قرمز به نشانه ی انتخاب نکردن چک باکس است.طول چک باکس ها متغییر است.

jquery.tzCheckbox.css

.tzCheckBox{
background:url('background.png') no-repeat right bottom;
display:inline-block;
min-width:60px;
height:33px;
white-space:nowrap;
position:relative;
cursor:pointer;
margin-left:14px;
}

.tzCheckBox.checked{
background-position:top left;
margin:0 14px 0 0;
}

.tzCheckBox .tzCBContent{
color: white;
line-height: 31px;
padding-right: 38px;
text-align: right;
}

.tzCheckBox.checked .tzCBContent{
text-align:left;
padding:0 0 0 38px;
}

.tzCBPart{
background:url('background.png') no-repeat left bottom;
width:14px;
position:absolute;
top:0;
left:-14px;
height:33px;
overflow: hidden;
}

.tzCheckBox.checked .tzCBPart{
background-position:top right;
left:auto;
right:-14px;
}

خوب اکنون ما کد های jQuery را مینویسیم

ما نام پلاگینمان را tzCHeckbox قرار می دهیم.این با استفاده از توضیحات به عنوان ویژگی lable  اشیا جاوااسکریپت را دریافت می کند.این property برای نمایش روشن/خاموش بودن توضیحات به صورت ارایه است.

jquery.tzCheckbox.js

(function($){
$.fn.tzCheckbox = function(options){

// Default On / Off labels:

options = $.extend({
labels : ['ON','OFF']
},options);

return this.each(function(){
var originalCheckBox = $(this),
labels = [];

// Checking for the data-on / data-off HTML5 data attributes:
if(originalCheckBox.data('on')){
labels[0] = originalCheckBox.data('on');
labels[1] = originalCheckBox.data('off');
}
else labels = options.labels;

// Creating the new checkbox markup:
var checkBox = $('',{
className : 'tzCheckBox '+(this.checked?'checked':''),
html: ''+labels[this.checked?0:1]+
''
});

// Inserting the new checkbox, and hiding the original:
checkBox.insertAfter(originalCheckBox.hide());

checkBox.click(function(){
checkBox.toggleClass('checked');

var isChecked = checkBox.hasClass('checked');

// Synchronizing the original checkbox:
originalCheckBox.attr('checked',isChecked);
checkBox.find('.tzCBContent').html(labels[isChecked?0:1]);
});

// Listening for changes on the original and affecting the new one:
originalCheckBox.bind('change',function(){
checkBox.click();
});
});
};
})(jQuery);

​و نحوه استفاده از این افزونه به این صورت است

 

 

$('input[type=checkbox]').tzCheckbox({
labels: [ 'Enable', 'Disable' ]
});

 

پایان

 

+1
0


هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

درباره‌ی مدیر سایت

در اردیبهشت سالی از سال های خدا بدنیا آمدم.درس خواندم و مهندس شدم.ازآنجایی که علاقه شدیدی به برنامه نویسی و ترجمه وآموزش داشتم در راستای اهدافم این وبسایت رو راه اندازی کردم تا دین خود را به جامعه برنامه نویسی ادا کرده باشم.

دیدگاه خود را بنویسید

آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

*


هفت − = 5

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>