مستندات و طرز نوشتن این الگوها در ظاهر کمی پیچیده به نظر می رسد اما با مطالعه مستندات آن از منابع زیر میتوانید در این زمینه اطلاعات کسب نمایید . اگر عبارت regular expression tutorial  را جستجو کنید مستندات بسیار خوبی در این زمینه وجود دارد .

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

بطور مثال اگر * در آخر چیزی بیاد میتونه باشه یا نباشه ، اما اگر + در آخر بیاید حداقل یکی از این الگو می بایست باشد .

([A-Za-z0-9-]+)

این نشان دهنده ی قرار گرفتن حداقل یک حرف در گستره ی A-Z یا a-z یا ۰-۹ می باشد یعنی هر حرفی الفبایی و عددی باشد قبول است اما حتما یکی یا بیشتر .

مابقی مثال ها را با مطابقت دادن دستور با این فایل PDF می توانید بفهمید .

از Regular Expresion در خیلی از زبانهای برنامه نویسی استفاده می شود ، یکی از پرکاربررین آن Javascript است که میتوان با دستورات match() و exec() رشته های خود را مقایسه و اصلاح کنید .

برای تست کردن دستوراتی که می نویسید می توانید از Regular Expression Tester های آنلاین یا افزونه فایرفاکس به نام Regular Expresion Tester استفاده نمایید .

نوشته های مرتبط

• Filepicker آپلود از همه جا
• پر کردن فیلدهای فرم با Jquery و JSON
• صفحه بندی مطالب زیاد با Jquery
• منوی درختی از اطلاعات XML
• ساخت صفحات وب کاملا در تعامل با دستگاههای multi touch

میتوانید در سایت سازنده نمونه های این لغزنده ها را ببینید . همچنین برای روش استفاده می توانید در صفحه ی Github سازنده مستندات آن را مطالعه کنید و پلاگین را دانلود نمایید . اگر با دانلود از github  مشکل داشتید از هاست طراح آن را بطور مستقیم می توانید دریافت نمایید .

استفاده از این پلاگین خیلی کار پیچیده ای نیست کافیست با دستور زیر در تگ Head ابتدا کتابخانه Jquery و پلاگین مورد نظر را بارگذاری نمایید .

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="js/jquery.knob-1.1.1.js"></script>

 

سپس با دستور زیر پلاگین را برای المان مورد نظر صدا می زنیم .

<script>
$(function() {
$(".dial").knob();
}
</script>

گزینه های مختلفی برای  تغییر شکل و مقدار حداقل و حداکثر عددی آن وجود دارد که همگی باید بصورت attribute در تگ input ای که پلاگین را به آن اختصاص می دهید و صدا می زنید تعریف شود . بصورت دستور زیر در قسمت HTML سایت تگ input را قرار می دهید . توجه کنید کلاس input همان کلاسی باشد که در بالا پلاگین را برای آن صدا زده ایم .

<input type="text" data-min="-50" data-max="50">

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

یکی از معایب این پلاگین کار نکردن در مرورگر IE می باشد .

نوشته های مرتبط

• اجرای عملیات بعد از نگه داشتن چند ثانیه ای موس با Jquery
• ساخت tumbnail از عکسها بصورت خودکار با jQuery NailThumb
• ثابت نگه داشتن المانی در حین اسکرول
• Filepicker آپلود از همه جا
• پر کردن فیلدهای فرم با Jquery و JSON

در صورتی که میخواهید مستقیما تاثیرات را به المان مذکور وارد کنید از دستور زیر می بایست استفاده کنید :

(function($)
{
$(document).ready( function()
{
var elementPosTop = $('#jq4u-sidebar-ads').position().top;
$(window).scroll(function()
{
var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight = $(window).height();
//if top of element is in view
if (wintop > elementPosTop)
{
//always in view
$('#jq4u-sidebar-ads').css({ "position":"fixed", "top":"10px" });
}
else
{
//reset back to normal viewing
$('#jq4u-sidebar-ads').css({ "position":"inherit" });
}
});
});
})(jQuery);

که در این صورت #jq4u-sidebar-ads نام آیدی المانی است که می بایست ثابت بماند .

همچنین می توان برای سادگی کار و پرهیز از پیچیدگی این کد را بصورت پلاگین Jquery درآورده بصورت زیر و در یک فایل قرار دهید و آن را در Head لود نمایید  :

(function($)
{
$.fn.keepElementInView = function()
{
var elemPosTop = this.position().top;
$(window).scroll(function()
{
var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight = $(window).height();
if (wintop > elemPosTop)
{
this.css({ "position":"fixed", "top":"10px" });
}
else
{
this.css({ "position":"inherit" });
}
});
return this;
};

 

$(document).ready( function()
{
jQuery('#jq4u-sidebar-ads').keepElementInView();
});

 

سپس با دستور زیر این پلاگین را برای المان های مختلف صدا میزنیم :

$(document).ready( function()

 

{
jQuery('#jq4u-sidebar-ads').keepElementInView();
});

نوشته های مرتبط

• ساخت tumbnail از عکسها بصورت خودکار با jQuery NailThumb
• نمایش اطلاع یا اخطار روی صفحه با Jquery
• استفاده از پلاگین نظر سنجی AJAX
• شمارگر دایره ای
• Filepicker آپلود از همه جا

بطور مثال یک توسعه دهنده و برنامه نویس سایتی ، با دریافت کدی مخصوص از این سایت می تواند به عنوان واسطه از این سایت برای ارتباط با فیسبوک و دراپ باکس و دیگر سایتها استفاده نماید . چون عملیات تحت سرور انجام می شود اولا پهنای باند کاربر کم نمی شود ، همچنین لینکهای مسدود و فیل*تر شده نیز قابل استفاده و آپلود خواهند بود . در سایت سازنده چندین دمو و مثال برای استفاده از این وب سرویس ارائه شده است . قسمت آپلود دارای چندین بخش است که مهمترین آن آپلود مستقیم از سایت دیگر است ، قسمت دراپ باکس و فیسبوک به هر کاربر سایت اجازه می دهد که از اکانتهای خود فایلها را آپلود نماید ، توسعه دهنده احتیاج به ثبت اپلیکشن و گرفتن API از این دو سایت نیست ، بلکه FilePicker این کار را برای توسعه دهندگان و برنامه نویسان به عنوان واسطه انجام می دهد .

برای شروع کافیست که کد توسعه دهندگی را از سایت FilePicker دریافت نمایید و طبق روشی که شرح می دهیم و در مستندات آن نیز می باشد می توانید آپلودر را در سایت خود استفاده نمایید .

در تگ Head صفحه با دستور زیر توابع API را از سایت Filepicker لود می نماییم .

<script type="text/javascript" src="//api.filepicker.io/v0/filepicker.js"></script>

سپس با دستور زیر کدی که از سایت دریافت کرده اید را وارد می نمایید

filepicker.setKey(apiKey);

سپس با دستور زیر یک attribute به هر دگمه ای می توان اضافه نمود که در صورت کلیک کردن آپلودر باز شود :

onclick="filepicker.getFile('image/*', function(url){$('#exampleResult a').attr('href', url).html(url);});"

این را مثلا به یک لینک اختصاص می دهیم .در این دستور مشخص می کنیم ، آدرس URL آپلود شده را هم به قسمت #exampleResult a در صفحه نشان بدهد ، البته در function هر کاری که مایلید می توانید با این URL انجام دهید ، مثلا با AJAX مسیر فایل آپلود شده را درون دیتابیس ذخیره نمایید تا بعدا قابل استفاده باشد .

توسط این وب سرویس می توان برنامه های بسیار جالبی نوشت ، مثلا دریافت خودکار یک سری عکس از چند سایت و آپلود آنها در سایت و …

نوشته های مرتبط

• پر کردن فیلدهای فرم با Jquery و JSON
• شمارگر دایره ای
• ثابت نگه داشتن المانی در حین اسکرول
• صفحه بندی مطالب زیاد با Jquery
• منوی درختی از اطلاعات XML

elfinder یک مدریت فایل تحت وب و متن باز است که قابلیت های زیادی را در اختیار برنامه نویسان وب قرار داده است ، میتوان به امکانات زیر اشاره نمود :

۱- بارگذاری فایل منیجر فقط با دستور لود اسکریپت

۲- استفاده از آن در هر جای صفحه

۳- قرار دادن سطح دسترسی برای کلاینت

۴ – امکان استفاده از API برای هر عملیات

۵ – مطابقت با CodIgniter

6- استفاده از ویرایشگر متن برای ویرایش فایلهای متنی

۷ – نمایش مشخصات فایل ، اضافه کردن مشخصات دلخواه به فایلها

۸ – جلوگیری از نمایش مسیر مطلق پوشه ها

۹ – پلاگینها و ماژول های thirdparty مثل python , Ruby on Rail , …

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

نوشته های مرتبط

• شمارگر دایره ای
• ثابت نگه داشتن المانی در حین اسکرول
• Filepicker آپلود از همه جا
• پر کردن فیلدهای فرم با Jquery و JSON
• صفحه بندی مطالب زیاد با Jquery

در هر دو روش این پلاگین کار را ساده تر می کند ، همیشه باز و بسته کردن تگهای PHP داخل مشخصه ی Value فرم ها کاری خسته کننده و تکراری می باشد و امکان خطا را هم بالاتر می برد ، اگر checkbox هایی را بخواهیم با PHP علامت گذاری کنیم که کار بسیار پیچیده تر خواهد شد و کمی برنامه نویسی شرطی هم وارد خواهد شد . پر کردن فیلدها با جاواسکریپت (جی کوئری) هم از لحاظ سادگی و هم کنترل بهتر قویا پیشنهاد می شود .

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

پس از لود کردن Jquery و فایل fillthis.jquery.js به شکل زیر :

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="fillthis.jquery.js"></script>

با استفاده از دستور زیر یک فیلد را با یک مقداری پر می کنید . (البته این دستور را زیر المان های HTML و یا بعد از لود کامل صفحه بنویسید.)

 $("#SingleInput").fillwith('Value!');

که singleInput آیدی فیلد مورد نظر است و Value هم مقداری است که می بایست به فیلد وارد شود .

اگر لیست MultySelect بود با دستور زیر چند مقدار را انتخاب می کنید .

 $("#MultiSelect").fillwith('value1;value2;value3');

اگر Checkbox و Radio بود می بایست عدد ۱ و ۰ را برای انتخاب کردن و انتخاب نکردن آن به عنوان مقدار در دستور وارد کرد .

$("#checkbox").fillwith('1');

همچنین می توانید با استفاده از فرمت JSON با یک دستور همه فیلدها را با هم پر کنید :

$.fillthis({ "Input1": "Value1", "Input2": "Value2", "Input3": "Value3", "Input4": "Value4" });

فایده ی این روش این است که  می توان با AJAX اطلاعات را بصورت JSON دریافت نمود و کاملا داینامیک با دستوری که قبلا نوشته اید این اطلاعات را در فیلدها جایگزین کرد . مثلا چند دسته اطلاعات که در یک فرم با انتخاب کاربر پر می شوند .

در دستوراتی که در بالا نوشته شده ، SELECTOR یک آیدی می باشد در صورتی که می خواهید انتخاب با نام فیلد باشد از این دستور می بایست استفاده کرد .

$("input[name=FiledName]").fillwith('value');

نوشته های مرتبط

• Filepicker آپلود از همه جا
• شمارگر دایره ای
• ثابت نگه داشتن المانی در حین اسکرول
• صفحه بندی مطالب زیاد با Jquery
• منوی درختی از اطلاعات XML

jPages  یک پلاگین Jquery می باشد که براحتی این کار را برای شما انجام می دهد ، امکانات بسیار زیاد این پلاگین تقریبا هر نیازی را برطرف می کند :

۱- انواع مختلف نمایش صفحه بندی

۲- عوض شدن صفحات با حرکت اسکرول موس

۳ – تغییر تعداد اطلاعات نمایش داده شده

۴ – پریدن به یک صفحه خاص

۵ – حمایت از انیمشن های Jquery , CSS

6- استفاده از Lazy Load برای پیش لود کردن عکسها

۷- استفاده در جدول عکسها و هر حالی از اطلاعات

۸- قرار دادن دگمه جلو عقب در مکانهای دلخواه

۹ – ساخت انواع گالری عکسها و نمایش بند انگشتی عکسها

۱۰ –  عوض شدن صفحات بطور خودکار

نحوه ی استفاده :

ابتدا با دستورات زیر کتابخانه هاو استایل  Jquery , Jpage را در صفحه لود کنید :

<link rel="stylesheet" href="css/jPages.css">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script src="js/jPages.js"></script>

دو قسمت در المان های HTML می باشند که یکی برای قرار دادن لیست اطلاعات itemContainer و دیگری برای نمایش شماره صفحه بندی ها و دگمه ها holder می باشد .

<!-- Future navigation panel -->
<div class="holder"></div>

<!-- Item container (doesn't need to be an UL) -->
<ul id="itemContainer">
<!-- Items -->
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
...
</ul>

اطلاعات در تگ های لیست می بایست قرار گیرند . در آخر صفحه هم تابع سازنده صفحه بندی را با دستور Jquery زیر صدا می زنیم .

$(function(){

$("div.holder").jPages({ containerID : "itemContainer" });

});

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

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

نوشته های مرتبط

• ثابت نگه داشتن المانی در حین اسکرول
• Filepicker آپلود از همه جا
• پر کردن فیلدهای فرم با Jquery و JSON
• منوی درختی از اطلاعات XML
• ساخت صفحات وب کاملا در تعامل با دستگاههای multi touch

همچنین در ادامه نحوه ی استفاده از ShortCode ها را در Widget ها یا ابزارک های پوسته شرح می دهم .

برای معرفی یک ShortCode در فایل Function.php موجود در پوشه ی قالب ، بعد از معرفی تابع مورد نظر  ، دستور زیر را وارد کرد :

add_shortcode( 'shortCodeName', 'function_name' );

با این دستور ، در ادیتور کافیست بصورت زیر ShortCode را فراخوانی کنیم :

[ShortCodeName][/ShortCodeName]

بطور مثال اگر بخواهیم محدودیت دسترسی به یک نوشته را ایجاد کنیم ، می بایست کدهای زیر را در function.php بیاوریم :

function paulund_check_user_sc( $at, $content = null ) {

 

if ( is_user_logged_in() && !is_null( $content ) && !is_feed() ) {
return $content;
} else {
return '';
}
}

 

add_shortcode( 'user_only', 'paulund_check_user_sc' );

که در اینجا تابع paulund_check_user_sc را به shortCode ای به نام user_only احتصاص داده ایم
و با نوشتن عبارت زیر در پست ها آن را فراخوانی خواهیم کرد :

[user_only]This content can only be seen by logged in users[/user_only]

فعال کردن shortCode ها در widget  ها :

بصورت پیش فرض ShortCode ها را نمی توان در custom HTML Widget ها استفاده نمود (ابزارک های متن دلخواه)

با ایجاد این عبارت در function.php این مسئله هم حل خواهد شد :

add_filter('widget_text', 'do_shortcode');

نوشته های مرتبط

• تغییر ایمیل پیش فرض وردپرس در ارسالهای خودکار
• معرفی 7 پلاگین ضروری برای وردپرس

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

۱- لینک XML استاتیک

فرض کنید اطلاعات XML بصورت زیر داشته باشیم و در یک فایل XML هم قرار داده باشیم .

<?xml version="1.0"?>
<characters>
<character orientation='good'>
<name>Mario</name>
<nationality>Italian</nationality>
<love_interest>Princess Peach</love_interest>
<sidekick>Luigi</sidekick>
<attack_style>Jumping on heads</attack_style>
<recent_games>
<game platform='wii'>Mario Galaxy</game>
<game platform='wii'>Mario Galaxy 2</game>
<game platform='3ds'>Mario Bros. 3D</game>
</recent_games>
</character>
<character orientation='good'>
<name>Kirby</name>
<nationality>Unknown</nationality>
<sidekick>Prince Fluff</sidekick>
<attack_style>Eating</attack_style>
<recent_games>
<game platform='wii'>Kirby's Epic Yarn</game>
<game platform='ds'>Kirby's Mass Attack</game>
<game platform='wii'>Kirby's Return to Dreamland</game>
</recent_games>
</character>
<character orientation='evil'>
<name>Bowser</name>
<nationality>Unknown</nationality>
<sidekick>Bowser Jr.Fluff</sidekick>
<attack_style>Fire breathing</attack_style>
<recent_games>
<game platform='ds'>Bowser's Inside Story</game>
</recent_games>
</character>
</characters>

سپس در فایل HTML پس از لود Jquery و فایل JS و استایل پلاگین :

<link rel='stylesheet' type='text/css' href='xmltree.css' />
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js'></script>
<script src='xmltree.js'></script>

با دستور زیر یک Object می سازیم :

<script>$(function() { new XMLTree({fpath: 'xml.xml', container: '#tree', startCollapsed: true , attrsAsData: true}); });</script>

آرگومان اول xml.xml مسیر فایل یا آدرس XML است که می خواهیم اطلاعات را از روی آن بخوانیم .

آرگومان دوم المان HTML ای است که می خواهیم اطلاعات در آنها چاپ شود . در اینجا #tree می باشد . آرگومان سوم برای این است که در شروع همه ی شاخه ها بسته باشند و آرگومان سوم برای این است که attribute های تگ های XML به data های Jquery تبدیل شوند ، مثلا می توان برای هر تگ یک آیدی قرار داد و با این روش از آن آیدی ها در کد Jquery استفاده کرد .

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

فرض کنید با یک وب سرویس قرار است کار کنید که با یک آدرس یک سری تگ (تگ های مادر ) و با آدرس دیگر تگ های دیگر (مثلا تگ بچه)  تولید می شوند می بایست با کلیک روی تگ مادر آدرس سورس تغییر کند تا بتواند تگهای بچه را دریافت کند .

با این دستور تگهای root مادر دریافت می شوند و سپس در گزینه ی subTreeRequest یک تابع برای دریافت تگهای بچه صدا می زنیم ، این تابع وقتی اجرا می شود که روی یکی از شاخه های مادر کلیک شود .

new XMLTree({
fpath: 'web_service.php?level=root',
container: '#tree',
subTreeBranches: true,
subTreeRequest: generate_sub_tree_url,
attrsAsData: true
});

در زیر تابع  generate_sub_tree_url را هم تعریف می کنیم که برای دریافت اطلاعات تگهای بچه در بالا صدا زدیم .

function generate_sub_tree_url(li) {
return 'web_service.php?branch_id='+li.data('id');
}

همانطور که مشاهده می کنید ، آدرس url تغییر کرده است ، و از اطلاعات attribute که در قسمت attrsAsData: true تولید کردیم استفاده کردیم  . در حقیقت به وب سرویس اعلام کردیم که اطلاعات این تگ مادر با این آیدی را تولید کن .

توجه داشته باشید که اطلاعات data برای Jquery در تگ li ذخیره می شوند پس برای دستیابی به آنها باید از دستور

li.data('id')

استفاده کرد .

اختصاص attribute به تگهای xml همانند اختصاص  attribute ها به HTML می باشد ، مثل حالت زیر :

<character orientation='good' id="1">

که attribute برای این تگ را id تغریف کردیم و مقدار ۱ را به آن داده ایم ، حال می توانیم در کدهای Jquery از این مقدار ۱ برای مثال استفاده کنیم .

دمو         دانلود سورس

یک نکته ی جالب هم در url ساخته شده توسط این پلاگین است ، در صورتی که منوها را باز کنید می بینید آخر URL سایت شناسه تگ ها را نشان می دهد مثلا :

#tree0:0,2,6;

نشان دهنده ی این است که اولین تگ سپس سومین تگ و در نهایت هفتمین تگ به ترتیب باز شده است ،

این نوع تغییر url دو مزیت مفید دارد :

۱- بعد از رفرش صفحه منوها در همان حالت قبلی می مانند.

۲- می توان با این روش برای گزینه ی خاصی از منو که باز باشد لینک بدهیم ، وقتی کاربر لینک را باز کرد با منوی کاملا بسته مواجه نخواهد شد .

نوشته های مرتبط

• Filepicker آپلود از همه جا
• پر کردن فیلدهای فرم با Jquery و JSON
• صفحه بندی مطالب زیاد با Jquery
• تبدیل اطلاعات XML به JSON
• ساخت صفحات وب کاملا در تعامل با دستگاههای multi touch

در این نوشته با استفاده از یک پلاگین Jquery تبدیل فرمت اطلاعات XML به JSON همراه با گزینه های قابل تغییر آن شرح می دهم .

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

XML

<root>
<item>
<one>Fars</one>
<two>Tehran</two>
<three>
<four>Qom</four>
</three>
</item>
</root>

تبدیل به :

{
one: 'Fars',
two: 'Tehran',
three: 'Qom'
}

البته در تبدیل اختیار کامل با شما خواهد بود که مثلا Qom را در three بگذارید یا three را مادر و four را بچه قرار دهید و Qom را در four قرار دهید یعنی :

{
one: 'Fars',
two: 'Tehran',
three: {
four: 'Qom'
}
}

طرز استفاده :

فرض کنید XML بصورت زیر است :

<?xml version="1.0" encoding="utf-8"?>
<news>
<item>
<headline>PHP</headline>
<href>http://taraah.ir/?cat=4</href>
<description>this is a description for PHP</description>
<thumb>http://taraah.ir/wp-content/themes/taraah_theme/images/origami/logo.png</thumb>
</item>
<item>
<headline>HTML-CSS</headline>
<href>http://taraah.ir/?cat=7</href>
<description>this is a description for HTML-CSS</description>
<thumb>http://taraah.ir/wp-content/themes/taraah_theme/images/origami/logo.png</thumb>
</item>
<item>
<headline>Javascript</headline>
<href>http://taraah.ir/?cat=5</href>
<description>this is a description for Javascript</description>
<thumb>http://taraah.ir/wp-content/themes/taraah_theme/images/origami/logo.png</thumb>
</item>
</news>

کافیست پس از لود کردن Jquery و پلاگین در Head سایت به شکل زیر  :

سپس با AJAX از نوع XML اطلاعات را از XML می خوانیم :

$.ajax({
url: 'xml.xml',
async: false,
dataType: 'xml',
success: function(xml) {
$(xml).XMLToJSON(jawsData = [], 'news item', {headline: 'title', href: 'url', description: 'moreInfo.info', thumb: 'moreInfo.image'});
}
})

همانطور که مشاهده کردید در قسمت success با دستور زیر اطلاعات XML را در آرایه ای به نام Json_array قرار دادیم :

$(xmldata).XMLToJSON(Json_array = [], remap = {headline:'title', description: 'moreInfo.info', thumb:'moreInfo.image'});

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

آرگومان دوم remap است و نشان می دهد که اطلاعات هر کدام از تگ های XML در چه آیتمی از Json باید قرار بگیرد ، در اینجا مثلا اطلاعات headline در XML را در آیتم title از JSON قرار دادیم همچنین تگ description  را در بچه ی moreInfo به نام info قرار دادیم ، image بچه ی دیگر moreInfo  می باشد که تگ tumb در آن ریخته شده است . (اطلاعات را در اینجا دسته بندی کردیم برخلاف XML که همه ی تگ ها را در کنار هم قرار داده بود .)

با اجرای این دستور یک آرایه JSON خواهیم داشت که جلوتر می توانیم با یک حلقه ی for می توانیم اطلاعات آن را بازخوانی کنیم :

$(function() {
for(var i=0;i<jawsData.length;i++){
$("#contain").append(jawsData[i].title+"<br>");
$("#contain").append(jawsData[i].url+"<br>");
$("#contain").append(jawsData[i].moreInfo.info+"<br>");
$("#contain").append(jawsData[i].moreInfo.image+"<hr>");

}

});

به این صورت اطلاعات در المان HTML با آیدی Contain چاپ خواهد شد .

دمو              دانلود سورس 

(فایل xml_to_json.js  پلاگین می باشد که در فایل زیپ قرار داده شده است.)

نوشته های مرتبط

• منوی درختی از اطلاعات XML
• شمارگر دایره ای
• ثابت نگه داشتن المانی در حین اسکرول
• Filepicker آپلود از همه جا
• مدیریت فایل در هر جایی از سایت برای کاربران

مثلا فرض کنید یک اسلایدشو می خواهید در صفحه ایجاد کنید که با کشیدن drag کردن روی عکسها ، تعویض عکس رخ دهد ، یا با چرخاندن انگشتها ، عکس هم بچرخد یا رنگ عوض شود یا متنها حرکت کنند و  …

Hammer.js یک کلاس javascript است که این کار را انجام می دهد ، کافیست یک object برای المان html ای که می خواهید توابع را برای آن معرفی کنید تعریف کنید . (OOP)  البته پلاگین Jquery هم برای آن وجود دارد .

با جاواسکریپت (بدون Jquery)

1- ابتدا سورس کلاس را لود کنید :

<script src="http://eightmedia.github.com/hammer.js/hammer.js"></script>

2- با این دستور یک object برای آیدی container بسازید

var hammer = new Hammer(document.getElementById("container"));

3- سپس بر روی شیئ ساخته شده میتوانید event های زیر را با توابع اجرایی خاص ، تعریف کنید .

hammer.ondragstart = function(ev) { };
hammer.ondrag = function(ev) { };
hammer.ondragend = function(ev) { };

hammer.ontap = function(ev) { };
hammer.ondoubletap = function(ev) { };
hammer.onhold = function(ev) { };

hammer.ontransformstart = function(ev) { };
hammer.ontransform = function(ev) { };
hammer.ontransformend = function(ev) { };

با استفاده از JQuery

1- ابتدا لود پلاگین :

<script src="http://eightmedia.github.com/hammer.js/jquery.hammer.js"></script>

2- تعریف توابع برای event ها :

$("#element")
.hammer({
// options...
})
.bind("tap", function(ev) {
console.log(ev);
});

 

سورس این کلاس و پلاگین را از سایت سازنده  دریافت کنید ، همچنین برای مشاهده مستندات آن به صفحه ی github  آن مراجعه کنید .

نوشته های مرتبط

• استفاده از Jquery در کامپوننت نویسی جوملا
• اجرای عملیات بعد از نگه داشتن چند ثانیه ای موس با Jquery
• شمارگر دایره ای
• Filepicker آپلود از همه جا
• پر کردن فیلدهای فرم با Jquery و JSON

پلاگین jQuery NailThumb  عکس هایی را که class خاصی به آنها داده اید را بطور خودکار تحت تاثیر قرار می دهد ، اصلا لازم نیست برنامه خاصی بنویسید ، در زیر یک نمونه استفاده از آن را که در سایت سازنده قرار داده شده شرح می دهم :

۱- ابتدا کتابخانه Jquery و فایل JS پلاگین و فایل CSS پلاگین را در Head صفحه ی خود معرفی کنید تا لود شود .

 <script type="text/javascript" src="path/to/jquery.js"></script> 

<script type="text/javascript" src="path/to/jquery.nailthumb.1.0.js"></script>

 <link href="path/to/jquery.nailthumb.1.0.css" type="text/css" rel="stylesheet" />

2- سپس می بایست استایل های دلخواه خود را به کلاسی که بعدا به عکس ها می دهید بصورت زیر بدهید :

<style type="text/css" media="screen">

.square-thumb {
width: 150px;
height: 150px;
}
</style>

 

3- حالا در body یک سری div با کلاسی که در بالا option ها را به آن داده اید می سازید و عکس ها را داخل آن ها قرار می دهید .

<div class="nailthumb-container square-thumb">
<img src="path/to/image.png" />
</div>
<div class="nailthumb-container square-thumb">
<img src="path/to/image.png" />
</div>
<div class="nailthumb-container square-thumb">
<img src="path/to/image.png" />
</div>

4- در آخر صفحه هم که همه ی المان های درگیر معرفی شده اند وقت آن رسیده پلاگین را برای کلاسی که به همه ی div های عکسها داده ایم صدا بزنیم .

بهتر است مثل حالتی که در اینجا معرفی کردیم از دو کلاس برای div عکسها استفاده کنیم . چون ممکن است بعضی از عکس ها را با option های مختلفی  بخواهید تحت تاثیر قرار دهید ، مثلا ۲ ۳ تای اول را یک اندازه و بقیه را یه اندازه دیگر ، اما در آخر پلاگین را برای همه صدا می زنید ، مثلا در اینجا کلاس option دهی square-thumb و کلاس صدا زدن پلاگین nailthumb-container می باشد . که nailthumb-container برای همه ی عکس ها یکی خواهد بود اما ممکن است غیر از square-thumb هم کلاسی برای option های دیگر داشته باشیم .

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.nailthumb-container').nailthumb();
});
</script>

در آخر کل سورس html به این شکل زیر در می آید :

<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/jquery.nailthumb.1.0.js"></script>
<link href="path/to/jquery.nailthumb.1.0.css" type="text/css" rel="stylesheet" />
<style type="text/css" media="screen">
.square-thumb {
width: 150px;
height: 150px;
}
</style>
...
<div>
<img src="path/to/image.png" />
</div>
<div>
<img src="path/to/image.png" />
</div>
<div>
<img src="path/to/image.png" />
</div>
...
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.nailthumb-container').nailthumb();
});
</script>

دمو ها و مثال های مختلف را در سایت سازنده  می توانید مشاهده کنید ، اگر با دانلود کردن از سایت sourceforge  مشکل داشتید از این لینک کتابخانه ها را دریافت کنید .

نوشته های مرتبط

• شمارگر دایره ای
• ثابت نگه داشتن المانی در حین اسکرول
• نمایش اطلاع یا اخطار روی صفحه با Jquery
• استفاده از پلاگین نظر سنجی AJAX
• Filepicker آپلود از همه جا

پارامترهای پلاگین در داخل خود پلاگین :

$param = $this->params->get('paramName', 'defaultValue');

پارامترهای پلاگین در خارج از پلاگین :

$plugin = &JPluginHelper::getPlugin('exampleType', 'example');
 $pluginParams = new JParameter($plugin->params);
$param = $pluginParams->get('paramName', 'defaultValue');

پارامترهای ماژول در داخل ماژول :

$param = $params->get('paramName', 'defaultValue');

پارامترهای ماژول در خارج از  ماژول :

$module = &JModuleHelper::getModule('example');

$moduleParams = new JParameter($module->params);

$param = $moduleParams->get('paramName', 'defaultValue');

پارامترهای کامپوننت در داخل خود کامپوننت :

$componentParams = &JComponentHelper::getParams('com_example');

$param = $componentParams->get('paramName', 'defaultValue');

پارامترهای کامپوننت خارج از کامپوننت :

$componentParams = &JComponentHelper::getParams('com_example');
$param = $componentParams->get('paramName', 'defaultValue');

پارامترهای قالب در داخل خود قالب :

$param = $this->params->get('paramName');

پارامترهای قالب در خارج از قالب :

jimport('joomla.filesystem.file');
$mainframe = &JFactory::getApplication();
$params = $mainframe->getParams(JFile::read(JURI::root() .'/templates/template_name/params.ini'));
$param = $params->get('paramName', 'defaultValue');

دریافت پارامترهای قالب از داخل یک فایل خاص include شده در خارج از فریم ورک جوملا :

// Get params.ini relative to the current file location (use your own relative path here)
$paramsFile = dirname(__FILE__) . '/../../params.ini';

// Only continue if the file exists
if(file_exists($paramsFile)) {
    // Get contents from params.ini file
    $iniString = file_get_contents($paramsFile);

    // Escape double quotes in values and then double-quote all values (because Joomla doesn't do that for us..)
    $iniQuoted = preg_replace('/=(.*)\\n/', "=\"$1\"\n", addcslashes($iniString, '"'));

    // Parse the ini string to an associative array
    $iniParsed = parse_ini_string($iniQuoted);
} else {
    $iniParsed = '';
}

// Set params to obtained values or empty array
$params = (!empty($iniParsed)) ? $iniParsed : array();

// Get param value from array
$param = $params['paramName'];

نوشته های مرتبط

• 3 کتاب برای آموزش گسترش افزونه های جوملا با PHP برای دانلود
• امنیت در برنامه نویسی کامپوننت تحت جوملا
• گرفتن log از فعالیت مدیران بر روی یک کامپوننت خاص از جوملا
• استفاده از Jquery در کامپوننت نویسی جوملا

۱- امنیت در اسم فایلها :

در صورتی که فایلی را از کاربر دریافت می کنید برای قرار گرفتن در لیست فایلها در سرور ، نباید کاراکتر غیر امن داشته باشد و می بایست بطور خودکار این کاراکتر ها حذف و جایگزین شوند برای استفاده از این دستور ابتدا کتابخانه را فراخوانی کنید :

jimport('joomla.filesystem.file');

سپس با دستور زیر اسم فایل امن تری تولید کنید :

$safeFilename = JFile::makeSafe($unsafeFilename);

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

برای چک کردن فرمت فایلها از دستور زیر استفاده نمایید ، گرچه برای بعضی فرمتها ممکن است درست کار نکند :

$safeFilename = JFile::makeSafe($unsafeFilename);

روش بهتر این است که ، اگر لازم است فقط یک فرمت خاص دریافت شود ، برای پاک کردن فرمت فایل از دستور زیر استفاده نمایید و در آخر بطور دستی فرمت را به انتهای اسم اضافه نمایید ، در این حالت مثلا اگر فرمت فایل jpeg یا JPG باشد یا با حروف بزرگ کوچک باشد مشکلی نخواهید داشت (ممکن است وب سرور بین JPG , jpg در هنگام نمایش فرق قائل شود و این باعث عدم کنترل روی استفاده از فایلها خواهد شد و مشکلاتی را پدید خواهد آورد .)

$filenameWithoutExtension = JFile::stripExt($filename);

$filename = JFile::stripExt($filename) . '.jpeg';

2- نام فولدرها و مسیرها :

ممکن است نام فولدر ها و مسیرها هم دارای کاراکترهای خاص باشند بهتر است با دستورات زیر آنها را تمییز کنیم :

jimport('joomla.filesystem.path');
jimport('joomla.filesystem.folder');

$cleanDirPath = JPath::clean($unsafeDirPath);
// make the directory path safe
$safeDirPath = JFolder::makeSafe($cleanDirPath);

فقط توجه کنید برای حالت path باید مسیر مطلق باشد نه نسبی .

3- دریافت و انتقال داده

در جوملا دستور JRequest اطلاعات را با متودهای GET , POST , COOKIE , SERVER ,  FIELS , REQUEST با روش زیر دریافت می کند .

$string = JRequest::getVar('nameOfVar', 'default', 'METHOD', 'TYPE', MASK);

nameOfVar : نام متغیر

DefualtValue : اگر موجود نبود این را به عنوان پیش فرض قرار می دهد .

Method : مثلا GET POST COOKIE و …

Type : نوع داده مثلا string , integer , float , word , …

MASK : برای باز کردن بعضی از سخت گیری های امنیتی استفاده می شود .

مثلا به این شکل :

$string = JRequest::getVar('nameOfVar', 'default', 'REQUEST','STRING', JREQUEST_ALLOWRAW);

بجای استفاده از GetVar و قرار دادن type می توانید مستقیما از GetWord , GetString , GetInt , GetFloat  استفاده نمایید و قسمت type را حذف کنید .

چون JRequest  در سختگیرانه ترین حالت ممکن داده ها را ویرایش میکند ، با استفاده از Mask می توانید این محدودیت ها را بردارید .

بجای کلمه mask در دستور از MASK های زیر استفاده نمایید و جایگزین آنها کنید .

۱- JREQUEST_ALLOWHTML

در حالت بدون mask تمامی تگ های HTML  حذف می شوند اما با استفاده از این MASK فقط قسمتهای خطرناک آنها حذف می شوند و بقیه باقی میمانند .

۲- JREQUEST_NOTRIM

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

۳ - JREQUEST_ALLOWRAW

این باعث می شود که هر دو حالت بالایی اتفاق بیفتد ، هم فاصله ها باقی بمانند هم تگ های HTML  و هم تگ های LINK , SCRIPT (در هنگام استفاده باید دقت شود . چون قسمتهای خطرناک تگها را باقی می گذارد .)

در صورتی که می خواهید از تو نوع استفاده نمایید با کاراکتر | فاصله قرار دهید :

JREQUEST_NOTRIM | JREQUEST_ALLOWHTML

مثلا برای دریافت داده ی THEME از حالت POST طوری که بتوان هم از فاصله در اول داده استفاده کرد و هم تگ HTML و  اگر داده ای نبود کلمه ی NO NAME برگردانده شود ،  دستور زیر را می نویسیم :

$string = JRequest::getVar(‘THEME ’, ‘NO NAME’, ‘POST ’,'STRING’, JREQUEST_NOTRIM | JREQUEST_ALLOWRAW);

4- امنیت در فرم ها :

برای اینکه اطلاعات از فرمهای دیگر به URL  ای که در Action فرم تعریف شده بطور دستی ارسال نشود از Token در زیر فرم ها استفاده می کنیم ، در این صورت فرم قبل از ارسال یک رشته رمز تولید می کند و در سرور نیز ذخیره می شود ، بعد از ارسال فرم چک می شود که Token ارسال شده است یا نه و اگر ارسال شده با مقداری که در سرور وجود  دارد مطابقت دارد یا نه . اگر چنین بود می توان اطمینان داشت که فرم از جایی که قرار است ارسال شود ، ارسال شده و نقش امنیتی بسیاری خواهد داشت ، مخصوصا در فرمهای مهم مثل پرداخت بانکی این روش بسیار به امنیت کممک خواهد کرد .

با دستور زیر قبل از اینکه تگ form را ببندید رشته ی پنهان token را به فرم برای ارسال می افزایید

echo JHTML::_('form.token');

در صفحه ای که فرم را به آن ارسال می کنید تا پردازش شود ،  با دستور زیر آن را چک می کنید :

if (!JRequest::checkToken('REQUEST')) {
// return 403 error
JError::raiseError(403, JText::_('ALERTNOAUTH'));
// belt and braces approach to guarantee the script stops
jexit('Invalid Token');
}

که اگر اشتباه بود خطا نشان دهد .

نوشته های مرتبط

• 3 کتاب برای آموزش گسترش افزونه های جوملا با PHP برای دانلود
• گرفتن log از فعالیت مدیران بر روی یک کامپوننت خاص از جوملا
• استفاده از Jquery در کامپوننت نویسی جوملا
• دریافت پارامترهای ماژول و پلاگین و قالب و کامپوننتهای جوملا از فایلهای params
• مشکل با اجازه آپلود فایلهای zip , rar (و فرمتهای تعریف نشده) در CI

۱-

نام کتاب :  Joomla 1.5 Development Cookbook

نام نویسنده : James Kennard

توضیحات : Solve real world Joomla! 1.5 development problems with over 130 simple but incredibly useful recipes

دانلود مستقیم

۲-

نام کتاب : Joomla-Component-Development-Backend

نام نویسنده : Prabhu Patil

توضیحات :

This document is about a Joomla component named “Students” that manage our Students
List, Add, Edit and Remove feature. This new version of Joomla (1.5) uses an approach
to component development based on the Model-View-Component design pattern.

دانلود مستقیم

3- 

نام کتاب : Learning_Joomla_Extension_Development

نام نویسنده : Jozeph_LeBlanc

توضیحات :

A practical tutorial for creating your first joomla 1.5 extension

create component module and plugin with PHP

دانلود مستقیم

نوشته های مرتبط

• دریافت پارامترهای ماژول و پلاگین و قالب و کامپوننتهای جوملا از فایلهای params
• گرفتن log از فعالیت مدیران بر روی یک کامپوننت خاص از جوملا
• امنیت در برنامه نویسی کامپوننت تحت جوملا
• استفاده از Jquery در کامپوننت نویسی جوملا
• اجرای عملیات بعد از نگه داشتن چند ثانیه ای موس با Jquery

۱- استفاده از کلاس Log جوملا :

اگر با نحوه ی کارکرد سیستم MVC آشنا باشید ارتباط با دیتابیس از طریق model های نوشته شده انجام می گیرد . چون تغییراتی که مد نظر ماست هنگام save کردن فرم کاربری می بایست log برداری شود پس باید تغییرات را در پوشه ی model که کار ذخیره کردن را انجام می دهد انجام دهیم .

مثلا فرض کنیم بخواهیم تغییرات در قسمت مدیریت کاربر را log برداری کنیم ، طوری که وقتی مدیری وارد تنظیمات کاربری یک کاربر شد و دگمه save را زد ذخیره شود که در چه زمانی و توسط چه کسی چه کاربری تغییر کرده ، یا اگر کاربر جدیدی ساخته شد ، ذخیره شود که چه کسی آن را ساخته است . به نظر خیلی جالب و مفید خواهد بود مخصوصا وقتی چندین سوپر مدیر سایت داشته باشد .

برای این کار در مسیر زیر فایل user.php را می بایست باز کرده و در انتهای تابع save کد های ذخیره ی log را اضافه کنید

administrator\components\com_users\models

کدهای log گیری :

// log saving by www.taraah.ir
jimport('joomla.error.log');

$log = JLog::getInstance('users_saves.php');

$entry = array(
'comment' => 'Activity done by ' . JFactory::getUser()->name ."-".JFactory::getUser()->username." effected userId : ".$data['id']
);

$log->addEntry($entry);
//ending Log
}

این کدها را در تابع save و قبل از return true قرار دهید تا با هربار Save کردن صفحه ی هر کاربر ، اجرا شود . در خط اول کتابخانه log فراخوانی شده . در خط دوم نام فایلی که باید لاگ ها ذخیره شوند معرفی می شود . در خط بعدی هم اطلاعاتی که باید ذخیره شود مشخص شده که نام مدیر و حساب کاربری و آیدی کاربری که تغییر کرده ثبت می شود . در آخر هم این اطلاعات ثبت می شود برای چک کردن کافیست بعد از چند بار save کردن و کاربر ساختن به پوشه ی log در روت بروید و users_saves.php را چک کنید .

همانطور که مشاهده می کنید در فایل مورد نظر هم آی پی و هم تاریخ و اطلاعاتی که درخواست داده بودید ذکر شده است ، با استفاده از این روش می توانید برای هر کامپوننت خاصی که می خواهید فعالیت مدیران را روی آنها مورد تحلیل قرار دهید ، استفاده نمایید .

پیشنهاد : برای اینکه این قابلیت به راحتی برای هر قسمت از مدیریت جوملا قابل استفاده باشد می توان یک پلاگین تحت مدیریت و یک event خاص هم برای ذخیره فرم ها تعریف کرد تا عملیات log گیری را براحتی بتوان انجام داد .

نوشته های مرتبط

• 3 کتاب برای آموزش گسترش افزونه های جوملا با PHP برای دانلود
• امنیت در برنامه نویسی کامپوننت تحت جوملا
• استفاده از Jquery در کامپوننت نویسی جوملا
• شمارگر دایره ای
• ساخت tumbnail از عکسها بصورت خودکار با jQuery NailThumb

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

این تابع را با دستور زیر صدا بزنید :

jQuery.noConflict();

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

در صورتی که قالب مورد استفاده احتیاج به Jquery دارد می بایست در تگ Head و در تمامی صفحات Jquery لود شود ، اما اگر یک کامپوننت خاص یا ماژول خاص فقط احتیاج به Jquery داشت ، نیازی نیست در همه ی صفحات لود شود و سرعت باز شدن سایت را کاهش دهد . در اینجا برای هر دو حالت شرح می دهیم .

لود کردن در قالب HTML

<script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="js/jquery-noconflict.js" type="text/javascript"></script>

خط اول که خود Jquery است و حط دوم یک فایل است که تابع noConflict را صدا زده است . می توانید از اینجا این فایل jquery-noconflict.js را دانلود کنید یا  بجای خط دوم از دستور زیر استفاده کنید :

<script type="text/javascript">

jQuery.noConflict();

</script>

استفاده از Jquery در کامپوننت یا ماژول خاص

اگر در کامپوننت یا ماژول از سیستم MVC استفاده شده باشد فایل View وظیفه نمایش HTML و JS دارد ، اطلاعات زیر را پوشه ی tmpl و در فایل defualt.php می بایست وارد کنیم . این فایل مخصوص وارد کردن html , css , jquery برای نمایش می باشد . اطلاعات زیر را در اولین خط ها قبل از به نمایش آوردن هر چیزی بین تگهای php قرار می دهیم .

$document = JFactory::getDocument();

$document->addScript(JURI::base() . 'media/com_explore/js/jquery-1.6.1.min.js');
$document->addScript(JURI::base() . 'media/com_explore/js/jquery-noconflict.js');

با استفاده از این دستور هر وقت که کاربر درگیر این کامپوننت یا ماژول شد و این صفحه را درخواست داد در Head صفحه به طور خودکار لود می شود .

هر فایل اسکریپت دیگری که مثلا حاوی توابع Jquery است را اگر خواستید بکار ببرید کافیست زیر این دو خط آنهم بطور مشابه لود کنید .

در صورتی که این کامپوننت یا ماژول را برای استفاده تجاری قرار است بنویسید و از آینده آن که در چه سایتی و چه قالبی قرار است استفاده شود خبر ندارید بهتر است قبل از صدا زدن Jquery و لود آن شرط قرار دهید که اگر قبلا Jquery در HEAD صفحه لود شد بود دوباره اضافه نشود .

برای این کار می بایست یک تابع معرفی شود که کلمه ی Jquery را در  Head سایت  جستجو کند . برای این کار در فایلی که به نام کامپوننت است و در پوشه کامپوننت قرار داد شده این تابع را که به نوعی Helper است با دستور زیر صدا می زنیم :

include JPATH_COMPONENT . '/helpers/jquery.php';

سپس فایل jquery.php را اینجا دانلود کرده و در پوشه ی Helper در کنار فایل کامپوننت قرار دهید . (همان مسیری که در بالا به کامپوننت معرفی کرده اید.)

اگر فایل jquery.php را باز کنید مشاهده می کنید که یک تابع بنام already_loaded معرفی شده است، حال که این تابع موجود در فایل را معرفی کردیم از آن در فایلی که می خواهیم Jquery را صدا بزنیم استفاده می کنیم و چک می کنیم که آیا Jqeury قبلا لود شده یا نه ، بجای معرفی تابع چک کننده می توانستیم مستقیما این عمل چک کردن را انجام دهیم .

if (!ExploreJQuery::already_loaded()) {
$document->addScript(JURI::base() . 'media/com_explore/js/jquery-1.6.1.min.js');
$document->addScript(JURI::base() . 'media/com_explore/js/jquery-noconflict.js');
}

نوشته های مرتبط

• ساخت صفحات وب کاملا در تعامل با دستگاههای multi touch
• 3 کتاب برای آموزش گسترش افزونه های جوملا با PHP برای دانلود
• اجرای عملیات بعد از نگه داشتن چند ثانیه ای موس با Jquery
• امنیت در برنامه نویسی کامپوننت تحت جوملا
• گرفتن log از فعالیت مدیران بر روی یک کامپوننت خاص از جوملا

برای روشن شدن یک مثال می زنم :

window.onload=initAll;
var x;
function initAll(){
x=5;
f(x);
document.getElementById("h1").innerHTML=x;

}
function f(x){
x +=4;
return x;
}

در این مثال ابتدا متغیر x را بصورت global معرفی کردیم تا به هنگام تغییر در توابع مقدارش هم تغییر کند . سپس در تابع اولی iniAll پس از مقدار دادن به آن تابع f را صدا می زنیم .  تابع f تابع دومی است که تغییرات را روی x اعمال می کند ، اما در خروجی که x را روی صفحه نشان می دهیم ، مقدارش همان ۵ باقی مانده است و به علاوه ی ۴ نشده است . این بدین خاطر است که هنگام ارسال متغیر عددی یک کپی از آن ارسال می شود فقط برای استفاده ، (یک خیابان یک طرفه) نه برای تغییر و بازگشت ، یعنی ارجاع داده نمی شود که اگر این متغیر در تابعی دیگر تغییر کرد ، روی متغیر اولیه در کل تاثیر بگذارد ، این در حالتی اتفاق می افتد که اطلاعات موجود روی متغیر از نوع primary باشد ، مثلا عدد یک data اولیه و primary است  ، اما اگر این کار را با یک object یا array انجام دهیم جواب ۹ را دریافت می کنیم چون در object و array با ارجاع ارسال می شود و مثل یک خیابان ۲ طرفه هم برای استفاده و ارسال اطلاعات و هم دریافت اطلاعات استفاده می شود .

در مثال زیر با یک object این کار را انجام می دهیم و مقدار ۹ در خروجی  بر خلاف حالت پیش مشاهده می شود .

window.onload=initAll;
function initAll(){
y=new Object;
y.num=5;
g(y);
document.getElementById("h2").innerHTML=y.num;

}

function g(y){
y.num +=4;
return y;
}

تنها در صورتی مقدار متغیر variable قابل تغییر است که در تابع اولی خروجی تابع دوم را مستقیما به متغیر تخصیص دهیم جواب ۹ مشاهده خواهد شد :

function initAll(){
x=5;
x=f(x);
document.getElementById("h1").innerHTML=x;
}

همانطور که مشاهده می کنید با تخصیص خروجی f به x با دستور  x=f مقدار x را بطور مستقیم تغییر دادیم ، با این دستور حتی اگر متغیر بطور محلی هم تعریف شده باشد جواب ۹ را دریافت خواهید کرد .

نوشته های مرتبط

• ساخت صفحات وب کاملا در تعامل با دستگاههای multi touch
• استفاده از Jquery در کامپوننت نویسی جوملا
• اجرای عملیات بعد از نگه داشتن چند ثانیه ای موس با Jquery
• کار با فرمت زمان و تاریخ در جاواسکریپت
• شمارگر دایره ای

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

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

ویندوز بصورت گرافیکی ساخت این نوع اتصال را در مرکز اتصالات network and sharing center ندارد  و می بایست با چند کد ساده در CMD این اتصال را بسازید .

ابتدا CMD  را باز کرده سپس کد زیر را در آن کپی کنید :

netsh wlan set hostednetwork mode=allow ssid=taraah.ir key=1234567890

که در آن بجای taraah.ir که اسم ssid می باشد یک نام دلخواه و بجای ۱۲۳۴۵۶۷۸۹۰ که کلید واژه می باشد هم یک کلمه ۱۰ رقمی وارد کنید .

در صورتی که پس از اینتر پیغام زیر را مشاهده کردید اتصال ساخته شده است .

سپس اینترنت کابلی خود را روی wireless اشتراک گذاری کنید ، برای این کار در network and sharing center روی اتصال اینترنت بوجود آمده کلیک کنید و سپس properties را زده و در برگه sharing تیک گزینه اول را زده و اینترنت را برای wireless به اشتراک بگذارید .

پس از مطمئن شدن از اینکه وایرلس روشن است با دستور زیر می توانید اتصال ایجاد شده را شروع کرده و کانکت شوید .

netsh wlan start hostednetwork

در صورتی که internet access روی اتصال ساخته شده در آیکون موجود در tray سمت راست  taskbar را مشاهده کردید می توانید با گوشی اندرویدی خود به وایرلس ساخته شده متصل شوید . نام کانکشن و کلمه عبور همان هایی خواهند بود که در CMD وارد کردید ، مثلا در اینجا taraah.ir , 1234567890

نوشته های مرتبط

• No Related Post

دمو      دانلود    سایت سازنده

این پلاگین با ورزن های قدیمی Jquery مثل ۱٫۳٫۲ هم کار می کند .

طرز استفاده :

ابتدا Jquery و پلاگین را در ابتدای صفحه لود نمایید .

<script src="jquery.min.js" ></script>
<script src="mousestop.js" ></script>

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

$("#container").mousestop(function, [options]);

در اینجا برای آیدی Container مثلا این تابع را صدا می زنیم که با حرکت موس روی این المان function اجرا شود ، همچنین می توانید از options برای گزینه های دیگر مثل خارج شدن موس و … استفاده کنید . مثلا نمونه کد زیر را که مربوط به دمو ساخته شده است را مشاهده کنید .

$("#mouse").mousestop(function(){
$("#mouse").css("background","green");
$("#titr").text("حالا موس را خارج کنید.");

}, {timeToStop: 4000, onMouseout: function(e){
$("#mouse").css("background","blue");
$("#titr").text("حالا می توانید دوباره ۳ ثانیه موس را روی مستطیل نگه دارید");
},onStopMove: function(e){
}},{delayToStop: 300});

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

یا از کاربر بخواهید برای فعال شدن دگمه submit فرم موس را مقداری یک جا نگه دارد .  (استفاده به عنوان آنتی اسپم) و خیلی کاربردهای دیگر که مربوط به تعامل با کاربر است .

نوشته های مرتبط

• شمارگر دایره ای
• ساخت صفحات وب کاملا در تعامل با دستگاههای multi touch
• استفاده از Jquery در کامپوننت نویسی جوملا
• 3 کتاب برای آموزش گسترش افزونه های جوملا با PHP برای دانلود
• Filepicker آپلود از همه جا