أنا لم أستطع مساعدة نفسي في الكتابة عن هذا البرنامج المساعد. انها واحدة من الأشياء الأكثر إبداعا رأيت المصنوع من مسج. مثل اسم يقول لك، قبل، وبعد، يمكنك رائحة بعض الإجراءات، أليس كذلك؟ نلقي نظرة على الصورة هنا:

البرنامج المساعد يسمح لك بإظهار صورتين من الشيء نفسه في أوقات مختلفة تظهر بعض الاختلافات. بالطبع يمكننا أن نفهم الاختلافات عندما يتم عرض الصورتين جنبا الى جنب ولكن بتركيب من جهة أخرى وجود شريط التمرير إلى الشريحة منهم وانظر الفرق هو ببساطة رهيبة وهذا ما نسميه الإبداع. سلسلة من التجريبي هو هنا http://www.catchmyfame.com/jquery/demo/8/ . وعلاوة على ذلك المنزلق على نحو سلس وعند النقر على أي جزء من الصورة، والمنزلق يأتي إلى المؤشر نحو سلس - رائعا للغاية.

الرجل في http://www.catchmyfame.com قام بعمل جميل حقا. كنا نتوقع شريط التمرير العمودي إذا كان ذلك ممكنا من الإصدار التالي من هذا البرنامج المساعد. والمتعة معها.

لقد كنت دائما مروحة كبيرة من مسج الشبكة jQGrid البرنامج المساعد. فإنه يمكن التعامل مع المهام المعقدة جدا ومتطورة. ولكن لم أكن أحب واجهة المستخدم كان من قبل. واضطررت الى تعديل المغلق على أن تكون قادرة على تقديمها للعملاء. أود أيضا أن استخدام flexigrid لأبسط المهام. فإنه من السهل جدا للعمل مع. ولكن أيا منها كانت أقرب مكان لهزيمة جاك سلوكام EXT JS الشبكة. كان تحويلة ثقيلة بالنسبة لي كما كنت تعلم منهم وجدت في نهاية المطاف أن التطبيقات الخاصة بي لا تتطلب مشاعر سطح المكتب كما extjs صندوق المقدمة. ويجري مروحة كبيرة من مسج، أردت دائما أن يكون البرنامج المساعد الشبكة التي تعمل على مقربة من شبكة extjs صندوق. الآن ننظر إلى هذا.

أوسم، أليس كذلك؟ نعم، jqGrid في trirand هو مدعوم الآن من قبل واجهة المستخدم مسج. انها نظيفة جدا وسريع الآن. يمكنك تخصيص موضوع من موقع واجهة المستخدم مسج كذلك. لا مزيد من المحادثات الآن، مجرد أكل هنا http://www.trirand.com/jqgrid35/jqgrid.html

حتى انها لا وميض أنه بعد كل شيء للقيام بكل magics! لقد رأينا ومازال رؤية فلاش صانعا عجائب وmagics. كان واحدا من الأشياء الرائعة التي تم تطويرها pageflip. رأيت أن الأولى عندما كنت ألعب مع فلاش في الفترة 2002-2003 واعتقد في flashkit وactionscripts.org. يمكنك أن ترى نسخة برو جيدة جدا من شيء من هذا القبيل هنا . ولكن بالنسبة لنا، الذين يريدون معظم الأمور في مسج - وأخيرا بديل لتلك الصفحة شيء الوجه. انها ليست بديلا كاملا من فلاش ولكن ليس سيئا للالحد الأدنى من الصفحة استخدام تأثير الوجه.

هذه هي الطريقة التي يبدو مع البرنامج المساعد دعا jFlip كتبها ريناتو نوع الملف في http://www.jquery.info/scripts/jFlip/demo.html

وتجريبية على أن صفحات ديه مختلف الاجهزة مع بعض الخيارات. وأنا خلقت واحدة مع بعض من سيارات حلمي هنا

آمل أن تكونوا مثل هذه المبادرة من قبل ريناتو.

هذه هي وظيفة قصيرة جدا من الطريقة التي يمكننا بسهولة إنشاء قائمة التنقل المتحركة مع مسج دون أي المساعد. يجب أن يكون رأيت القوائم الملاحة الأفقي أو veritical يتمدد وينكمش حجمه على التمديد. قبل وصول هذه الإطار جافا سكريبت، كان علينا أن نفعل الكثير جدا من التعليمات البرمجية للحصول على الامور. لماذا؟ من الغباء التعامل عبر متصفح. أنا لا أريد البدء من جديد في IE.

طيب، هنا الشيء. نحن ببساطة باستخدام قائمة غير مرتبة لجعل القائمة الأفقية التي يتمدد وينكمش. رمز بسيط القتلى. دعونا ننظر إلى العلامات الأولى.

  <div id="navcontainer">
 id="navlist"> <ul
	 <li> <a href="http://www.google.com"> جوجل </ A> </ لى>
	 <li> <a href="http://www.yahoo.com"> ياهو </ A> </ لى>
	 <li> <a href="http://www.msn.com"> MSN </ A> </ لى>
	 <li> <a href="http://www.lycos.com"> ايكوس </ A> </ لى>
	 <li> <a href="http://www.baidu.com"> بايدو </ A> </ لى>
 </ UL>
 </ div> 

لذلك لدينا بعض عناصر القائمة هناك. لذلك يجعلها تبدو مثل القائمة الأفقية كنا بحاجة الى بعض المغلق الذي يبدو مثل هذا

  * {
 arial , helvetica , sans-serif ; الخط بين أفراد الأسرة: Arial، هلفتيكا، بلا الرقيق؛
 }
 # navcontainer UL
 {
 0 ; الحشو اليسار: 0؛
 0 ; هامش اليسار: 0؛
 #222 ; لون الخلفية: # 222؛
 White ; اللون: أبيض؛
 left ; تعويم: غادر؛
 100% ; العرض: 100٪؛
 13px ; حجم الخط: 13px؛
 uppercase ; تحويل النص: الكبيرة؛
 bold ; الخط الوزن: جريئة؛
 }

 display : inline ; } # navcontainer UL لى {عرض: مضمنة؛}

 # navcontainer UL لى
 {
 0.7em 1.8em ; الحشو: 0.7em 1.8em؛
 #222 ; لون الخلفية: # 222؛
 White ; اللون: أبيض؛
 none ; النص الديكور: لا شيء؛
 left ; تعويم: غادر؛
 100px ; العرض: 100px؛
 1px solid #fff ; الحدود اليمين: 1px الصلبة # الاتحاد الفرنسي؛
 } 

والجزء الأخير .. جعلها الرقص على الفأرة. بسيط جدا مع وظيفة الأرواح. مجرد زوجين من هذه الأسطر أدناه سوف تفعل خدعة. لإلقاء نظرة.

	 ( ) { $ ( "#navlist $ (وظيفة () {$ ("# navlist 

هذا كل شيء! انظر في العمل

هل أنت بالملل مع عدد كبير جدا من يغتبوإكسس، thickboxes، تراكب النافذة؟ هل تريد معرض مضمنة الشيء كيندا؟ قد يكون لديك. لقد سمعت من بعض العملاء (عملاء القديمة) أنهم لا يحبون هذا انقطاع التيار الكهربائي عندما يغتبوإكسس، thickboxes. ذلك ما يجب القيام به بعد ذلك؟ شيء واحد، وعندما يو التفكير في شيء، في محاولة أولى جيدة، في 80٪ من الحالات ستجد الحل ان هنالك شخص ما حققت بالفعل. انها ليست قرن نيوتن، انها القرن 21. الكثير من الناس بعد أشياء كثيرة. ورجل ألماني يدعى كريستوف Schüßler يأتي لإنقاذ لنا من يغتبوإكسس العاديين. انه دعا مسج بوب.

أنا لا أريد أن جعل القصة أطول. فقط ترى أنه في العمل . وأنا متأكد من أنك سوف تخطط لاستخدام هذا البرنامج المساعد في بعض المشاريع الخاصة بك المقبل.

لذلك AJAX AJAX وAJAX، وهذا ما نقوم به على نطاق واسع في هذه الأيام. أنه يوفر الوقت، ويضيف ديناميات ويمنحك شعورا من استخدام تطبيق نوع من البرمجيات يشعر. كنت هناك طرق عديدة لاستخدام AJAX مع العديد من المكتبات. ولكن كما ترون هذا الموقع هي لمسج، ونحن سوف ننظر في بعض الأعراف AJAX المتقدمة الأساسية أو ربما.

ماذا نحتاج؟

مكتبة مسج (طبعا)
وهناك سيناريو PHP صغيرة

دعونا بدأ يتحدث. في مسج، وهناك أساسا 6 أنواع من طريقة للقيام بعمليات AJAX. وهذه هي

1. $. اياكس (خيارات)
2. $. الحصول على (URL، بيانات، رد)
3. $. getJSON (URL، بيانات، رد)
4. $. getScript (URL، رد)
5. الحمل (URL، والبيانات، رد)
6. $. آخر (URL، بيانات، رد،

وبصرف النظر عن الرقم 1، واستخدام جميع الأساليب الأخرى $. اياكس داخليا. وهذا يعني $. اياكس () هي وظيفة والدتنا لعمليات AJAX مسج. دعونا ننظر في كيفية $. اياكس () يبدو وكأنه

  $. اياكس ({
     , نوع: "POST"،
     , URL: "some.php"،
     , البيانات: "اسم = بيتر وموقع = NY"،
     ( msg ) { نجاح: وظيفة (MSG) {
         + msg ) ; تنبيه ("استجابة الملقم" + MSG)؛
     }
 })؛ 

وهذا إلى حد ما ذلك. المعلمة نوع يأخذ "GET" أو "POST" مما يعني أنه يمكنك إرسال طلب الحصول AJAX كما ظيفة أو الحصول على (فما استقاموا لكم فاستقيموا يفضلون وظيفة دائما). بقية المعلمات هي جميلة النفس التفسيرية إذا كنت نلقي نظرة على الرمز مرة أخرى.

الآن ونحن في طريقنا لجعل البرنامج النصي AJAX الصغيرة التي يقرأ وصلة من الكلمات الارتباط التشعبي (<A>) ويحمل المجلس على الطلب على بعض العناصر DIV في الوثيقة.

أولا نحن نلقي HTML عادية من الوثيقة PHP والتي سوف تبدو هذه

  <DOCTYPE HTML PUBLIC! "- / / W3C / / DTD XHTML 1.0 الصارم / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
 <HEAD>
	 <TITLE> اياكس اختبار الارتباط </ عنوان>
	 <meta http-equiv="content-type" content="text/html؛ charset=iso-8859-1" />
	 <script type="text/javascript" src="jquery-1.2.6.min.js"> </ SCRIPT>	
 </ HEAD>
 <BODY>
 </ BODY> </ HTML> 

الآن دعونا نضيف بعض الروابط لهذه الوثيقة. للحصول على نوع من نظرة القائمة أفضل سنستخدم UL> LI وينك. والتي تبدو وكأنها هذا

  <ul id="nav">
	 <li> <a class="ajax_link" rel="div1" href="response.php؟user=john"> تحميل في الدرجة 1 </ A> </ لى>
	 <li> <a class="ajax_link" rel="div2" href="response.php؟user=nash"> تحميل في الدرجة 2 </ A> </ لى>
	 <li> <a class="ajax_link" rel="div3" href="response.php؟user=stella"> تحميل في الدرجة 3 </ A> </ لى>
	 <li> <a class="ajax_link" rel="div4" href="response.php؟user=jason"> تحميل في الدرجة 4 </ A> </ لى>
 </ UL> 

كما ترون وضعنا الروابط في قائمة العناصر داخل كائن قائمة غير مرتبة. نلقي نظرة فاحصة على خصائص علامة <a> لل. لدينا أ href، والطبقة ويختلط السمة التي تبدو شيئا مختلفا من وصلة عادية. إذا كنت ترى، لأننا قدمنا ​​لليختلط السمة إلى بعض الأسماء DIV وهي div1، div2 .. هلم جرا. هذا يعني أننا نريد استجابة أ href ليتم تحميلها في تلك DIVS. كيف نفعل ذلك؟ دعونا نضيف تلك DIVS الأول

  <SPAN> DIV -1 </ SPAN>
 <div id="div1" class="content_loader"> </ div>
 <SPAN> DIV -2 </ SPAN>
 <div id="div2" class="content_loader"> </ div>
 <SPAN> DIV -3 </ SPAN>
 <div id="div3" class="content_loader"> </ div>
 <SPAN> DIV -4 </ SPAN>
 <div id="div4" class="content_loader"> </ div> 

والجزء الحقيقي الآن - لدينا نظرا للروابط فئة "ajax_link". سنقوم فقط إضافة حيوي تطبيقات اياكس فقط روابط وجود اسم فئة تسمى "ajax_link". الجحيم، ونحن لا جميع الروابط من صفحة لديك تطبيقات اياكس، هل نحن؟

لذلك، على تحميل وثيقة كنا نفعل هذا.

  . ready ( function ( ) { $ (وثيقة). استعداد (وظيفة () {
         ) . click ( function ( ) { $ ("a.ajax_link"). انقر فوق (وظيفة () {
             this ) ; $ current_link = $ (هذا)؛
             $. اياكس ({
                 , نوع: "آخر"،
                 ( "href" ) , URL: $ current_link ATTR ("أ href")،
                 ( e ) { نجاح: وظيفة (ه) {
                     + $current_link. attr ( "rel" ) ) . html ( e ) ; . $ (. "#" + $ current_link ATTR ("يختلط")) HTML (ه)؛
                 }
             })؛
             ; عودة كاذبة؛
         })؛
     })؛ 

اسمحوا لي أن أشرح السيناريو قليلا. هذا الحدث هو حدث document.ready التي يتم تشغيلها في تحميل الصفحة. ثم نقوم بتعيين نوع من الرموز في الحدث انقر فوق الارتباطات الذين لديهم فئة "ajax_link". القيام بذلك $ current_link = $ (هذا)؛ يسمح أن يكون الكائن الرابط الحالية تكون متاحة ضمن الدالة رد الاتصال. وليس لدينا

$ ("#" + $ current_link.attr ("يختلط")). HTML (ه)

وهو ما يعني $ ("div_id") HTML (server_response) والتي وضعناها على المعلمة URL الخاص الدالة $ اياكس بشكل حيوي مع URL:. $ current_link.attr ("أ href"). حتى الآن كل تلك الوسائل "كل تلك الصلات الذين لديهم فئة" ajax_link "- إضافة معالج حدث النقر - بعد ذلك تنفيذ وطلب AJAX اتخاذ خيارات أ href poperty وتحميل استجابة إلى DIV الذي يطابق معرف" "الصفة rel لل لينك ". وعودة كاذبة يمنع العمل رابط مثل رابط العادي

أريد أن أراه إجراء؟ هنا يذهب.

ويمكنك تحميل المصدر كذلك.

في القسم التالي من هذا البرنامج التعليمي قليلا سنكون باستخدام نفس الشيء ولكن مع القليل من الراحة.

تطبيق طريقة أسهل

كل شيء يبقى نفسه تقريبا. سنقوم فقط تغيير أسلوب أياكس هنا. وذلك بدلا من كتابة كامل $. اياكس كتلة يمكننا تحقيق نفس الشيء مع التالية.

  . ready ( function ( ) { $ (وثيقة). استعداد (وظيفة () {
 ) . click ( function ( ) { $ ("a.ajax_link"). انقر فوق (وظيفة () {
 + $ ( this ) . attr ( "rel" ) ) . load ( $ ( this ) . attr ( "href" ) ) ; . $ (. "#" + $ (هذا) ATTR ("يختلط")) حمولة ($ (هذا) ATTR ("أ href"))؛
 ; عودة كاذبة؛
 })؛
 })؛ 

انها الكثير أقل تعقيدا الآن، أليس كذلك؟ الأسلوب تحميل تحميل محتوى اياكس ضمن العنصر انها تعلق. إذا $ ("# somediv_id"). الحمل ("mypage.php")، وأنها سوف محاولة تحميل المحتوى mypage.php 'ق في ذلك. بسيطة جدا، هاه؟ لكنني أقترح عليك أن تعتاد على الطريقة الرئيسية (كما هو موضح في الجزء الأول).

في ملف مضغوط هناك ملف آخر يسمى ajax2.php والذي يدل على هذا methos التي لديها نفس النتيجة.

لذلك، AJAX ليس من الصعب كما يبدو، أليس كذلك؟ عندما تصبح بطلاقة جدا مع عمليات AJAX، سوف تقوم بإنشاء magics.

شكرا لقراءة راجع للشغل.

مع تقدم DHTML، يمكننا أن نفعل الكثير من الأشياء مع طرفة فقط من العين. ونحن جميعا قد استخدمت تراكب نافذة أو يغتبوإكسس في نقطة معينة من الزمن في هذه الأيام. لكن في بعض الأحيان يصبح من الضروري لمنع جزء من الصفحة أو أي عنصر معين، مثلا DIV حتى أن الناس ليسوا قادرين على اللعب مع الصفحة الخاصة بك عندما كنت لا تريد لهم. مثل إذا كان شخص ما جعل تعليقا على مربع تعليق، كنت لا تريد الناس على النقر على تعليقات أخرى في حين شغل عنه. ماذا تفعل بعد ذلك؟ حسنا هناك حل مسج أنيق. كنت ببساطة منعهم أثناء تعليقه. ويمكن أن يكون هناك الكثير من الحالات من هذا القبيل عندما نريد لمنع صفحة كاملة أو عناصر معينة. يأتي مسج BlockUI لانقاذ.

وقدم في البداية لمنع صفحة كاملة مع رسالة ولكن الآن، فإنه يمكن منع عنصر صفحة أو حتى تظهر الهدير مثل الرسالة. تحقق من الأمثلة هنا . وثائق هو مبلغ لطيفة جدا ونزيهة من التعليمات البرمجية يتم إعطاء الأمثلة. استخدامه في التطبيق الخاص بك. إذا كان لديك أي مشاكل في استخدامه، وترك لي تعليق هنا.

تفعل صفحة محفظة مع فلاش على موقع الويب الخاص بك أصبح نوع من عفا عليها الزمن. في هذه الأيام مع آلات أسرع ومتصفح الجيل الجديد يمكن ركلة حقا بعض الحمار مع جافا سكريبت والمغلق. مسج لديه طريقة أنيق للغاية للتعامل مع بعض الآثار. جميع الحركات تنبع من طريقة قاعدة تسمى "الأرواح". فإنه ينعش، فتيات مراهقات خصائص العناصر DOM. لجعل قصة قصيرة طويلة نلقي نظرة على هذا.

لذا، كنت قد نقرت بالفعل ورأى الحق؟ طيب، إذا نظرتم الى رمز، انها بسيطة الى حد كبير.

  $ (وثيقة). استعداد (وظيفة () {
		 فار hover_in_easing = "easeOutExpo"؛
		 فار hover_out_easing = "easeOutBounce"؛
		 . $ (". info_container") تظهر ()؛
		 $ ("div.portfolio_div"). تحوم (وظيفة () {
			 . $ (هذه) العثور على ("info_container.") تحريك ({الأعلى: "0PX"}، {المدة: 400، وتخفيف: hover_in_easing})؛
		 }، وظيفة () {
			 . $ (هذه) العثور على ("info_container.") تحريك ({الأعلى: "100px"}، {المدة: 500، وتخفيف: hover_out_easing})؛
		 })؛
                 / / و100 بكسل هو حجم القناع
	 })؛ 

ويستخدم وظيفة الأرواح لتحريك القناع فوق الصورة التي يتم الاحتفاظ بها مخبأة من قبل المواقع نسبيا. ومع تخفيف المساعد، ونحن تحقيق بعض التأثير بارد من كذاب عندما كنت تحوم خارج من الصورة. يمكنك وضع أي HTML داخل عناصر DIV info_container طالما أنها لا تتجاوز الحدود. نظرة على الأنماط وستجد أنها gramatical جدا. يمكنك تخصيص أحجام عن طريق تعديل الطبقات شعبة.

تحميل المصدر

إلهام: http://dibusoft.com/portfolio

شهدت أي وقت مضى تلك التسميات التوضيحية شفافة على الصور؟ تعليق poping من من أسفل أو أعلى واصفا الصورة الفوتوغرافية؟ أنا متأكد من أن لديك. هناك الكثير من الكتابات من هذا القبيل. ويأتي هنا لدينا نسخة مسج المفضلة من ذلك.

يمكنك وضع عادي، النص، HTML أو أي شيء هناك. مجرد إلقاء نظرة على صفحة وطنهم المساعد وانها وصف لطيف جدا. ليس هناك حاجة إلى الحيل سيئة.

http://masterfidgeter.com/projects/captify/

جعل صفحات صورتك تبدو جيدة معها.

هذا الأسبوع - مارس 20،09 jQueryMagic يختار صندوق عرض الشرائح مسج واختيار من الاسبوع. لكم جميعا لقد سمعت الكثير من الضوء، thickbox، greyboxes ومختلفة تراكب النافذة. فإنه يحصل على نحو أفضل في أحدث الإصدارات المساعد. هذا واحد الصخور حقا. تخصيص بالكامل وسهلة الاستخدام. انها خفيفة الوزن ويبدو باردا. وعلاوة على ذلك يتم واحدة من حفنة سبيل المثال مع المكتبة.

صندوق عرض الشرائح

الذهاب إلى صفحة المشروع هنا .