ใส่ดาต้ากริท ด้วยจาวาสคริป Improve Tables With EditableGrid JS Library

ปรกติการแสดงผลแบบตารางและต้องการที่จะ ให้สามารถจัดการข้อมูลในตาราง
เราก็จะนึกถึงดาต้ากริดของ ดอทเน็ต หรือจะใช้ jquery แสดงผล ซึงอันที่จริงมันก็มีอีกหลายตัว
ที่ทำได้ แต่วันนี้ขอนำเสนอ EditableGrid  มาดูความสามารถกันเลยละกัน



Main features

    * Load grid from XML or attach to an existing HTML table
    * Simple to use and easy integration into existing web applications
    * Each column is typed (string, integer, double, boolean, url, email, date)
    * Edit cells with a suitable editor, according to the column type (eg. checkbox for boolean)
    * Possibility to declare a list of possible values for the cells of a column (statically or in Javascript)
    * Management of unit, precision and NaN values for numeric columns
    * Built-in validators for columns of type integer, double, url, email and date
    * Possibility to plug your own cell renderers, editors and validators
    * Sort columns accordingly to their types, by clicking on the column header
    * PHP binding: build your grid in PHP and let it generate the XML file
    * Filtering of the grid
    * Insert and remove rows
    * Open Flash Chart integration to render charts from the grid data (the chart can follow when editing data or sorting columns)
    * Callbacks for all events: load, edition, sorting, etc.

แค่นี่พอมัย


Requirements: No Requirements
Compatibility: All Major Browsers
Website: http://www.webismymind.be/editablegrid/

แสดงรูปภาพแบบไสลโดย Orbit: A Slick jQuery Image Slider Plugin

Orbit เป็น Jquery Plugin อีกตัวที่ทำการแสดง Slide ได้ ที่นำมาเสนอนี่ก็ถือว่าเป็นทางเลือก
อีกทางนึง การใช้งานก็แสนง่าย

1.ใส่ Code นี้ไว้ที่ส่วน head

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.orbit.min.js" type="text/javascript"></script>

เรียกใช้งานด้วย

<script type="text/javascript">
     $(window).load(function() {
         $('#featured').orbit();
     });
</script>

2.ใส่ css

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

3.ใส่รูป

<div id="featured"> 
     <img src="link.jpg" title="Link galliantly riding the majestic Epona across the hyrulian plains" alt="Link" />
     <img src="ezio.jpg"  alt="Ezio" />
     <img src="masterchief.jpg" title="Master Chief surveying Reach, home of his upcoming game"  alt="Master Chief" />
     <img src="marcusfenix.jpg"  alt="Marcus Fenix" />
</div> 

4.Option อื่น

$('#featured').orbit({          
     animation: 'fade', //fade, horizontal-slide, vertical-slide
     animationSpeed: 800, //how fast animations are
     advanceSpeed: 4000, //if timer advance is enabled, time between transitions 
     startClockOnMouseOut: true, //if timer should restart on MouseOut
     startClockOnMouseOutAfter: 3000, //how long after mouseout timer should start again
     directionalNav: true, //manual advancing directional navs
     captions: true, //if has a title, will be placed at bottom
     captionAnimationSpeed: 800, //how quickly to animate in caption on load and between captioned and uncaptioned photos
     timer: false //if the circular timer is wanted
});

Requirements: jQuery
Compatibility: All Major Browsers
Website: http://www.zurb.com/playground/jquery_image_slider_plugin

มาใช้ WordPress เป็น A Bug Tracker โดย Quality Control กันเหอะ

งงละซิ ไม่มีอะไรมาก ปรกตอเราจะใช้เจ้า WP เขียน Blog หรือ บทความกันอยู่แล้ว
หรือบางคนนำไปทำเว็บไซค์ตามที่ลูกค้าต้องการ แต่วันนี้ขอเสนอ Quality Control Theme
ซึ่งจะแปลงโฉมเจ้า WP ให้การเป็น Bug Tracker ดี่ๆนี่เอง


Requirements: WordPress, PHP & MySQL
Website: http://spencerfinnell.com/quality-control-theme/
Demo: http://spencerfinnell.com/lab/pt/quality/
Via: http://wefunction.com/2010/08/quality-control-theme/

ของฟรีก็มี Open Source WYSIWYG HTML Editor Using jQuery UI

บทความแรกขอนำเสนอ WYSIWYG ที่แจกฟรีครบทังตัว WYSIWYG และตัวจัดการไฟล์

ซึงบางเจ้าเค้าแจกฟรีแต่ตัว WYSIWYG  แต่ดันต้องมาเสียเงินซื้อ ตัวจัดการไฟล์ซะนิ

ซึงเจ้าตัวที่ว่าฟรีนี้ก็คือ elRTE นั้นเอง

เจ้าตัว WYSIWYG มันใช้เจ้า Jquery ตัวเก่งด้วยคงจะทำงานได้เร็วน่าดู

รายละเอียดจากหน้าเว็บ

Usage

    * Rich text editing, change its appearance and style

    * Insert and manage various HTML elements with formatting (images, tables, lists and etc.)

    * View and edit HTML-code

Features

    * Advanced work with CSS

          o Setting indentation (margins, paddings) for images and table cells (seperate for each direction)

          o Controlling border properties (width, style, color) with convenient dialogs

          o Writing element properties as CSS-style always when possible

    * Lightweight, fast and easy to integrate

    * Interface appearance is configured from one CSS file

    * No templates used

    * i18n. The editor can be easily localized into any language. Currently available in English (default), Russian, German and Ukrainian languages

    * Designed to work with elFinder file manager, but can also be used with any other

    * Flexible for extensions

Requirements

    * Modern browser. elRTE has been tested in Firefox 3.5+, Internet Explorer 7 & 8, Safari 4, Opera 10 and Chrome

License

elRTE is issued under a 3-clauses BSD license.

elRTE uses and comes with jQuery and jQuery-UI witch are issued under MIT and GPL licenses.

เข้าไปหามาใช้กันได้ที่ 

http://elrte.org/

และจัดารไฟล์พระเอกของเรามันชื่อว่า elFinder คุ้นๆมัย 555

ลองมาดูว่ามันทำอะไรได้มั่ง

Features

    * All general operations with files and folders on a remote server (copy, move, upload, create folder/file, rename, etc.)

    * Two types of view: list and icons

    * High performance of server and client parts

    * Multifile upload

    * Standart methods of file/group selection using mouse or keyboard

    * Context menu

    * "Hot keys" for most actions

    * Move/Copy files with Drag & Drop

    * Work with archives

    * Preview for most types of files

    * Edit text files and resize images

    * "Places" for your favorites

    * Calculate directory sizes

    * Background creation of thumbnails for image files

    * Easy to integrate with web editors (elRTE, CKEditor, TinyMCE)

    * Flexible configuration of access rights, upload file types, user interface and other

    * Extensibility

    * Simple client-server API based on JSON

Requirements

Client:

    * Modern browser. elFinder was tested in Firefox 3.5+, Internet Explorer 7 & 8, Safari 4, Opera 10 and Chrome

Server:

    * Connector, at the moment there are connectors for PHP and Python

    * Image preview and thumbnails creation requires:

          o PHP: mogrify utility or GD/Imagick module

          o Python: PIL library

License

elFinder is issued under a 3-clauses BSD license.

elFinder uses and comes with jQuery and jQuery-UI witch are issued under MIT and GPL licenses.

ดาวโหลดได้จากที่นี่ http://elrte.org/elfinder