KAWWA Markup Pattern Library


Site Utilities

New Window Link Component Information

  • Class name: (k-new-window)
  • Version: 1.0
  • jQuery jQuery Interactive feature

Add to list

You may add the "k-new-window" class to links that you wish to be opened in a new window or browser tab.

HTML5 Plain Code

COPY
  1. <a href="http://get.adobe.com/fr/reader/" class="k-new-window" title="Opens in a new window or tab">Adobe Reader</a>

CSS Code

COPY
  1. a.k-new-window, a.k-new-window:link {
  2. 	color: #000;
  3. 	background: transparent url(../img/k-theme0/pic_newwindow.gif) right no-repeat;
  4. 	padding-right: 13px;
  5. }
  6. 
                                
  7. 
                                

How to apply

COPY
  1. (function($){
  2. 	'use strict';
  3. 
                                
  4. 	/* You may pass the target name as a variable / defaults to "_blank" */
  5.     function openNewWindow(windowName) {
  6.         $('a.k-new-window').click(function(){
  7.             var zeName = (windowName) ? windowName : '_blank';
  8.             var zeTarget = $(this).attr('href');
  9.             window.open(zeTarget, zeName);
  10.             return false;
  11.         });
  12.     }
  13. 
                                
  14. 	$(document).ready(function(){
  15. 		openNewWindow();
  16. 	});
  17. })(jQuery);

IE Backward Compatibility

In order to correct display bugs for Internet Explorer versions prior to 9, your html pages need to call the following file by Conditional Comments:

Top


List of Components

Top

jQuery Feature
jQuery Interactive Feature
Tapestry Integration
Tapestry integration
AngularJS Feature
AngularJS Feature

Navigation

Forms

Tables

Blocks

Site Utilities

Editorial

eCommerce