آشنایی با افزونه های Jquery.معرفی افزونه ی Jquery Autocomplete

جمعه 3 تیر 1390 07:24 ب.ظ ویرایش: جمعه 3 تیر 1390 10:23 ب.ظ

توسط: محمدرضا

ارسال به

در این پست و پست های بعدی قصد داریم به معرفی افزونه های jquey و نحوه ارتباط آنها در ASP.Net بپردازیم.

در این مقاله می خواهیم نحوه استفاده از افروزنه autocomplete در asp.net به منظور بازیابی اطلاعات از یک webmethod را توسط Ajax نشان دهیم.

برای این منظور ابتدا دو افزونه jquery-1.4.1.min.js و jquery-ui.min.js و یک کلاس jquery-ui-1.8.13.custom.css رو به صفحه اضافه می کنیم.

<head >

نحوه استفاده از افزونه نیز به صورت زیر می باشد:

$(function () {

$("#PersonName").autocomplete({

source: function (request, response) {

$.ajax({

url: "Default.aspx/GetPerson",//متدی که اطلاعات به آن فرستاده و خوانده می شود

dataType: "json",

type: "POST",

contentType: "application/json; charset=utf-8",

data: "{ 'name': '" + request.term + "'}",//پارامتری که به متد فرستاده می شود

success: function (data) {

response($.map(data.d, function (item) {

return {

value: item.ProductName//افزودن اطلاعات به منو

}

}));

}

});

minLength: 1

});

</script>

بعد از مشخص کردن کنترلی که می خواهیم افزونه را به آن اعمال کنیم$("#PersonName") در قسمت source منبع اطلاعاتی رو مشخص می کنیم که در اینجا از طریق Ajax اطلاعات را از یک WebMethod دریافت می کنیم.توضیحات بیشتر در مورد Ajax رو می تونید از اینجا مشاهده کنید.به ازای هر کاراکتری که در کنترل textbox وارد می شود اطلاعات توسط دستور request به WebMethod ارسال شده و اطلاعات بازگشتی با دستور response به منوی autocomplete در صورت وجود اضافه می شود.

minLength:حداقل تعداد کاراکتری که باید وارد شود تا افزونه عمل کند.

[WebMethod]

public static List<Person> GetPerson(string name)

{

var context = new Person();

var query = from Person c in context.GetPerson() where c.PersonName.StartsWith(name) select new Person() { PersonName = c.PersonName };

return query.ToList();

}

در این متد هر مقداری که توسط دستور request ارسال می شود جستجو شده و نتیجه به صورت List برمی گردد.

توسط کلاس .ui-autocomplete می توان تغییراتی در ظاهر افزونه ایجاد کرد که از جمله خصوصیات عبارتند از:

max-height: حداکثر ارتفاع منو.در صورت لزوم Scroll عمودی فعال می شود.

max-width: حداکثر پهنای منو.در صورت لزوم Scroll افقی فعال می شود.

padding-righ:فاصله آیتم ها از لبه سمت راست منو

padding-left: فاصله آیتم ها از لبه سمت چپ منو

همچنین توسط کلاس .ui-autocomplete-loading می توان یک آیکون loading به کنترل اضافه کرد.

دریافت پروژه

برچسب ها:jquery autocomplete in asp.net ،jquery autocomplete ،jquery plugin ،
دنبالک ها:Jquery Autocomplete ،

نظرات()

استفاده از قلم دلخواه در طراحی سایت(font-face@)

جمعه 27 خرداد 1390 01:15 ب.ظ ویرایش: جمعه 27 خرداد 1390 02:58 ب.ظ

توسط: محمدرضا

نوع مطلب: CSS3 ،

ارسال به

شاید تا بحال سایت هایی رو دیده باشید که از فونت هایی خاص برای طراحی صفحات خود استفاده می کنند.همان طور که می دانید برای طراحی سایت مجاز به استفاده از هر فونتی نمی باشیم.این محدودیت برای پارسی زبان ها نیز وجود دارد و معمولا از فونت های Times New Roman و Tahoma برای طراحی سایت استفاده می کنند.

اما این محدویت در CSS3 بر طرف شده و شما می توانید از هر فونتی که می خواهید در طراحی سایت خود استفاده کنید.

برای این منظور از دستور font-face@ برای تعریف فونت در فایل CSS استفاده می شود.

برای شروع کد زیر را به فایل CSS اضافه می کنیم.

@font-face

{

font-family: myfont;

src: url('../Fonts/BTitrBd.ttf'), /* non-IE */

url('../Fonts/BTitrBd.eot') format("opentype"); /* IE */

}

font-family:برای مشخص کردن نام فونت به کار می رود.این نام می تواند هر اسمی باشد و حتما لازم نیست که دقیقا نام فونت مورد نظر ذکر شود ولی در موقع استفاده از فونت باید دقیقا از نامی که در font-family تعیین کردیم استفاده کنیم.

url:در این قسمت مسیر فایل موردنظر جهت استفاده از فونت تعیین می شود.

مرورگر های Opera,Firefox,Chrome,Safari از هر دو نوع فونت TrueTypeFont ttf و OpenTypeFont otf پشتیبانی می کنند.IE هم طبق معمول ساز مخالف می زنه و فقط از نوع Embedded OpenType eot پشتیبانی می کند.

هنگام استفاده از font-face@ تعیین مقدار برای font-family و src الزامی می باشد.سایر گزینه ها که مقداردهی آنها اختیاری می باشد عبارتند از:

font-stretch,font-style,font-weight,unicode-range

برای اعمال در صفحه

div

{

font-family: myfont,tahoma;

}

در کد بالا در صورتی که به هر دلیلی نتواند "myfont" را اجرا کند فونت پیش فرض tahoma اجرا می شود.

@font-face

{

font-family: myfont;

src: local('B Titr'), url('../Fonts/BTitrBd.ttf'), /* non-IE */

url('../Fonts/BTitrBd.eot') format("opentype"); /* IE */

}

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

باعث می شود در صورتی که فونت مورد نظر در سرور نصب شده باشد از این Local

فونت استفاده کند در غیر این صورت از مسیر تعیین شده برای خواندن فونت استفاده می کند.

نکته اول:اگر بخواهیم از چندین فونت در طراحی صفحات استفاده کنیم به ازای هر فونت باید دستور font-face@ را به کار بریم.

نکته دوم:برای تبدیل فونت ttf به eot از این سایت استفاده کنید.

برچسب ها:font-face@ ،انتخاب فونت دلخواه در طراحی سایت ،css3 ،
دنبالک ها:W3 ،w3schools ،

نظرات()

iranexperts

آموزش جی کوئری ، html5 و CSS3

آشنایی با افزونه های Jquery.معرفی افزونه ی Jquery Autocomplete

استفاده از قلم دلخواه در طراحی سایت(font-face@)

iranexperts

درباره وبلاگ

آخرین پستها

نویسندگان

آمار وبلاگ

اَبر برچسبها

آرشیو موضوعی

آرشیو

پیوندها

صفحات جانبی