select option سفارشی

[qartalonline]

سلام

اسکریپت so امکان سفارشی کردن تگ select رو به شما میده.
شما میتونید به وسیله این اسکریپت سبک ، استایل دلخواه خود رو بر روی تگ select اعمال کنید.

[asghar2008]

سلام

خدمت دوستانی که در طراحی هاشون نیاز به select option سفارشی دارند ، فایل ضمیمه حاوی کدی است که امکان سفارشی کردن این تگ رو میده .
در واقع شما میتونید با تغییر کدهای css ، استایل مورد نظر رو به تگ select بدید.

لطفا در صورت مشاهده هرگونه اشکال یا خطا یا ... اطلاع دهید.

ممنون.

سلام

خیلی زیبا طراحی کردین ! ممنون که در اختیار دوستان قرار دادی.

یه سوال داشتم ممنون میشم راهنمایی کنید:

فایل های js واسه چیه ؟؟

مگه با Css طراحی نکردین ؟

[qartalonline]

فایل های js که یکیشون مربوط به جی.کوئری است.
و دیگری تگ select رو تبدیل به div میکنه و سپس به اون div استایل داده میشه.

[qartalonline]

جهت مشاهده سایر دوستان

[jalil_gh]

شما برای این کار از جی‌کوئری استفاده کردید. چه خوب می‌شد اونو به صورت یه پلاگین برای جی‌کوئری می‌نوشتید. اونجوری میشد از اون به این صورت استفاده کرد.
$('select').so();
اینجوری هم تمیزتر در میاد هم اینکه میتونیم فقط اون select هایی که خودمون انتخاب کردیم رو سفارشی کنیم.
نکته دیگه اینکه شما از نسخه 1.3 جی‌کوئری استفاده کردید. با نسخه‌های بعدی هم سازگاری داره؟

[qartalonline]

با اینکه پلاگین حجمش زیاد میشه ولی فکر خوبیه . اگه بتونم پلاگین مینویسم.

با نسخه های بعدی جی کوئری سازگاری داره .چون حجم ورژن 1.3 پایینه من از اون استفاده کردم.

[qartalonline]

سلام دوستان

ورژن جدید اضافه شد .

امکانات اضافه شده :
سازگاری با اغلب مرورگرها (ie7+ , chrome , mozilla ff , opera , safari , mobile browser )
امکان استایل دادن متفاوت به هر select
امکان سفارشی کردن select دلخواه

[nimadows]

خیلی خوب بود
ممنون که در اختار دیگران قرار دادین

[rezaricky]

خیلی ممنون ارکاداش
دوتا سوال داشتم :
میشه اسکرول رو هم شبیه select option کرد ؟ یعنی مثلا رنگ شو عوض کرد ؟
میتونم از این فایل در پروژه ام استفاده کنم ؟

[qartalonline]

بله به اسکرول رو هم میشه استایل داد. البته تنها با css محدودیت داره ولی میشه با jquery این کار رو انجام داد.

بله میتونید استفاده کنید.

[tadayoni]

http://tadayoni.ir/%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF-%D9%84%DB%8C%D8%B3%D8%AA-%D8%A8%D8%A7-%D9%BE%D9%88%D8%B3%D8%AA%D9%87-%D8%AA%DB%8C%D8%B1%D9%87-%D8%A8%D8%A7-dropkick-js/

[refugee]

ای کاش یه توضیح در مورد کد ها تون و اموزش سفارشی کردن ( و یا تبدیل سلکت به دایو با جاوااسکریپت ) رو میدادین . بقیه هم یاد بگیرند .

تشکر

[qartalonline]

توضیحاتش کمی سخته (تو زمینه آموزش دادن مشکل دارم) ولی سعی میکنم در حدی که میتونم آموزشش رو قرار بدم.

[qartalonline]

سلام دوستان

ورژن 2.5 اضافه شد.


تغییرات انجام شده:
مشکل سازگاری با ورژن های مختلف jquery برطرف شد.
امکان استفاده بصورت ltr اضافه شد.
اسکریپت در دو فایل هم بصورت فشرده و هم بصورت غیرفشرده وجود دارد.
رفع باگها



سعی میکنم بزودی آموزش نحوه کار این اسکریپت رو قرار بدم.


لطفا در صورت مشاهده باگهای احتمالی خبر بدید.

[دانیال دزفولی]

ای کاش یه توضیح در مورد کد ها تون و اموزش سفارشی کردن ( و یا تبدیل سلکت به دایو با جاوااسکریپت ) رو میدادین . بقیه هم یاد بگیرند .

تشکر

من نفهمیدم بالاخره شما طراحی سایت در چه حد بلدید؟

[qartalonline]

آموزش نحوه کار اسکریپت

این اسکریپت شامل 10 تابع هستش که سعی میکنم هر روز حداقل یک تابع رو بصورت مختصر بررسی کنیم.

لیست توابع :
1. install
2. setSizeParam
3. setClassName
4. setSelectInfo
5. setSelectId
6. createSelect
7. widthSelect
8. clickSelect
9. clickOption
10. click

دوستان میتونید هر سوالی درباره اسکریپت داشتید بپرسید.

[qartalonline]

بررسی تابع install

کد:
install : function() {

$(function() {
$(document).ready(function() {
so.setSizeParam(150, 16, 20);
so.setClassName();
so.setSelectInfo();
so.setSelectId();
so.createSelect();
so.click();
});
});

},

این تابع بعد از بارگذاری کل صفحه ، توابع مورد نیاز رو اجرا میکنه یا به عبارتی توابع رو فراخوانی میکنه.

[qartalonline]

بررسی تابع setSizeParam

کد:
setSizeParam : function(mh, m, scw) {

this.mh = mh;
this.m = m;
this.scw = scw;

},

این تابع اندازه ها را تنظیم میکند. و سه تا پارامتر رو میگیره.
پارامتر اول : حداکثر ارتفاع مجاز برای لیست در حالت باز
پارامتر دوم : فعلا کاربردی نداره
پارامتر سوم : عرض در نظر گرفته شده برای اسکرول بار

[refugee]

من نفهمیدم بالاخره شما طراحی سایت در چه حد بلدید؟

میشه لطف کنید دیگه تو هر پستی به من گیر ندین ؟

آقا من اصلا هیچی بلد نیستم , خوب شد ؟ هرجا میری یا تهمت میزنی که به فلانی بی احترامی کردم یا ...:عصبانی:

[qartalonline]

بررسی تابع setClassName

کد:
setClassName : function() {

this.cso = 'so';
this.css = 'so_selected';
this.csls = 'so_list_selected';
this.csa = 'so_arrow';
this.csl = 'so_list';

},

این تابع برای نام گذاری کلاس جهت استایل دهی به کار می رود.
و در صورت نیاز به تغییر نام کلاس میتوان به راحتی این کار رو انجام داد.

[qartalonline]

بررسی تابع setSelectInfo

کد:
setSelectInfo : function() {

this.ts = $('select.aw_so').length;
this.s_asy = 'aw_so_yes';
this.s_asn = 'aw_so_no';
this.s_i = 's_i_';

},

در این تابع تعداد select ـهایی که دارای کلاس aw_so هستند (select هایی که دارای کلاس برای سفارشی شدن هستند) بدست آورده میشه.
علاوه بر این پیشوند و کلاسی برای نام گذاری تگهای select قرار میدیم.

[qartalonline]

بررسی تابع setSelectId

کد:
setSelectId : function() {

for (var i = 1; i <= this.ts; i++) {
$('select.aw_so').eq(i-1).addClass(this.s_asy).attr('id', this.s_i+i);
}

},

این تابع شامل یک حلقه است که به تعداد select های دارای کلاس aw_so هستند تکرار میشود.
و به هر تگ select علاوه بر اضافه شدن کلاس، id (شناسه اختصاصی) افزوده میشود.

[qartalonline]

بررسی تابع createSelect

وظیفه این تابع تبدیل تگ های select به تگ div میباشد.

کد:
createSelect : function() {

for (var i = 1; i <= this.ts; i++) {

if ( $('select#' + this.s_i+i).html() ) {

var op;
var t = $('select#' + this.s_i + i).children('option').length;
var li = '';
var sel = '';
var ht = '';


for (var j = 1; j <= t; j++) {

op = $('select#' + this.s_i + i).children('option:nth-child(' + j + ')').addClass('so_' + i + '-op_' + j).html();


if ( $('select#' + this.s_i + i).children('option:nth-child(' + j + ')').attr('selected') ) {

sel = '<div class="' + this.css + '"><div class="' + this.csa + '"></div>' + op + '</div>';
li += '<li class="' + this.csls + ' so_' + i + '-op_' + j + '">' + op + '</li>';

} else {

li += '<li class="so_' + i + '-op_' + j + '">' + op + '</li>';
}

}


ht = '<div id="so-' + this.s_i + i + '" class="' + this.cso + '">' + sel + '<div class="' + this.csl + '"><ul>' + li + '</ul></div></div>';


$('select#' + this.s_i + i).css('display', 'none').after(ht);


$('.' + this.csl).css('display', 'none');


so.widthSelect(this.s_i + i);

}

}

},

این تابع به ازای هر تگ select یک بار اجرا میشود.(سطر 3)
و در صورت وجود مقدار در داخل تگ دستور اجرا میشود.(سطر 5)

از سطر 7 تا 11 متغیر های لازم تعریف میشه.
در سطر 8 تعداد option های موجود در داخل select بدست آورده میشه.

از سطر 14 تا 29 شامل یک حلقه برای مرور option های داخل select هست.
سطر 16 : مقدار داخل یک تگ option گرفته میشه.
سطر 19 : بررسی اینکه اگه option مورد نظر در حالت انتخاب باشه اون رو به "عنوان" لیست ست کنه (سطر 21) و کلاس selected رو به تگ اضافه کنه (سطر 22) در غیر اینصورت تگ option بصورت عادی ساخته میشه (سطر 26).
*در واقع در سطرهای 14 تا 29 مقدار داخل option ها گرفته میشه و داخل تگ div قرار میگیره و بدین ترتیب گزینه ها ساخته میشن.

سطر 32 : در این سطر گزینه های ساخته شده در مرحله قبل به تگ بدنه افزوده میشن.
*در واقع در این سطر یک تگ select به طور کامل به تگ div تبدیل میشه.

سطر 35 : تگ select مخفی میشه و تگ ساخته شده به بعد از تگ select افزوده میشه.

سطر 38 : مخفی کردن لیست باز شده.

سطر 41 : فراخوانی تابع برای تنظیمات عرض تگ div.



مثلا اگه کد select ما بصورت زیر باشه:

<select class="aw_so">
<option>item 1</option>
<option>item 2</option>
<option selected>item 3</option>
<option>item 4</option>
<option>item 5</option>
</select>


به کد زیر تبدیل میشه (که این کد به بعد از تگ select اصلی افزوده میشه) :

<div class="so">
<div class="so_selected"><div class="so_arrow"></div>item 3</div>
<div class="so_list">
<ul>
<li>item 1</li>
<li>item 2</li>
<li class="so_list_selected">item 3</li>
<li>item 4</li>
<li>item 5</li>
</ul>
</div>
</div>


دوستان من سعی کردم مطالب رو بصورت روان بگم ، در صورت گنگ بودن هر یک از بخش ها بفرمایید تا توضیحات بیشتری بدم.

[tamafi6]

من نفهمیدم بالاخره شما طراحی سایت در چه حد بلدید؟
دوست عزيزمن معذرت ميخوام به سوال شمانظرميدم اميدوارم توهين قلمدادنشه وعذرميخوام ازدوستمون كه تايپك به انحراف كشانده نشه ندانستن عيب نيست اينجايك انجمن هست عزيزاني باهرسطح اطلاعات ميتوننداينجافعاليت كنندمهم اينه كه فعالندودارندفعاليت ميكنندوازهمه مهمترعلاقمند,دوستاني هم جواب سوالات راميدهندوازهمه قابل ستايش تردوستاني كه زحمت ميكشندوآموزش قرارميدهندباهرسطح اطلاعات حتي يك مطلب ساده, مهم تلاش وصرف زماني هست كه يك دوست براي مطلب خاصي ميگذاره وانگيزه اي داره براي فعاليت مبادا بايك سخن نانجاباعث رنجش و دلسردشدن عزيزي بشويم اميدوارم انجمن همچنان پرحرارت به كارش ادامه بده ومانندبعضي ازفروم هاي ديگه به مخروبه اي تبديل نشه
موفق باشيد.

[qartalonline]

بررسی تابع widthSelect

کد:
widthSelect : function(id) {

var so = '#so-' + id + '.' + this.cso;
var sl = '#so-' + id + ' .' + this.csl;
var ss = '#so-' + id + ' .' + this.css;

var lw = $(sl).outerWidth();
var lh = $(sl).outerHeight();
var sow = $(so).outerWidth();

var socl = 0;
if(lh > this.mh){
socl = this.scw;
}

var bsw = ( (sow - $(ss).width()) / 2) + 1;


if (sow > (lw + socl)) {

$(sl).css('width', (sow - bsw) + 'px');

if (lh > this.mh) {
$(sl).css('overflow-y', 'scroll');
$(sl).css('height', this.mh + 'px');
$(sl).css('width', (sow - bsw) + 'px');
}

} else {

if(lh > this.mh){
$(sl).css('overflow-y', 'scroll');
$(sl).css('height', this.mh + 'px');
$(sl).css('width', (lw + this.scw) + 'px');
}
}

},

این تابع عرض تگ ساخته شده را کنترل میکنه تا از به هم ریختگی لیست جلوگیری بشه و همچنین در صورتیکه ارتفاع لیست باز شونده بیشتر باشد اسکرول بار رو نمایش میده.

[qartalonline]

بررسی تابع clickSelect

کد: clickSelect : function(tag) {

var ic = $(tag).parent('.' + this.cso);

if ($(ic).children('.' + this.csl).css('display') === 'block') {

$(ic).children('.' + this.csl).css('display', 'none');
$(ic).removeClass('active');

} else {

$('.' + this.cso).children('.' + this.csl).css('display', 'none');
$('.' + this.cso).removeClass('active');

$(ic).children('.' + this.csl).css('display', 'block');
$(ic).addClass('active');
}

},


این تابع هنگام کلیک بر روی هریک از تگهای div - تگ select جدید - اجرا میشود.
این تابع id رو میگیره سپس بررسی میکنه اگه لیست اون id باز شده باشه لیست رو میبنده در غیر این صورت لیست رو باز میکنه.

[qartalonline]

بررسی تابع clickOption

کد: clickOption : function(tag) {

$(tag).parent('ul').parent('.' + this.csl).parent('.' + this.cso).children('.' + this.css).html( '<div class="' + this.csa + '"></div>' + $(tag).html() );

$(tag).parent('ul').children('li').removeClass(thi s.csls);

$(tag).addClass(this.csls);

$(tag).parent('ul').parent('.' + this.csl).parent('.' + this.cso).removeClass('active');
$(tag).parent('ul').parent('.' + this.csl).css('display', 'none');

var id = $(tag).parent('ul').parent('.' + this.csl).parent('.' + this.cso).attr('id').split('-');
var sid = id[1];

var cl = $(tag).attr('class').split(' ');
var scl = cl[0];

$('select#' + sid).children('option').removeAttr('selected');
$('select#' + sid).children('option.' + scl).attr('selected', 'selected');

},


این تابع با کلیک بر روی گزینه ای از لیست باز شده اجرا میشود.

عملایت مربوط به این تابع:
- قرار دادن متن گزینه انتخاب شده در عنوان لیست
- تغییر استایل گزینه انتخاب شده
- بستن لیست بعد از کلیک بر روی گزینه
- انتخاب گزینه انتخاب شده از داخل تگ select مربوطه

[qartalonline]

بررسی تابع click

کد: click : function() {

$(function() {

$(document).bind('click', function(event) {

var target = $(event.target);
var t_class = target.attr('class');

if ( t_class === so.css || t_class === so.csa || t_class === so.cst || t_class === so.cso ) {

if (t_class === so.css) {

so.clickSelect(target);

} else if (t_class === so.cso) {

so.clickSelect(target.children('.' + so.css));

} else {

so.clickSelect(target.parent('.' + so.css));

}
}

if (target.parent('ul').parent('.' + so.csl).length === 1) {
so.clickOption(target);
}

if ( t_class !== so.css && t_class !== so.csa && t_class !== so.cst && t_class !== so.cso && t_class !== so.csl && target.parent('.' + so.csl).length !==1 ) {
$('.' + so.cso).children('.' + so.csl).css('display', 'none');
$('.' + so.cso).removeClass('active');
}


}).trigger('click');


$(window).bind('blur', function() {

$('.' + so.cso).children('.' + so.csl).css('display', 'none');
$('.' + so.cso).removeClass('active');

}).trigger('blur');

});

}


این تابع کلیک های انجام شده بر روی تگ رو کنترل بررسی و سپس تابع مربوطه رو اجرا میکنه.
مثلا اگه بر روی عنوان لیست کلیک بشه تابع مربوط به باز و بسته کردن لیست (تابع clickSelect) اجرا میشه.
یا اگه کلیک بر روی گزینه های لیست انجام بشه تابع clickOption اجرا میشه.

[mx50000]

سلام
من مشکل دارم
کدهای html رو باید چطوری نوشت تا عمل کنه
هرکاری میکنم عمل نمیکنه

[ASHKANLAEI]

سلام
من مشکل دارم
کدهای html رو باید چطوری نوشت تا عمل کنه
هرکاری میکنم عمل نمیکنه

مثلا اگه کد select ما بصورت زیر باشه:
کد HTML:
<select class="aw_so">
<option>item 1</option>
<option>item 2</option>
<option selected>item 3</option>
<option>item 4</option>
<option>item 5</option>
</select>
به کد زیر تبدیل میشه (که این کد به بعد از تگ select اصلی افزوده میشه) :
کد HTML:
<div class="so">
<div class="so_selected"><div class="so_arrow"></div>item 3</div>
<div class="so_list">
<ul>
<li>item 1</li>
<li>item 2</li>
<li class="so_list_selected">item 3</li>
<li>item 4</li>
<li>item 5</li>
</ul>
</div>
</div>

[mohammadbazzi93]

سلام در کل عالی یود هم طراحیت و هم آموزشت:تشویق::تشویق::تشویق::� �شویق::تشویق: