Mê Công Nghê http://mecongnghe.com Học hỏi là chính Sun, 15 May 2011 13:13:06 +0000 en hourly 1 http://wordpress.org/?v=3.1.2 Silder hình ảnh sử dụng JQuery http://mecongnghe.com/2011/05/silder-hinh-anh-su-dung-jquery/ http://mecongnghe.com/2011/05/silder-hinh-anh-su-dung-jquery/#comments Sun, 15 May 2011 13:12:52 +0000 admin http://mecongnghe.com/?p=31
  • 40 Exceptional jQuery Interface Techniques and Tutorials With the advent of JavaScript/web application libraries and frameworks, it’s...
    • Related posts brought to you by Yet Another Related Posts Plugin.]]>     Image sliders are become increasingly popular within webpages over the last year or so, and with jQuery becoming ever more popular, more and more developers have been creating these amazing powerful, versatile and sleek galleries. Below you will the most powerful, the most creative and most versatile of jQuery plugins and tutorials built using jQuery.

    1] Jquery Easy Image / Content Slider

    Easy Slider (as I call this plugin) enables images or any content to slide horizontally or vertically on click. It is configurable with css alone. So, basically you link to plugin file, set the content up and style it with css.

    jquerygallerry15

    2] s3Slider jQuery plugin

    The s3Slider jQuery plugin is made by example of jd`s smooth slide show script. Nice slider with good example list.
    s3sliderfull

    3] Featured Content Slider Using jQuery UI

    Nice Featured content slider with thumbnail support. Also very easy to navigate between the slides.
    featured_content_slider

    4] Beautiful jquery Sliders

    Nice Image slider script with image numbers for navigation and small description.
    beatu

    5] GalleryView: A jQuery Content Gallery Plugin

    GalleryView aims to provide jQuery users with a flexible, attractive content gallery that is both easy to implement and a snap to customize.
    gallery_view

    6] GALLERIA

    Galleria is a javascript image gallery written in jQuery. It loads the images one by one from an unordered list and displays thumbnails when each image is loaded. It will create thumbnails for you if you choose so, scaled or unscaled, centered and cropped inside a fixed thumbnail box defined by CSS.
    galleria

    7] Start/Stop Slider

    Jquery slider with start and stop option.
    start_stop

    8] Circular Image Gallery

    Slide a list of images from right to left across the screen.
    When an image moves out of view on the left, it should get appended to the end of the list thus creating the illusion of a never ending or circular procession of images across the screen.
    circular

    8] Customizing jQuery innerfade plug-in

    Customizing jQuery innerfade plug-in is added control to manage the slide images like pause,play to the original jquery innerfade plugin

    jquery_innerfade_controll

    9] FullScreen Image-Gallery

    It’s a full screen image gallery that automatically scales the image with kept aspect ratio to fill the browser background.
    full_screen

    10] SupersizedGallery

    Nice SupersizedGallery is used to Resizes images to fill browser while maintaining image dimension ratio
    * Cycles Images/backgrounds via slideshow with transitions and preloading
    * Navigation controls allow for pause/play and forward/back .
    jquery-supersizedgallery

    11] ImageRotator

    An image rotator is one great way to display portfolio pieces, eCommerce product images, or even as an image gallery.
    jquery-imagerotator

    12] Galleriffic

    A jQuery plugin for rendering fast-performing photo galleries
    jquery-galleriffic

    13] ImagesSwitch

    easy-to-use, simple and fast plug-in to create effect when you switch between images.
    jquery-imageswitch

    14] ImageScroller

    Building an image scroller, making use of jQuery’s excellent animation features
    jquery-imagescroller

    Related posts:

    1. 40 Exceptional jQuery Interface Techniques and Tutorials With the advent of JavaScript/web application libraries and frameworks, it’s...

    Related posts brought to you by Yet Another Related Posts Plugin.

    ]]>     http://mecongnghe.com/2011/05/silder-hinh-anh-su-dung-jquery/feed/ 3     40 Exceptional jQuery Interface Techniques and Tutorials http://mecongnghe.com/2011/05/40-exceptional-jquery-interface-techniques-and-tutorials/ http://mecongnghe.com/2011/05/40-exceptional-jquery-interface-techniques-and-tutorials/#comments Sun, 15 May 2011 13:07:33 +0000 admin http://mecongnghe.com/?p=25 Yet Another Related Posts Plugin.]]> With the advent of JavaScript/web application libraries and frameworks, it’s become much easier to build interactive components for a site. For the folks that are unfamiliar with jQuery – it’s a popular, high-performance and compact JavaScript library/framework. jQuery will allow you to reduce the amount of code you have to write for dealing with browser quirks, memory leaks, and repetitive code by providing you with a set of useful and highly-optimized and thoroughly-tested functions and metho

    In this article, we explore the strengths of jQuery in letting web developers create impressive client-side-based user interface components. Whether you’re looking for a particular interface/interaction pattern built on Query (like module tabs or modal windows) or you simply want to learn the library by engaging in step-by-step tutorials – you should be able to find something here for you.



    Modal Windows

    1. How to create a stunning and smooth popup using jQuery

    How to create a stunning and smooth popup using jQuery tutorial screen shot.

    In this jQuery tutorial, you’ll discover a technique for creating a slick modal window that appears when the user clicks on the triggering element (in this case, form submit input, but you can easily modify it into other HTML elements like <a>). The tutorial will also show you how you can deal with keypress events so that you can incorporate keyboard shortcuts into your interface.

    Live Demo

    2. Simple jQuery Modal Window Tutorial

    Simple jQuery Modal Window Tutorial tutorial screen shot.

    This modal window tutorial uses a rel attribute to indicate whether a link opens a modal window using inline content. You’ll witness a few popular jQuery methods in action like the .click() and .css() methods.

    Live Demo

    3. Building modal panels with jQuery

    Building modal panels with jQuery tutorial screen shot.

    This jQuery tutorial discusses a method for creating a modal window that builds in graceful degradation in its design for users who don’t have JavaScript turned on.

    Live Demo

    Tool Tips

    4. Build a Better Tooltip with jQuery Awesomeness

    Build a Better Tooltip with jQuery Awesomeness tutorial screen shot.

    This tutorial will show you a method for replacing the built-in browser tooltips that appear on elements such as images and links with title attributes.

    Live Demo

    5. Smart Tooltips with jQuery

    Smart Tooltips with jQuery tutorial screen shot.s

    This tooltip technique will check whether a link has a title attribute or not, and if it doesn’t, it skips it title.

    Live Demo

    6. Coda Popup Bubbles

    Coda Popup Bubbles tutorial screen shots.

    This excellent jQuery tutorial shows you how to create slick popup bubbles that appear when hovering over the target object.

    Live Demo

    Module Tabs

    7. Create a Slide Tabbed Box using jQuery

    Create a Slide Tabbed Box using jQuery screen shot.

    This simple tutorial will show you how to create a set a module tab interface that slides content left and right as you click on the tabs.

    Live Demo

    8. Create a Tabbed Interface Using jQuery

    Create a Tabbed Interface Using jQuery screen shot.

    This very detailed step-by-step tutorial will show you how to create a tabbed interface using jQuery.

    Live Demo

    9. jQuery Tabbed Interface

    jQuery Tabbed Interface screen shot.

    This excellent tutorial is yet another variation to the popular tabbed interface.

    Live Demo

    10. jQuery Tabs

    jQuery Tabs screen shot.

    This tutorial is in screencast format and is aimed at beginners and designers.

    Live Demo

    Showcasing Images

    11. Create Sliding Image Caption with jQuery

    Create Sliding Image Caption with jQuery screen shot.

    This image gallery tutorial shows you an interesting interaction technique for having captions that slide up to reveal more information about a particular image when the user hovers over it.

    Live Demo

    12. Image Cross Fade Transition

    Image Cross Fade Transition screen shot.

    This tutorial will show you how to fade another image in, superimposing onto the current image when the user hovers it. It can be a great way to display more information about a particular image.

    Live Demo

    13. A Basic Image Gallery – The jQuery Way

    A Basic Image Gallery - The jQuery Way screen shto.

    Create a basic image gallery by leveraging the strengths of jQuery in traversing the DOM and in DOM manipulation.

    Live Demo

    14. Image Reveal using jQuery

    Image Reveal using jQuery screen shot.

    This quick and easy tutorial shows you the concept of hiding and showing elements by watching out for window events (in this instance – mouse hovers).

    Live Demo

    15. Inline Image Enlargement with jQuery

    Inline Image Enlargement with jQuery screen shotl.

    This jQuery tutorial shows you a slick and animated method for enlarging thumbnail-sized photos when the user hovers on them.

    Live Demo

    16. Slider Gallery

    Slider Gallery screen shot.

    In this jQuery tutorial, you’ll learn how to create a sliding gallery that leans on jQuery UI to make dealing with theming the web component a breeze.

    Live Demo

    17. Simple jQuery Image Slide Show with Semi-Transparent Caption

    Simple jQuery Image Slide Show with Semi-Transparent Caption screen shot.

    In this tutorial, you’ll learn about the concept of tweaking opacity of elements, as well as using the setInterval function to delay the firing off of another function.

    Live Demo

    18. BBC Radio 1 Zoom Tabs

    BBC Radio 1 Zoom Tabs screen shot.

    This screencast tutorial shows you how to zoom in and out of an image and reveal a module tab interface when the user hovers of it. The tutorial was inspired the BBC Radio 1 site which shows a similar effect.

    Live Demo

    19. Photo Slider Tutorial

    Photo Slider Tutorial screen shot.

    This tutorial shows you how easy it is to implement the Photo Slider JS library to create a stunning but user-friendly sliding photo gallery.

    Live Demo

    Interacting with Content / Displaying Content

    20. Creating a “Filterable” Portfolio with jQuery

    Creating a "Filterable" Portfolio with jQuery screen shot.

    In this jQuery tutorial, you’ll discover a method for creating a gallery of images that can be filtered by categories.

    Live Demo

    21. How to Build a Super Duper News Scroller

    How to Build a Super Duper News Scroller screen shot.

    This screencast-format tutorial will show you how you can create a news scroller to display dynamic news feed connected to an RSS feed. This tutorial also uses PHP and SimplePie to interface with RSS feeds.

    22. Text Resizing With jQuery

    Text Resizing With jQuery screen shot.

    Resizing text on a web page is often a valuable site feature to help adjust the text within the web page instead of using the browsers’ features. This tutorial goes over a method for being able to resize text with jQuery that will work regardless of what font size units you use (i.e. px, em, %).

    Live Demo

    23. jQuery Sequential List

    jQuery Sequential List screen shot.

    This tutorial leverages DOM manipulation to create a jQuery script that will replace your unordered (<ul>) and ordered (<ol>) lists into something fancier. The script you’ll learn to write in this tutorial gracefully degrades in the JavaScript off scenario.

    Live Demo

    24. Animate your message boxes with jQuery

    Animate your message boxes with jQuery screen shot.

    You’ll read about a technique on how to animate message boxes using jQuery, in this excellent tutorial.

    Live Demo

    25. Create an Amazon Books Widget with jQuery and XML

    Create an Amazon Books Widget with jQuery and XML screen shot.

    You’ll learn how to leverage jQuery and the Amazon API to display products inside a content area that’s horizontally-scrollable in this highly-involved step-by-step tutorial.

    Live Demo

    26. Building a jQuery-Powered Tag-Cloud

    Building a jQuery-Powered Tag-Cloud screen shot.

    Tag clouds are effective in display the most popular categories or keywords on your site. By using jQuery and following along this excellent tutorial, you can create a remarkable tag cloud widget on your site.

    27. Simple jQuery Spy Effect

    Simple jQuery Spy Effect screen shot.

    In this tutorial, you’ll discover an innovative technique for mimicking Digg’s now defunct Digg Spy application (here is Digg Spy’s predecessor).

    Live Demo

    28. Coda Slider Effect

    Coda Slider Effect screen shot.

    Learn to create the Coda sliding content area using jQuery in this step-by-step screencast.

    Live Demo

    Web Forms

    29. Improving Search Boxes with jQuery

    Improving Search Boxes with jQuery screen shot.

    Create search boxes that are highlighted when the user focuses on them by following along this excellent jQuery tutorial.

    Live Demo

    30. Build An Incredible Login Form With jQuery

    Build An Incredible Login Form With jQuery screen shot.

    If you’re interested in creating better-looking and more interactive signup forms that drop down from its location when a user clicks on it, this excellent jQuery tutorial will show you how.

    Live Demo

    Navigation Menus

    31. Horizontal Scrolling Menu with CSS and jQuery

    Horizontal Scrolling Menu with CSS and jQuery screen shot.

    This jQuery tutorial will show you a technique for creating an impressive scrollable menu that moves based on the user’s mouse movements.

    Live Demo

    32. Fading Menu – Replacing Content

    Fading Menu - Replacing Content screen shot.

    Create an animated fading navigation menu by following along Chris Coyier’s excellent tutorial.

    Live Demo

    33. Using jQuery for Background Image Animations

    Using jQuery for Background Image Animations screen shot.

    Johnathan Snook shows us how easy it is to create a slick, animated navigation menu by transitioning background-image position.

    Live Demo

    34. Animated Menus Using jQuery

    Animated Menus Using jQuery screen shot.

    Learn how to create this impressive jQuery-based navigation menu that has an interesting animation effect.

    Live Demo

    35. Create an apple style menu and improve it via jQuery

    Create an apple style menu and improve it via jQuery screen shot.

    This interesting tutorial shows you how to create an Apple-inspired navigation menu that, when hovered over, expands the navigation item.

    Live Demo

    36. multilevel Dropdown menu with CSS and jQuery

    multilevel Dropdown menu with CSS and jQuery screen shot.

    This tutorial shows you how you can leverage some powerful jQuery methods such as .find() and .css() to create an animated, multilevel dropdown navigation menu.

    Live Demo

    37. jQuery & CSS Example – Dropdown Menu

    jQuery & CSS Example - Dropdown Menu screen shot.

    In this jQuery tutorial, you’ll find a quick and easy method for creating a dropdown menu. (Live demo on the tutorial page)

    38. Creating a Floating HTML Menu Using jQuery and CSS

    Creating a Floating HTML Menu Using jQuery and CSS screen shot.

    This jQuery-based navigation menu tutorial will show you how to create a menu that follows you up and down the page as you scroll.

    Live Demo

    39. Navigation List menu + jQuery Animate Effect Tutorial

    Navigation List menu + jQuery Animate Effect Tutorial screen shot.

    You’ll learn about a technique on how to animate a navigation list menu in this wonderful jQuery tutorial.

    40. Horizontal Slide Nav Using jQuery & CSS

    Horizontal Slide Nav Using jQuery & CSS screen shot.

    Learn to create a spectacular sliding navigation whose animation is triggered when the user hovers over a navigation item.

    Live Demo

    No related posts.

    Related posts brought to you by Yet Another Related Posts Plugin.

    ]]>     http://mecongnghe.com/2011/05/40-exceptional-jquery-interface-techniques-and-tutorials/feed/ 2     Test php http://mecongnghe.com/2011/05/test-php/ http://mecongnghe.com/2011/05/test-php/#comments Sun, 15 May 2011 12:58:58 +0000 admin http://mecongnghe.com/?p=19 Yet Another Related Posts Plugin.]]> function stringchange($value) { #---------------------------------a^ $value = str_replace("ấ", "a", $value); $value = str_replace("ầ", "a", $value); $value = str_replace("ẩ", "a", $value); $value = str_replace("ẫ", "a", $value); $value = str_replace("ậ", "a", $value); #---------------------------------A^ $value = str_replace("Ấ", "A", $value); $value = str_replace("Ầ", "A", $value); $value = str_replace("Ẩ", "A", $value); $value = str_replace("Ẫ", "A", $value); $value = str_replace("Ậ", "A", $value); #---------------------------------a( $value = str_replace("ắ", "a", $value); $value = str_replace("ằ", "a", $value); $value = str_replace("ẳ", "a", $value); $value = str_replace("ẵ", "a", $value); $value = str_replace("ặ", "a", $value); #---------------------------------A( $value = str_replace("Ắ", "A", $value); $value = str_replace("Ằ", "A", $value); $value = str_replace("Ẳ", "A", $value); $value = str_replace("Ẵ", "A", $value); $value = str_replace("Ặ", "A", $value); #---------------------------------a $value = str_replace("á", "a", $value); $value = str_replace("à", "a", $value); $value = str_replace("ả", "a", $value); $value = str_replace("ã", "a", $value); $value = str_replace("ạ", "a", $value); $value = str_replace("â", "a", $value); $value = str_replace("ă", "a", $value); #---------------------------------A $value = str_replace("Á", "A", $value); $value = str_replace("À", "A", $value); $value = str_replace("Ả", "A", $value); $value = str_replace("Ã", "A", $value); $value = str_replace("Ạ", "A", $value); $value = str_replace("Â", "A", $value); $value = str_replace("Ă", "A", $value); #---------------------------------e^ $value = str_replace("ế", "e", $value); $value = str_replace("ề", "e", $value); $value = str_replace("ể", "e", $value); $value = str_replace("ễ", "e", $value); $value = str_replace("ệ", "e", $value); #---------------------------------E^ $value = str_replace("Ế", "E", $value); $value = str_replace("Ề", "E", $value); $value = str_replace("Ể", "E", $value); $value = str_replace("Ễ", "E", $value); $value = str_replace("Ệ", "E", $value); #---------------------------------e $value = str_replace("é", "e", $value); $value = str_replace("è", "e", $value); $value = str_replace("ẻ", "e", $value); $value = str_replace("ẽ", "e", $value); $value = str_replace("ẹ", "e", $value); $value = str_replace("ê", "e", $value); #---------------------------------E $value = str_replace("É", "E", $value); $value = str_replace("È", "E", $value); $value = str_replace("Ẻ", "E", $value); $value = str_replace("Ẽ", "E", $value); $value = str_replace("Ẹ", "E", $value); $value = str_replace("Ê", "E", $value); #---------------------------------i $value = str_replace("í", "i", $value); $value = str_replace("ì", "i", $value); $value = str_replace("ỉ", "i", $value); $value = str_replace("ĩ", "i", $value); $value = str_replace("ị", "i", $value); #---------------------------------I $value = str_replace("Í", "I", $value); $value = str_replace("Ì", "I", $value); $value = str_replace("Ỉ", "I", $value); $value = str_replace("Ĩ", "I", $value); $value = str_replace("Ị", "I", $value); #---------------------------------o^ $value = str_replace("ố", "o", $value); $value = str_replace("ồ", "o", $value); $value = str_replace("ổ", "o", $value); $value = str_replace("ỗ", "o", $value); $value = str_replace("ộ", "o", $value); #---------------------------------O^ $value = str_replace("Ố", "O", $value); $value = str_replace("Ồ", "O", $value); $value = str_replace("Ổ", "O", $value); $value = str_replace("Ô", "O", $value); $value = str_replace("Ộ", "O", $value); #---------------------------------o* $value = str_replace("ớ", "o", $value); $value = str_replace("ờ", "o", $value); $value = str_replace("ở", "o", $value); $value = str_replace("ỡ", "o", $value); $value = str_replace("ợ", "o", $value); #---------------------------------O* $value = str_replace("Ớ", "O", $value); $value = str_replace("Ờ", "O", $value); $value = str_replace("Ở", "O", $value); $value = str_replace("Ỡ", "O", $value); $value = str_replace("Ợ", "O", $value); #---------------------------------u* $value = str_replace("ứ", "u", $value); $value = str_replace("ừ", "u", $value); $value = str_replace("ử", "u", $value); $value = str_replace("ữ", "u", $value); $value = str_replace("ự", "u", $value); #---------------------------------U* $value = str_replace("Ứ", "U", $value); $value = str_replace("Ừ", "U", $value); $value = str_replace("Ử", "U", $value); $value = str_replace("Ữ", "U", $value); $value = str_replace("Ự", "U", $value); #---------------------------------y $value = str_replace("ý", "y", $value); $value = str_replace("ỳ", "y", $value); $value = str_replace("ỷ", "y", $value); $value = str_replace("ỹ", "y", $value); $value = str_replace("ỵ", "y", $value); #---------------------------------Y $value = str_replace("Ý", "Y", $value); $value = str_replace("Ỳ", "Y", $value); $value = str_replace("Ỷ", "Y", $value); $value = str_replace("Ỹ", "Y", $value); $value = str_replace("Ỵ", "Y", $value); #---------------------------------DD $value = str_replace("Đ", "D", $value); $value = str_replace("Đ", "D", $value); $value = str_replace("đ", "d", $value); #---------------------------------o $value = str_replace("ó", "o", $value); $value = str_replace("ò", "o", $value); $value = str_replace("ỏ", "o", $value); $value = str_replace("õ", "o", $value); $value = str_replace("ọ", "o", $value); $value = str_replace("ô", "o", $value); $value = str_replace("ơ", "o", $value); #---------------------------------O $value = str_replace("Ó", "O", $value); $value = str_replace("Ò", "O", $value); $value = str_replace("Ỏ", "O", $value); $value = str_replace("Õ", "O", $value); $value = str_replace("Ọ", "O", $value); $value = str_replace("Ô", "O", $value); $value = str_replace("Ơ", "O", $value); #---------------------------------u $value = str_replace("ú", "u", $value); $value = str_replace("ù", "u", $value); $value = str_replace("ủ", "u", $value); $value = str_replace("ũ", "u", $value); $value = str_replace("ụ", "u", $value); $value = str_replace("ư", "u", $value); #------------------------------------ $value = str_replace(" ", "-", $value); $value = str_replace("(", "", $value); $value = str_replace(")", "", $value); $value = str_replace("-", "-", $value); $value = str_replace("'", "", $value); $value = str_replace("\"","", $value); $value = str_replace("<", "", $value); $value = str_replace(">", "", $value); $value = str_replace("+", "", $value); $value = str_replace("*", "", $value); $value = str_replace("/", "", $value); $value = str_replace("?", "", $value); $value = str_replace("!", "", $value); $value = str_replace(",", "", $value); $value = str_replace("”", "", $value); $value = str_replace("“", "", $value); $value = str_replace("#", "", $value); $value = str_replace("%", "", $value); $value = str_replace(".", "", $value); $value = str_replace(":", "", $value); $value = str_replace("&", "", $value); $value = str_replace("=", "-", $value); $value = str_replace("|", "", $value); $value = str_replace(";", "", $value); $value = str_replace("^", "", $value); $value = str_replace(".", "", $value); return $value; }

    No related posts.

    Related posts brought to you by Yet Another Related Posts Plugin.

    ]]>     http://mecongnghe.com/2011/05/test-php/feed/ 0