WEB DEV TOOLs
วันอังคารที่ 14 กันยายน พ.ศ. 2553
ใส่ดาต้ากริท ด้วยจาวาสคริป Improve Tables With EditableGrid JS Library
AD
ปรกติการแสดงผลแบบตารางและต้องการที่จะ ให้สามารถจัดการข้อมูลในตาราง
เราก็จะนึกถึงดาต้ากริดของ ดอทเน็ต หรือจะใช้ 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
AD
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
วันจันทร์ที่ 13 กันยายน พ.ศ. 2553
มาใช้ WordPress เป็น A Bug Tracker โดย Quality Control กันเหอะ
AD
งงละซิ ไม่มีอะไรมาก ปรกตอเราจะใช้เจ้า 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/
หรือบางคนนำไปทำเว็บไซค์ตามที่ลูกค้าต้องการ แต่วันนี้ขอเสนอ 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
AD
ซึงบางเจ้าเค้าแจกฟรีแต่ตัว 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.
เข้าไปหามาใช้กันได้ที่
และจัดารไฟล์พระเอกของเรามันชื่อว่า 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
สมัครสมาชิก:
บทความ (Atom)