Use the modern Materialize framework, together with jQuery , jQuery Timepicker and Hammer.js
for touch events. Materialize turns the plain looking standard HTML
input fields into these awesome Android-like switches and check
boxes. It also adds the the on-click wave ink effect as it has Waves.js included in it’s package. Demo
This is a jQuery UI themes package for installing all the themes of jQuery UI. This package includes black-tie, blitzer, cupertino, dark-hive, dot-luv, eggplant, excite-bike, flick, hot-sneaks, humanity, le-frog, mint-choc, overcast, pepper-grinder, redmond, smoothness, south-street, start, sunny, swanky-purse, trontastic, ui-darkness, ui-lightness, vader.
jQuery خودش به صورت توکار بسیاری از قابلیتهای LINQ را دارد. برای مثال معادل Where در آن grep.$ است و یا معادل Select، متد map.$ آن است. برای مثال کد #C زیر:
var maleNames = people .Where(p => p.Sex == "M") .Select(p => p.Name)
var maleNames = $.grep(people, function (p) { return p.Sex == 'M'; }) .map(function (p) { return p.Name; });
یک نکتهی تکمیلی: جایگزینی bower با npm
bower یک فناوری منسوخ شدهاست و اگر بخواهیم bower.json ذکر شدهی در این مطلب را با package.json مربوط به npm جایگزین کنیم، به یک چنین محتوایی خواهیم رسید:
پس از ایجاد فایل package.json فوق، کافی است دستور npm install را در ریشهی پروژه وارد کنید تا این بستهها دریافت و نصب شوند.
سپس بر اساس مسیرهای پوشهی node_modules جدید، فایل bundleconfig.json چنین محتوایی را پیدا میکند:
و در آخر فایل Layout.cshtml_ برنامه به این صورت ساده خواهد شد (فقط خروجیهای نهایی css و js حاصل از BundlerMinifier در اینجا قید میشوند؛ که حاصل یکی کردن و فشرده سازی تمام آنها است):
البته با این شرط که تنظیمات ذیل در فایل csproj برنامه موجود باشند:
bower یک فناوری منسوخ شدهاست و اگر بخواهیم bower.json ذکر شدهی در این مطلب را با package.json مربوط به npm جایگزین کنیم، به یک چنین محتوایی خواهیم رسید:
{ "name": "testwebapp", "version": "1.0.0", "description": "", "scripts": {}, "author": "", "license": "ISC", "dependencies": { "bootstrap": "^3.3.7", "jquery": "^2.2.4", "jquery-ajax-unobtrusive": "^3.2.4", "jquery-validation": "^1.17.0", "jquery-validation-unobtrusive": "^3.2.8" } }
سپس بر اساس مسیرهای پوشهی node_modules جدید، فایل bundleconfig.json چنین محتوایی را پیدا میکند:
[ { "outputFileName": "wwwroot/css/site.min.css", "inputFiles": [ "node_modules/bootstrap/dist/css/bootstrap.min.css", "wwwroot/css/site.css" ] }, { "outputFileName": "wwwroot/js/site.min.js", "inputFiles": [ "node_modules/jquery/dist/jquery.min.js", "node_modules/jquery-validation/dist/jquery.validate.min.js", "node_modules/jquery-validation-unobtrusive/dist/jquery.validate.unobtrusive.min.js", "node_modules/jquery-ajax-unobtrusive/jquery.unobtrusive-ajax.min.js", "node_modules/bootstrap/dist/js/bootstrap.min.js", "wwwroot/js/site.js" ], "minify": { "enabled": true, "renameLocals": true }, "sourceMap": false } ]
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>@ViewData["Title"] - DNTCommon.Web.Core.TestWebApp</title> <link href="~/css/site.min.css" rel="stylesheet" asp-append-version="true" /> </head> <body> <div> @RenderBody() </div> <script src="~/js/site.min.js" type="text/javascript" asp-append-version="true"></script> @RenderSection("Scripts", required: false) </body> </html>
<Project Sdk="Microsoft.NET.Sdk.Web"> <Target Name="PrecompileScript" BeforeTargets="BeforeBuild"> <Exec Command="dotnet bundle" /> </Target> <ItemGroup> <DotNetCliToolReference Include="BundlerMinifier.Core" Version="2.6.362" /> </ItemGroup> </Project>
این متد را به ابتدای فایل ajaxfileupload.js اضافه کنید (برای نگارشهای جدیدتر jQuery):
jQuery.extend({ handleError: function( s, xhr, status, e ) { // If a local callback was specified, fire it if ( s.error ) { s.error.call( s.context || window, xhr, status, e ); } // Fire the global callback if ( s.global ) { (s.context ? jQuery(s.context) : jQuery.event).trigger( "ajaxError", [xhr, s, e] ); } },
با تشکر از پست خوبتون
فقط مساله ای که برای من اتفاق افتاد این بود که زمانی که دکمه مربوط به بازسازی کپچا رو میزدم تصویر از کش خونده میشد و تصویر جدید نمایش داده نمیشد که برای حل این موضوع کافیست کد ایجکس برای آپدیت کپچا توسط دکمه refresh را به صورت زیر بنویسید:
فقط مساله ای که برای من اتفاق افتاد این بود که زمانی که دکمه مربوط به بازسازی کپچا رو میزدم تصویر از کش خونده میشد و تصویر جدید نمایش داده نمیشد که برای حل این موضوع کافیست کد ایجکس برای آپدیت کپچا توسط دکمه refresh را به صورت زیر بنویسید:
jQuery('#refresh').on({ 'click': function () { var random = new Date(); jQuery.ajax({ url: '@Url.Action("CaptchaImage","Captcha")', type: "GET", data: null, success: function (result) { jQuery("#imgcpatcha").attr("src", "/Captcha/CaptchaImage?" + random + result); } }); } });
نظرات مطالب
آپلود فایل توسط فرمهای پویای jqGrid
این متد را به ابتدای فایل ajaxfileupload.js اضافه کنید (برای نگارشهای جدیدتر jQuery):
jQuery.extend({ handleError: function( s, xhr, status, e ) { // If a local callback was specified, fire it if ( s.error ) { s.error.call( s.context || window, xhr, status, e ); } // Fire the global callback if ( s.global ) { (s.context ? jQuery(s.context) : jQuery.event).trigger( "ajaxError", [xhr, s, e] ); } },
چند سؤال اینجا هست که از راه دور قابل بررسی نیست:
- چطور تعاریف فایلها رو در کدها اضافه کردید؟ (اگر خطای نبود jQuery رو بدون خطای کامپایل که ذکر شد گرفتید، یعنی اصلا jQuery تعریف نشده در تعریف bundle نهایی)
- ساختار پوشههای شما چیست؟ محل قرارگیری این فایلها به چه ترتیبی است؟
- از چه نگارشی از اسکریپتها و فایلها استفاده میکنید؟ از کجا تهیه شدهاند؟
ضمنا هیچ الزامی برای استفاده از minification در این مبحث نیست. فقط برای تکمیل بحث عنوان شده.
به علاوه در قسمتهای بعدی این بحث، سورس هر قسمت پیوست شده که شامل فایلهای اسکریپت و css متناظر با هر بحث میشود. این فایلها در این سری ویژه، مورد تائید هستند و آزمایش شدهاند.
- چطور تعاریف فایلها رو در کدها اضافه کردید؟ (اگر خطای نبود jQuery رو بدون خطای کامپایل که ذکر شد گرفتید، یعنی اصلا jQuery تعریف نشده در تعریف bundle نهایی)
- ساختار پوشههای شما چیست؟ محل قرارگیری این فایلها به چه ترتیبی است؟
- از چه نگارشی از اسکریپتها و فایلها استفاده میکنید؟ از کجا تهیه شدهاند؟
ضمنا هیچ الزامی برای استفاده از minification در این مبحث نیست. فقط برای تکمیل بحث عنوان شده.
به علاوه در قسمتهای بعدی این بحث، سورس هر قسمت پیوست شده که شامل فایلهای اسکریپت و css متناظر با هر بحث میشود. این فایلها در این سری ویژه، مورد تائید هستند و آزمایش شدهاند.
نظرات مطالب
ASP.NET MVC #21
- دقیقا به همان نحوی که نوشته شده. onSuccess پس از پایان کار عملیات Ajax ایی فراخوانی میشود. در آنجا متد یاد شده را بر روی Id محتوای پویای بارگذاری شده فراخوانی کنید. یک نمونه مثال دیگر آن استفاده از این روش در مطلب «نمایش فرمهای مودال Ajax ایی در ASP.NET MVC به کمک Twitter Bootstrap» است.
- محل قرارگیری تمام عناصر رو در صفحه با استفاده از jQuery میشود تغییر داد.
اگر با مفاهیمی مانند Id عناصر و نحوه استفاده از آنها در jQuery آشنایی ندارید، یک دوره مقدماتی در اینباره در سایت موجود است.
- محل قرارگیری تمام عناصر رو در صفحه با استفاده از jQuery میشود تغییر داد.
اگر با مفاهیمی مانند Id عناصر و نحوه استفاده از آنها در jQuery آشنایی ندارید، یک دوره مقدماتی در اینباره در سایت موجود است.
نظرات مطالب
ASP.NET MVC #21
- مراجعه کنید به دوره «استفاده از افزونهها و امکانات jQuery در ASP.NET MVC» برای تکمیل بحث. برای نمونه مطلب «افزونهای برای کپسوله سازی نکات ارسال یک فرم ASP.NET MVC به سرور توسط jQuery Ajax» اطلاعات یک فرم رو به صورت خودکار توسط متد form.serialize به سرور ارسال میکند.
- نمیتونید از Ajax معمولی (یا به عبارتی XMLHttpRequest) برای ارسال فایل استفاده کنید. یا باید از سیلورلایت یا فلش استفاده کنید، یا از مرورگرهایی که XMLHttpRequest Level 2 را پشتیبانی کنند (از IE 10 به بعد مثلا)، امکان Ajax upload توکار به همراه گزارش درصد آپلود را بدون نیاز به فلش یا سیلورلایت، دارند.یک نمونه پیاده سازی آن
- نمیتونید از Ajax معمولی (یا به عبارتی XMLHttpRequest) برای ارسال فایل استفاده کنید. یا باید از سیلورلایت یا فلش استفاده کنید، یا از مرورگرهایی که XMLHttpRequest Level 2 را پشتیبانی کنند (از IE 10 به بعد مثلا)، امکان Ajax upload توکار به همراه گزارش درصد آپلود را بدون نیاز به فلش یا سیلورلایت، دارند.یک نمونه پیاده سازی آن