Get Adobe Flash player

Monthly Archives: December 2012

Top Ten jQuery Plugin

credit : http://webtopten.wordpress.com/2012/10/23/top-ten-useful-jquery-plugins/

Hey are you a web Developer or a Web Designer, if yes then this Jquery plugins can be useful to you.  Here is the list of top ten jquery plugins and api’s tointegrate your website. Checkout the list of Top 10 Jquery Websites.

  1. Turn.js

Turn.js a jquery plugin that will make your web page content looks like amagazine or a ebook. You can feel like you are reading original book on web. This Jquery plugin is also useful to online book sellers and also e-commerce store owners. You can also create a book shelf using this jquery plugin and put books on that shelf and click it and read it. It will be awesome experience.

magazine like website using jquery plugin

2.  Dynamic Grid Layout Jquery Plugin

Want to make your website look a like pinterest.com. Here is the solutionBlocksit.js. this plugin is also known as Dynamic grid layout jquery plugin. Blockit.js jquery plugin will reposition html elements using css absolute solution property and this jquery capable of calculate top and left positions for element based  on certain criteria.

Pinterest-jquery-plugin

3. Page scroller

Page Scroller jquery plugin used to create scroll path for content on web page. Jquery scroll path plugin uses canvas flavoured syntax to create arcs and lineson a web page. Here you can see a quick demo of it.

Scroll-text-jquery-plugin

4.  Percentage Loader

Hey want to make your progress bar more interactive then this jquery will help you to create beautiful progress bar.  You can also load multiple percentage loaders simultaneously. You can also use this percentage loader as a controllerlike in iphone. Here you can see the demo.

progress-bar-jquery-plugin

5.  Noty.js

Noty, A Jquery Plugin that is used to create alert, confirmation, error, warning, success and information type messages. Using this plugin you can createawesome alert boxes. It’s best feature is you can put this alert boxes on any direction of web browser window like you can put it to centre left, centre right, centre, top left, top centre etc. you can also customize text, animation, button and speed.

alert-boxes-jquery-plugin

6.  Ideal Forms

Bored with the old html elements validations? Want to create awesome jquery validations then you can try this Ideal form jquery plugin. You can validate textbox, radiobuttons, dropdownlists, checkboxes and file upload controls using this plugin. Ideal Forms are used to build and validate HTML  forms. You can checkout the demo here.

validate html elements using jquery

7.  Ajax Paypal Cart

Ajax Paypal cart a shopping cart developed using jquery and ajax. It’s main feature that it supports paypal integration.  This jquery plugin is very useful to developers who want to develop shopping carts. This plugin also providesthemes and it can be customizable using cascading stylesheets.

shopping-cart-jquery-plugin

8.  Flippy Effect

Want to filp the box on your web page this jquery plugin can be useful for that. Using This plugin you can flip any html element. You can also change it’s direction, speed of flip, depth. This Plugin is easy to integrate and cross browser compatible.

flippy-effect-jquery-plugin

9.  Reveal Modal Plugin

This plugin is used to Display the popup interactively. Don’t worry  this Jquery Plugin is Easy to Implement and also it is cross browser compatible. You can edit and change the css to make more beautiful modal popup. You can see the instruction on their website and attach it and make your site more beautiful.

modal-popup-jquery-plugin10.  FitText

Fit the Text on web page as per resolution of the screen. It only used for large texts that are uncomfortable with small screens. This Jquery plugin changes the font sizes as per the resolution of screen. So that you can see more mobile friendly, tablet friendly websites.

fittext-jquery-plugin

jQuery Validate

ไฟล์ index.html ใส่ฟอร์ม

ไฟล์ script validate

 

jQuery สร้าง Plugin function ใช้เอง

เอาไปใช้กับไฟล์ MyScript.js

เวลาพิมพ์โค้ดใน jQuery ถ้าอยากให้มันมี Inteligent ช่วยใช้ลากไฟล์มาวางในไฟล์ ที่ต้องการพิมพ์พอลากมาแล้วมันจะเป็น //ชื่อไฟล์ jQuery ที่เรียกใช้

jQuery Validation

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

 

ทำ Web Service รัน WCF + jQeury คือสามารถรันได้เลย

1) สร้าง Project ใหม่เป็น Web ASP.NET Empty หลังจากนั้น Add new item LINGQ to SQL Class แล้วลาก Table มาวาง

2) ทำการ Add new item -> WCF Service แล้วจะได้ไฟล์ service1.svc แก้โคดตามนี้

3) แก้ไขไฟล์ iService1.cs

4) แก้ไข Web.config ในส่วนของ <system.serviceModel>

6) ลองรันดู

7) สร้างไฟล์ทดสอบ 3 ไฟล์

 

 

 

ทำ WindowsService ให้รันออโต้บริการ Service

1) เริ่มแรกสร้างโปรเจ็คใหม่เป็น Windows Service Application (C#) และใส่โค้ดในหน้า Service1.cs

 2) Add new item LINQ to SQL Class

3) เปิด Server Explorer ลาก Table ใน Database มาวาง

3) ปรับ Installer Service

4) ทำการ Build แล้ว Coppy Code ในฟอเดอร Debug ไปไว้ที่ Drive C

5) ไปที่ปุ่ม Start->Visual Studio Tool->Command Prom จะพบกับหน้า DOS ให้พิมพ์

6) ไปเปิดดู Service Local แล้วคลิ้กขวาเลือก Start

7) เปิด Browser แล้วลองทดสอบการใช้งานตามภาพ

การทำ Web service ด้วย WCF + Restful + Json PART II

ต่อจากของเดิม http://kungtee.rmutp.ac.th/index.php/wcf-restful-json/

ต่อจากครั้งที่แล้วทำ table และปุ่ม

การ Insert Data ให้กลับไปแก้ WCF ในส่วนของ interface iService1 แล้วเพิ่มโค้ดลงไป

แก้ไข โค้ด

 

 

การทำ Web service ด้วย WCF + Restful + Json

WCF จะสามารถบริการ Web service ได้ทั้ง windows application กับ web application

1) open visual studio 2012

2) new project windows application form

3) add reference


4) code behide

5) สร้าง Service1 Method

6) ทดสอบสร้างปุ่ม button1 แล้วใส่ code

7) เปิด Browser พิมพ์ http://localhost:8000/hello จะเห็นค่าที่ส่งกลับมา

 หมายเหตุเพิ่มเติม เราสามารถใช้ WCF เพราะไวกว่าไม่ต้องรันใน IIS ก็ได้ ทำเป็น Service ของ Window ก็ได้

8) open server explorer สร้าง db

 9) add newitem ->linq ตั้งชื่อเดียวกับ db

10) ลาก database มาวางใน Linq ที่สร้าง

11) เขียนโค้ดเพื่อเรียกใช้

ตรง webinvoke ทำได้เฉพาะ WCF สามารถใส่ url แบบที่ return ค่าแบบกำหนดได้

12) RUN กดปุ่ม button แล้วเปิด browser พิมพ์ url http://localhost:8000/studentbyid/1

13) ทำให้ JSON สามารถบริการข้ามเครื่องได้คือไม่ได้ run ใน Localhost เรียกว่า JSONP เพิ่ม code

14) สร้างไฟล์เพื่อใช้ JQUERY สร้างไฟล์ 2 ไฟล์ ทดสอบก่อน

 

รันด้วย browser

15) สร้าง form แล้วให้แสดงค่าจาก webservice โดยกดปุ่มส่งค่า studentid ไป

ต่อที่ PART II สำหรับ update delete insert data ( http://kungtee.rmutp.ac.th/index.php/web-service-part-2/ )

Multi level accordion

December 2012
M T W T F S S
« Nov   Jan »
 12
3456789
10111213141516
17181920212223
24252627282930
31  

Recent Comments