반응형
반응형

모바일웹에서 새 창 닫기

 

 

function popClose(){
           window.open('', '_self', '');
           window.close();
        }

 

반응형
반응형
20 jQuery Plugins You Should Use Today

Link : http://codegeekz.com/20-jquery-plugins-you-should-use-today/

 

1. Promin : Break Forms into Smaller Chunks

chuck-form-jquery
Promin is a jQuery plugin that allows you to break forms into smaller chunks. It looks very nice and it consumes less space. Your form requires little modification, so even if JavaScript is turned off or Promin fails to deliver, your form won’t break. It has been tested on several browsers on desktops, tablets and phones. So far, everything seems to work like a charm.

Source

2. Hashslider V2 : With Hashtag

hashslider1
Hashslider v2 is a jquery-based slider that does what the most jquery-sliders do, but adds a hashtag to the window location, so you can link to any content / position of the slider. The content can now be loaded from an extern .html-file what makes the performance much better, even when you have dozen of slides. The slider also works now in a “loop”. The hashslider v2 is released under the DBAD public license.

Source

3. S Gallery : Responsive jQuery Plugin with CSS3 Animations

s-gallery
S Gallery is a Responsive jQuery Gallery Plugin with CSS3 Animations. It makes use of HTML5′s FullScreen API, and relies heavily on CSS3 animations goodness and CSS3 transforms, so it will work only in browsers that support these features.
It has a neat feature: exiting the slideshow mode back to the grid view mode, the last image which was active in the slideshow mode “returns back” to its position in the grid view, thus the user knows where they have stopped and what images are left in the gallery that they haven’t maybe browsed. This is a neat feature which serves as a brain cue and thus is a nice and positive UX-aware touch.

Source

4. Loda Button : Animates Buttons When Loading

loda-buttons
Loda Button is a simple jQuery plugin animates the button’s icon as the data are being fetched from the server. The classes loda-btn and loda-icon are used by the plugin to style the button. The styling is quite simple and done in loda-button.css. The animation is created using CSS3′s animation, transitions and transforms, which are supported by Chrome, Firefox, Opera, and IE10.

Source

5. Hide/Show Password Plugin

hide-show-password-plugin
Hide/show Password plugin lets you easily hide and reveal the contents of a password input field. The coolest part about this plugin is the “innerToggle” option. When true, it will create a nifty hide/show control you can style as you like. It even maintains the input focus when tapped in a touch browser.

Source

6. Tabulous.js

jquery-tabs
Tabulous.js is a jQuery tabs module for todays web. Tabulous.js can be used with any contents you choose in the tabs and it couldn’t be more simpler to use.
Simply include jQuery and the tabulous.css and tabulous.js files before section. Once you have created your tabs you can initiate the plugin with $(‘#tabs’).tabulous(). You can customize the effects with options like scale, slideLeft, scaleUp and flip.

Source

7. Minimit Anima

minimit-anima
Minimit Anima is a jQuery plugin to animate with transforms and transitions. It’s hardware accelerated css3 animations which is built to have fast animation execution, and it has an api similar to jquery animate, with animations queuing.
By default the anima method do automatic fallback animation on browsers not supporting transitions or transform3d. It also does scale, rotate and skew animations on browsers without transitions from jquery.transform.js already included in the plugin.

Source

8. MasonJS

masonjs
MasonJS jQuery Plugin was created to solve a problem with most grid system currently available. Gaps. When using Masonry, Isotope or any of the other grid plugins out there sometimes your grid will contain gaps or ragged edges. Mason was made to fill those gaps in.
MasonJS looks at your grid and finds all of the elements that compose the grid. It creates a matrix of a perfect grid based on the sizes of those elements, and determines where the gaps are by looping over each block in the grid. it then fills in those gaps with filler elements, that you can define or it will duplicate elements in your grid.

Source

8. Tipue Search

tipue-search
Tipue Search is an easy way to create a full site search for any website. It has options to compare the keyword either with a JSON data or dynamically from the content of any number of given URLs. Once setup, there the page for the “search results” is ready too.

Source

9. Transit

transit
Transit offers smooth transitions and transforms for jQuery, using CSS. It has the same syntax as jQuery’s animate property.

Source

10. CollagePlus

collage-plus
CollagePlus is a plugin for jQuery that will arrange your images to fit exactly within a container. You can define the padding between images, give the images css borders and define a target row height.
CollagePlus relies on all images being loaded before it can calculate the layout. It does not run off image sizes specified in the DOM. If you have image sizes available in the DOM then you’re probably better off calculating the layout server-side (assuming that’s where you got the image sizes from) and writing the result directly to the HTML template you’re generating.

Source

11. Easy Responsive Tabs

responsive-tab
Easy responsive tabs is a lightweight jQuery plugin which optimizes normal horizontal or vertical tabs to accordion on multi devices like: web, tablets, Mobile (IPad & IPhone). This plugin adapts the screen size and changes its form accordingly.
It supports Horizontal / Vertical Tabs to Accordion. Tabs and accordion are created entirely with jQuery. It supports multiple sets of tabs on same page. It has been tested on IE7+, Chrome, Firefox, Safari and Opera.

Source

12. Responsive Audio Player jQuery

responsive-touch-audio-player
Osvaldas Valutis has built a jQuery plugin that replaces “audio” element with a little of custom HTML code. By adding some CSS you get a whole new player which looks the way you want and has the same functionality as the default player. There is no direct way to style the element. But the HTML5 DOM has methods, properties, and events for the element and thus makes it quite easily customizable.

Source

13. jQuery. Deviantart Muro

jquery-muro
jQuery.deviantartmuro is a jQuery plugin to provide a convenient wrapper around the embedding API for the deviantART muro HTML5 drawing application, allowing you to provide image drawing and editing within third-party sites.

Source

14. Chardin.js

chardin-js
Chardin.js is a jQuery plugin that creates a simple overlay to display instructions on existent elements. It is inspired by the recent Gmail new composer tour. It is licensed under the Apache License, Version 2.0.

Source

15. Scroll Up

scroll-up-jquery
ScrollUp is a lightweight jQuery plugin to create a customizable “Scroll to top” feature that will work with any website, with ease. To create a visible line to help determine an ideal scroll distance from the top, assign a valid CSS color to the activeOverlay setting.

Source

16. Swipebox

swipebox
Swipebox is a jQuery lightbox plugin that’s been optimized for both mobile and desktop devices. It supports swipe gestures for navigation (with keyboard navigation for desktop), CSS transitions with jQuery fallback, retina support, and more. It’s compatible with modern desktop and mobile browsers, including IE8+, IOS4+, Android, Windows Phone, and more.

Source

17. Sidr : Create Responsive Side Menu

sidr
Sidr is a handy jQuery plugin for creating side menus and the easiest way for doing your menu responsive. You will be able to create multiple sidrs on both sides of your web to make responsive menus or not, it works perfectly on desktop too.

Source

18. PowerTip : Create Hover Tooltips

powertip
PowerTip is a jQuery tooltip plugin with a flexible design that’s easy to customize. Implementation is straightforward and is easy to customize, has smooth fade-ins and fade-outs, and even gives you a number of different ways you can use those tooltips (including complex content).

Source

19. Spoiler Alert

spoiler-alert-js
Spoiler Alert is a happy little jQuery plugin to hide spoilers on your site. Don’t spoil it! Hide anything with a bit of blur. Hint on mouseover. Reveal on click. To make your site spoiler free, simply include spoiler.js, then, add this somewhere: $(‘spoiler, .spoiler’).spoilerAlert(). To control the maximum and partial blurs, you can pass arguments to the function. Spoiler Alert has been tested in Chrome, Firefox, Safari and Mobile Safari.

Source

20. jPanemenu

jpanel-menu
jPanelMenu is a jQuery plugin that creates a paneled-style menu like the type seen in the mobile versions of Facebook and Google, as well as in many native iPhone applications. Animation is handled by CSS transitions, for browsers with support. CSS transitions are hardware-accelerated on supporting devices, so the animations are silky smooth. For browsers that do not support CSS transitions, the jQuery animation engine is used as a fallback.

Source

반응형
반응형

Chart.JS - SIMPLY STUNNING  HTML5 JS Chart and Gauge Widgets

 

http://chartjs.devexpress.com/

 

Dynamic client side data visualization

Whether you are creating traditional websites, sites that target mobile devices, or native apps built with HTML5 JavaScript and compiled with Apache Cordova (PhoneGap), ChartJS provides high-performance and elegant data visualization options for all your business intelligence needs.

 

 

 

 

 

 

 

반응형
반응형
PhoneJS - HTML5 JavaScript Mobile Development Framework

 

http://phonejs.devexpress.com/

 

Create mobile apps with HTML5 and JavaScript for different screens and platforms

  

HTML5 JavaScript framework for smartphones and tablets

PhoneJS contains everything you'll need to create native client applications using HTML5 and JavaScript with a single codebase and deliver solutions that target today's most popular smartphones and tablet devices.

With a touch-optimized user experience, natively rendered widgets, straightforward page navigation, view management, and data access layers, PhoneJS is a single page application (SPA) framework for your next iOS, Android and WindowsPhone application, ready for online publication or packaged as a store-ready native app using Apache Cordova (PhoneGap).

 

 

Demos

DX WorkoutQR Code 

DX Work out

A sample application that demonstrates the power of the PhoneJS framework and ChartJS data visualization widgets. DXWorkout uses local storage to store data and the PhoneGap API for its splash screen and to persist user data when leaving the application (incoming call, switch to another app, back to home screen, etc). Built with MVVM in mind, DXWorkout illustrates the separation of app logic from its UI. It’s iPhone 5 compatible and includes full source code with PhoneGap Build config.

Run DemoView Sourcehttp://dxpr.es/10oXsNf
Kitchen SinkQR Code

Kitchen Sink

PhoneJS ships with over 30 touch optimized HTML JS widgets that are automatically styled for each target platform. The Kitchen Sink demo illustrates the use of each widget and how you can use them to build store-ready applications for the App Store, Google Play or Microsoft Store.

Run DemoView Sourcehttp://dxpr.es/14lqpt4
Tip CalculatorQR Code

Tip Calculator

TipCalculator is a straightforward PhoneJS application, with a single view and view model. It’s been designed to help you learn the basics of the PhoneJS framework. Description

Run Demo

 

 

 

반응형
반응형

Pop Easy — Easy modal windows with jQuery

pop easy

 

반응형
반응형

18 Best jQuery Carousel Plugins

jquery-image-scale-carousel

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery Carousel plugin allows users to present their website contents such as videos, images, and text in creative and attractive way. jQuery carousel plugins make it easy for developers to easily use and implement plugins to achieve desire and visually stunning looks for their websites.

In this article we have gathered 18 free best jQuery Carousel plugins that will make your tasks easy and help you to easily present your website contents and images in creative and innovative way. Following jQuery carousel plugins are absolutely free and each of them comes with different features, functionality and several options for customization. I hope you will find these plugins handy, useful and right choice for your next and upcoming projects.

If you like the article you might be interested in our other article on 15 Best jQuery Image Slider Plugins

1. Tiny Circleslider

circular-slider
Tiny Circleslider is a circular slider / carousel. That was built to provide web developers with a cool but subtle alternative to all those standard carousels. Tiny Circleslider can blend in on any webpage. It was built using the javascript jQuery library. It supports iPhone, iPad and Android as well. A interval can be set to slide automatically every given milliseconds. You can fire a callback after every move. It is easy customizable and lightweight with only 130 lines of code. The minified size is only 4 KB.

Source & Demo

2. Flexisel

Flexisel
Flexisel is a jQuery carousel plugin that works well on screen sizes down-to-mobile. It has settings for enabling autoplay, defining the animation speed and stopping on hover or not.The standard layout of Flexisel adapts to different screen sizes but also, the plugin provides an option to customize the “number of visible items” for the screen sizes preferred which offers a great experience for users.

Source & Demo

3. Cycle 2

Cycle2
Cycle, a pretty old yet very popular jQuery slideshow plugin now has a new, improved version: Cycle2. The plugin is perfect for anyone looking to create a completely customized slideshow as it does not declare any markup or style. And, its functionality is flexible too. Cycle2 supports responsive layouts, has options for everything (global and per slide) and can be extended easily using a full-featured API.

Source & Demo

4. Minimit Gallery

minimit-gallery
Minimit Gallery is a highly customizable, library agnostic plugin that does galleries, slideshows, carousels, slides, practically everything that has multiple states in less than 10kb Using Minimit Gallery you have more time to focus on the ideation and the dynamics of your interface, all the logic functionality instead is managed by the plugin. It’s designed for advanced JavaScript/Jquery programmers because you need to code all the animations and the css of the gallery. It has been tested on IE7+, Firefox, Safari and Chrome.

Source & Demo

5. CarouFredSel

caroufredsel
jQuery.carouFredSel is a plugin that turns any kind of HTML element into an infinite, circular carousel. It can scroll one or multiple items simultaneously, horizontal or vertical, automatically, by pressing buttons or keys on the keyboard.
You can dynamically add and remove items to/from the carousel. It is compatible with most popular (jQuery) lightbox-plugins. The carouFredSel-plugin was built using the jQuery-library. It is licensed under the MIT-license.

Source & Demo

6. Slider Kit

jquery-slider-kit
Slider Kit is a very flexible jQuery plugin that enables us to create almost any type of slideshows like photo galleries, news sliders, carousels and more. It has support for both horizontal + vertical sliders and items can be navigated via buttons, mousewheel, image click or keyboard. There are lots of options provided like auto-start being on/off, animation types, and navigation being an infinite loop or not, starting position of the slideshow and much more.

Source & Demo

7. Tiny Carousel

tiny-carousel
Tiny Carousel is a lightweight carousel for sliding html based content. It was built using the javascript jQuery library. Tiny Carousel was designed to be a dynamic lightweight utility that gives webdesigners a powerfull way of enhancing a websites user interface.

Source & Demo

8. jCoverflip

jcoverflip
jCoverflip has been developed to enable fast and granular customization of the look and feel and feature set. It has many features like drag or click functionality to showcase featured content items or demand by the users, ability to showcase both images and content associated with an item, module integration with Drupal or standalone version and many more.

Source & Demo

9. jQuery Image Scale Carousel

jquery-image-scale-carousel
It is a jQuery plugin which auto-scales the images into appropriate height and width keeping their aspect ratio. The plugin simply converts an array of images to a slider and supports manual browsing with previous-next controls and auto-play. The download package also includes a PHP-based example which creates the “images array” itself by scanning a given directory.

Source & Demo

10. Slides js

slidesjs
SlidesJS is a responsive slideshow plug-in for jQuery (1.7.1+) with features like touch and CSS3 transitions.

Source & Demo

11. Agile Carousel

agilecarousel
Agile Carousel is a jQuery plugin that allows us to create flexible (both in function and design) slideshows. The plugin uses JSON for the data format of the slides. So, they can easily be provided remotely and integration with any other system (like CMSs) will be easier. You can select between “fade” or “slide” as the transition effect, duration of the transitions and intervals between each slide can all be defined.

Source & Demo

12. Barouseul

Barousel
Barousel is a jQuery plugin to easily generate simple carousels where each slide is defined by an image + any type of related content.

Source & Demo

13. Circular Content Carousel

cicruclar-carousel
This plugin uses slider which holds the content along with their brief description, when users click on content a small box expands next to the content slider, where users can read and see the detail information related to the topic and slider yet navigates.

Source & Demo

14. Elastislide

elastislide
Elastislide is a responsive jQuery carousel plugin that will adapt its size and its behavior in order to work on any screen size. Inserting the carousel’s structure into a container with a fluid width will also make the carousel fluid.

Source & Demo

15. Cloud Carousel

cloudcarousel
Cloud Carousel is a free option with 3D effects. The images rotate in a circular fashion with realistic perspective and reflections are also show.

Source & Demo

16. jQuery Infinite Carousel Plugin

jquery-infinite-carousuel
The Infinite Carousel is a jQuery plugin that allows you to showcase any number of images and videos in a carousel-like fashion. Unlike some other carousels, the Infinite Carousel displays items in a continuous loop no matter how you navigate. Try out the demos below to see how versatile the Infinite Carousel is.

Source & Demo

17. jQuery Liquid Carousel Plugin

jquery-liquid-carousel
Liquid carousel is a jQuery plugin intended for liquid designs. Every time the container of the carousel gets resized, the number of items in the list change to fit the new width.

Source & Demo

18. jCarouseul Lite

jCarousel Lite
jCarousel Lite is a jQuery plugin that carries you on a carousel ride filled with images and HTML content. Put simply, you can navigate images and/or HTML in a carousel-style widget. It is super light weight, at about 2 KB in size, yet very flexible and customizable to fit most of our needs.

Source & Demo
반응형

+ Recent posts