/usr/share/doc/libjs-jquery-ui-docs/examples/checkboxradio/product-selector.html is in libjs-jquery-ui-docs 1.12.1+dfsg-4.
This file is owned by root:root, with mode 0o644.
The actual contents of the file can be viewed below.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 | <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Checkboxradio - Product Selector</title>
<link rel="stylesheet" href="/usr/share/javascript/jquery-ui/themes/base/jquery-ui.css">
<link rel="stylesheet" href="../demos.css">
<script src="/usr/lib/nodejs/require.js"></script>
<script src="../bootstrap.js" data-modules="controlgroup">
function handleShape( e ) {
$( ".shape" )
.removeClass( "circle pill square rectangle" )
.addClass( $( e.target ).val() );
};
function handleToggle( e ) {
var target = $( e.target );
if ( target.is( ".brand-toggle" ) ) {
var checked = target.is( ":checked" ),
value = $( "[name='brand']" )
.filter( ":checked" )
.attr( "data-" + target[ 0 ].id )
$( ".shape" ).css( target[ 0 ].id, checked ? value : "" );
} else {
$( ".shape" ).toggleClass( target[ 0 ].id, target.is( ":checked") );
}
}
function updateBrand() {
handleShape( { target: $( "[name='shape']:checked" ) } );
$( ".toggle:checked" ).each( function() {
handleToggle( { target: $( this ) } );
} );
}
// Initalize widgets
$( "input" ).checkboxradio();
$( ".shape-bar, .brand" ).controlgroup();
$( ".toggles" ).controlgroup( {
direction: "vertical"
} );
// Bind event handlers
$( "[name='shape']").on( "change", handleShape );
$( ".toggle" ).on( "change", handleToggle );
$( "[name='brand']").on( "change", updateBrand );
// Set initial values
updateBrand();
</script>
<style>
.shape {
margin-left: 4em;
margin-top: 2.5em;
height: 8em;
width: 8em;
box-shadow: 4px 4px 8px;
color: #ccc;
background-repeat: no-repeat;
background-size: 90%;
background-position: 50%;
}
.circle, .pill {
border-radius: 8em;
}
.pill, .rectangle {
width: 16em;
}
.square, .circle {
margin-left: 9em;
}
.border {
border: 2px solid #333333;
}
.toggles {
width: 200px;
}
.toggle-wrap, .shape {
display: inline-block;
vertical-align: top;
}
.controls {
background: #ccc;
padding: 1em;
display: inline-block;
}
</style>
</head>
<body>
<div class="controls">
<div class="brand-wrap">
<h3>1.) Select a brand</h3>
<div class="brand">
<label for="brand-jquery">jQuery</label>
<input type="radio" name="brand" id="brand-jquery" data-background-color="#0769AD" data-color="#7ACEF4" data-background-image="url(images/jquery.png)">
<label for="brand-jquery-ui">jQuery UI</label>
<input type="radio" name="brand" id="brand-jquery-ui" data-background-color="#B24926" data-color="#FAA523" data-background-image="url(images/jquery-ui.png)" checked>
<label for="brand-jquery-mobile">jQuery Mobile</label>
<input type="radio" name="brand" id="brand-jquery-mobile" data-background-color="#108040" data-color="#3EB249" data-background-image="url(images/jquery-mobile.png)">
<label for="brand-sizzle">Sizzle</label>
<input type="radio" name="brand" id="brand-sizzle" data-background-color="#9A1B1E" data-color="#FAA523" data-background-image="url(images/sizzle.png)">
<label for="brand-qunit">QUnit</label>
<input type="radio" name="brand" id="brand-qunit" data-background-color="#390F39" data-color="#9C3493" data-background-image="url(images/qunit.png)">
</div>
</div>
<div class="shape-wrap">
<h3>2.) Select a shape</h3>
<div class="shape-bar">
<label for="shape-circle">Circle</label>
<input type="radio" name="shape" id="shape-circle" value="circle" checked>
<label for="shape-square">Square</label>
<input type="radio" name="shape" id="shape-square" value="square">
<label for="shape-pill">Pill</label>
<input type="radio" name="shape" id="shape-pill" value="pill">
<label for="shape-rectangle">Rectangle</label>
<input type="radio" name="shape" id="shape-rectangle" value="rectangle">
</div>
</div>
<div class="toggle-wrap">
<h3>3.) Customize</h3>
<div class="toggles">
<label for="color">Shadow</label>
<input class="toggle brand-toggle" type="checkbox" name="color" id="color">
<label for="border">Border</label>
<input class="toggle" type="checkbox" name="border" id="border">
<label for="background-color">Background</label>
<input class="toggle brand-toggle" type="checkbox" name="background-color" id="background-color" checked>
<label for="background-image">Background Image</label>
<input class="toggle brand-toggle" type="checkbox" name="background-image" id="background-image" checked>
</div>
</div>
<div class="shape circle background jquery-ui"></div>
</div>
<div class="demo-description">
<p>Using two sets of radio buttons, as horizontal controlgroups, and one group of checkboxes, as a vertical controlgroup, to implement a product selector.</p>
</div>
</body>
</html>
|