~smagoun/whoopsie/whoopsie-lp1017637

<p>The visualization of the Slider is based on the volume control in Mac OS X 10.5, with additional controls included for illustration. <strong>Click on the speaker icon to show the Slider</strong>.</p>

149

</div>

150

151

152

153

154

155

<label for="volume">volume</label><input type="text" size="3" maxlength="3" name="volume" id="volume" value="50">

156

157

158

159

160

</span>

161

</span>

162

163

</div>

164

165

166

<p>Nulla facilisi. In vel sem. Morbi id urna in diam dignissim feugiat. Proin molestie tortor eu velit. Aliquam erat volutpat. Nullam ultrices, diam tempus vulputate egestas, eros pede varius leo, sed imperdiet lectus est ornare odio.</p>

167

<p>Phasellus wisi purus, interdum vitae, rutrum accumsan, viverra in, velit. Sed enim risus, congue non, tristique in, commodo eu, metus. Aenean tortor mi, imperdiet id, gravida eu, posuere eu, felis.</p>

168

</div>

169

</div>

170

171

</div>

172

173

YUI().use("slider", function (Y) {

174

175

var control = Y.one('#volume_control'),

176

volInput = Y.one('#volume'),

177

icon = Y.one('#volume_icon'),

178

mute = Y.one('#mute'),

179

open = false,

180

level = 2,

181

beforeMute = 0,

182

wait,

183

volume;

184

185

Y.one("#volume_slider").setStyle('left',icon.get('offsetLeft')+'px');

186

187

volume = new Y.Slider({

188

axis : 'y',

189

min : 100,

190

max : 0,

191

value : 50,

192

length: '105px'

193

});

194

195

volume.renderRail = function () {

196

return Y.one( "#volume_slider span.yui3-slider-rail" );

197

};

198

volume.renderThumb = function () {

199

return this.rail.one( "span.yui3-slider-thumb" );

200

};

201

202

volume.render( "#volume_slider" );

203

204

// Initialize event listeners

205

volume.after('valueChange', updateInput);

206

volume.after('valueChange', updateIcon);

207

208

mute.on('click', muteVolume);

209

210

volInput.on({

211

keydown : handleInput,

212

keyup : updateVolume

213

});

214

215

icon.on('click', showHideSlider);

216

217

Y.one( 'doc' ).on('click', handleDocumentClick );

218

219

// Support functions

220

function updateInput(e) {

221

if (e.src !== 'KEY') {

222

volInput.set('value',e.newVal);

223

}

224

}

225

226

function updateIcon(e) {

227

var newLevel = e.newVal && Math.ceil(e.newVal / 34);

228

229

if (level !== newLevel) {

230

icon.replaceClass('level_'+level, 'level_'+newLevel);

231

level = newLevel;

232

}

233

}

234

235

function muteVolume(e) {

236

var disabled = !volume.get('disabled');

237

volume.set('disabled', disabled);

238

239

if (disabled) {

240

beforeMute = volume.getValue();

241

volume.setValue(0);

242

volInput.set('disabled','disabled');

243

} else {

244

volume.setValue(beforeMute);

245

volInput.set('disabled','');

246

}

247

}

248

249

function handleInput(e) {

250

// Allow only numbers and various other control keys

251

if (e.keyCode > 57) {

252

e.halt();

253

}

254

}

255

256

function updateVolume(e) {

257

// delay input processing to give the user time to type

258

if (wait) {

259

wait.cancel();

260

}

261

262

wait = Y.later(400, null, function () {

263

var value = parseInt(volInput.get('value'),10) || 0;

264

265

if (value > 100) {

266

volInput.set('value', 100);

267

value = 100

268

}

269

270

volume.setValue( value );

271

});

272

}

273

274

function showHideSlider(e) {

275

control.toggleClass('volume-hide');

276

open = !open;

277

278

if (e) {

279

e.preventDefault();

280

}

281

}

282

283

function handleDocumentClick(e) {

284

if (open && !icon.contains(e.target) &&

285

!volume.get('boundingBox').contains(e.target)) {

286

showHideSlider();

287

}

288

}

289

290

});

291

292

</script>

293

294

<h3 id="prog_enh">Progressive Enhancement</h3>

295

<p>The <a href="http://en.wikipedia.org/wiki/Progressive_enhancement">Progressive Enhancement</a> strategy recommends that your page not contain markup that will only be useful in cases where JavaScript is available. For this reason, Slider does not include an <code>HTML_PARSER</code> to reuse existing markup. However, it is possible to override a couple methods to accomplish the task.</p>

296

297

<p>The starting markup for the volume control area is as follows:</p>

298

299

300

<label for="volume">volume</label><input type="text" size="3" maxlength="3" name="volume" id="volume" value="50">

301

302

303

304

305

306

</span>

307

</span>

308

309

310

</div></pre>

311

312

313

<p>To tell the Slider to use the existing rail and thumb elements, override the <code>renderRail</code> and <code>renderThumb</code> methods.</p>

314

315

<pre class="code prettyprint">var volume = new Y.Slider({

316

axis : 'y',

317

min : 100, // reverse min and max to make the top

318

max : 0, // equal 100 and the bottom 0

319

value : 50,

320

length: '105px'

321

});

322

323

// Override renderRail to just return the existing rail node

324

volume.renderRail = function () {

325

return Y.one( "#volume_slider span.yui3-slider-rail" );

326

};

327

// Override renderThumb to just return the existing thumb node

328

volume.renderThumb = function () {

329

return this.rail.one( "span.yui3-slider-thumb" );

330

};

331

332

volume.render( "#volume_slider" );</pre>

333

334

335

<h3 id="syncui">Hide and show the Slider</h3>

336

<p>By default, we want the Slider to be hidden until the user clicks on the speaker icon. However, we want to support muting or changing the value of the Slider while it is hidden.</p>

337

338

<pre class="code prettyprint">var control = Y.one('#volume_control'),

339

icon = Y.one('#volume_icon'),

340

open = false;

341

342

function showHideSlider(e) {

343

control.toggleClass('volume-hide');

344

open = !open;

345

346

if (e) {

347

e.preventDefault();

348

}

349

}

350

351

icon.on('click', showHideSlider);

352

353

// Also support hiding the Slider when the user clicks outside the

354

// Slider element.

355

function handleDocumentClick(e) {

356

if (open && !icon.contains(e.target) &&

357

!volume.get('boundingBox').contains(e.target)) {

358

showHideSlider();

359

}

360

}

361

362

Y.one( 'doc' ).on('click', handleDocumentClick );</pre>

363

364

365

<h3 id="demo_mute">Mute and unmute</h3>

366

<p>We want to disable the Slider and input and set the value to 0 if a user checks the mute checkbox. The value should be returned to the last assigned value when unmuted. To disable the Slider, set its <code>disabled</code> attribute to <code>true</code>.</p>

367

368

<pre class="code prettyprint">var volInput = Y.one('#volume'),

369

mute = Y.one('#mute'),

370

beforeMute = 0;

371

372

function muteVolume(e) {

373

// Set disabled to false if currently true; true if currently false

374

var disabled = !volume.get('disabled');

375

volume.set('disabled', disabled);

376

377

if (disabled) {

378

beforeMute = volume.getValue();

379

volume.setValue(0);

380

volInput.set('disabled','disabled');

381

} else {

382

volume.setValue(beforeMute);

383

volInput.set('disabled','');

384

}

385

}

386

387

mute.on('click', muteVolume);</pre>

388

389

390

<h3>Skinning and CSS</h3>

391

392

<p>We'll be using the image sprite to the left to create a custom skin. In this design, to keep things simple, the Slider's container and end caps are all rendered together at the bottom of the sprite.</p>

393

394

<p>Slider's thumb range is constrained by the rail element, so it wouldn't be appropriate to use this image as the rail's background—the thumb would slide off the ends. Instead, the rail image is assigned as the background to the Slider's containing element <code>#volume_slider</code>. Then the default skin background image is removed on the rail.</p>

395

396

<pre class="code prettyprint">/* rail image on the containing box rather than the rail element */

397

#volume_slider {

398

background: url("assets/images/sprite.png") no-repeat 0 -259px;

399

height: 116px;

400

width: 31px;

401

padding-top: 9px;

402

}

403

404

#volume_slider .yui3-slider-rail {

405

406

width: 31px;

407

}

408

409

#volume_slider .yui3-slider-thumb {

410

height: 17px;

411

width: 31px;

412

overflow: hidden;

413

}

414

415

#volume_slider .yui3-slider-thumb img {

416

position: absolute;

417

top: -225px;

418

}

419

420

#volume_slider .yui3-slider-disabled .yui3-slider-thumb img {

421

top: -242px;

422

}</pre>

423

424

425

<p>You can see the full CSS and JavaScript for the other controls in the <a href="#full_code_listing">Full Code Listing</a> below.</p>

426

427

428

<h3 id="full_code_listing">Full Code Listing</h3>

429

<p>Here is the full markup, CSS, and JavaScript for the entire example, including the volume input and mute controls, and CSS for placing the Slider and setting up the volume icon sprite positioning.</p>

430

431

<h4>Markup</h4>

432

433

434

435

<label for="volume">volume</label><input type="text" size="3" maxlength="3" name="volume" id="volume" value="50">

436

437

438

439

440

</span>

441

</span>

442

443

</div>

444

445

446

447

448

</div>

449

</div></pre>

450

451

452

<h4 id="full_js">JavaScript</h4>

453

<pre class="code prettyprint">YUI().use("slider", function (Y) {

454

455

var control = Y.one('#volume_control'),

456

volInput = Y.one('#volume'),

457

icon = Y.one('#volume_icon'),

458

mute = Y.one('#mute'),

459

open = false,

460

level = 2,

461

beforeMute = 0,

462

wait,

463

volume;

464

465

Y.one("#volume_slider").setStyle('left',icon.get('offsetLeft')+'px');

466

467

volume = new Y.Slider({

468

axis : 'y',

469

min : 100,

470

max : 0,

471

value : 50,

472

length: '105px'

473

});

474

475

volume.renderRail = function () {

476

return Y.one( "#volume_slider span.yui3-slider-rail" );

477

};

478

volume.renderThumb = function () {

479

return this.rail.one( "span.yui3-slider-thumb" );

480

};

481

482

volume.render( "#volume_slider" );

483

484

// Initialize event listeners

485

volume.after('valueChange', updateInput);

486

volume.after('valueChange', updateIcon);

487

488

mute.on('click', muteVolume);

489

490

volInput.on({

491

keydown : handleInput,

492

keyup : updateVolume

493

});

494

495

icon.on('click', showHideSlider);

496

497

Y.one( 'doc' ).on('click', handleDocumentClick );

498

499

// Support functions

500

function updateInput(e) {

501

if (e.src !== 'KEY') {

502

volInput.set('value',e.newVal);

503

}

504

}

505

506

function updateIcon(e) {

507

var newLevel = e.newVal && Math.ceil(e.newVal / 34);

508

509

if (level !== newLevel) {

510

icon.replaceClass('level_'+level, 'level_'+newLevel);

511

level = newLevel;

512

}

513

}

514

515

function muteVolume(e) {

516

var disabled = !volume.get('disabled');

517

volume.set('disabled', disabled);

518

519

if (disabled) {

520

beforeMute = volume.getValue();

521

volume.setValue(0);

522

volInput.set('disabled','disabled');

523

} else {

524

volume.setValue(beforeMute);

525

volInput.set('disabled','');

526

}

527

}

528

529

function handleInput(e) {

530

// Allow only numbers and various other control keys

531

if (e.keyCode > 57) {

532

e.halt();

533

}

534

}

535

536

function updateVolume(e) {

537

// delay input processing to give the user time to type

538

if (wait) {

539

wait.cancel();

540

}

541

542

wait = Y.later(400, null, function () {

543

var value = parseInt(volInput.get('value'),10) || 0;

544

545

if (value > 100) {

546

volInput.set('value', 100);

547

value = 100

548

}

549

550

volume.setValue( value );

551

});

552

}

553

554

function showHideSlider(e) {

555

control.toggleClass('volume-hide');

556

open = !open;

557

558

if (e) {

559

e.preventDefault();

560

}

561

}

562

563

function handleDocumentClick(e) {

564

if (open && !icon.contains(e.target) &&

565

!volume.get('boundingBox').contains(e.target)) {

566

showHideSlider();

567

}

568

}

569

570

});</pre>

571

572

573

574

575

#demo {

576

background: #fff;

577

border: 1px solid #999;

578

color: #000;

579

}

580

581

#demo .demo-content {

582

padding: 1ex 1em;

583

}

584

585

#volume_control {

586

height: 25px;

587

line-height: 25px;

588

background: url(../assets/slider/images/sprite.png) repeat-x 0 0;

589

position: relative;

590

}

591

592

#volume_control label {

593

font-weight: bold;

594

margin: 0 1ex 0 1em;

595

zoom: 1;

596

}

597

598

#volume {

599

border: 1px inset #999;

600

height: 16px;

601

margin-top: 3px;

602

padding: 0 3px;

603

text-align: right;

604

width: 2em;

605

}

606

607

/* Support open/close action for the slider */

608

#demo .volume-hide #volume_slider {

609

display: none;

610

}

611

612

#volume_icon {

613

background: url(../assets/slider/images/sprite.png) no-repeat 0 -25px;

614

border: 0 none;

615

height: 25px;

616

vertical-align: top;

617

width: 31px;

618

}

619

620

/* move the button text offscreen left */

621

#volume_icon p {

622

text-indent: -9999px;

623

}

624

625

626

* adjust the speaker icon sprite in accordance with volume level and

627

* active state

628

629

#demo .volume-hide .level_0 { background-position: 0 -25px; }

630

#demo .volume-hide .level_1 { background-position: 0 -50px; }

631

#demo .volume-hide .level_2 { background-position: 0 -75px; }

632

#demo .volume-hide .level_3 { background-position: 0 -100px; }

633

634

#demo .level_0,

635

#demo .level_0:hover {

636

background-position: 0 -125px;

637

}

638

#demo .level_1,

639

#demo .level_1:hover {

640

background-position: 0 -150px;

641

}

642

#demo .level_2,

643

#demo .level_2:hover {

644

background-position: 0 -175px;

645

}

646

#demo .level_3,

647

#demo .level_3:hover {

648

background-position: 0 -200px;

649

}

650

651

#volume_slider {

652

position: absolute;

653

top: 25px;

654

}

655

656

/* rail image on the containing box rather than the rail element */

657

#volume_slider {

658

background: url(../assets/slider/images/sprite.png) no-repeat 0 -259px;

659

height: 116px;

660

width: 31px;

661

padding-top: 9px;

662

cursor: arrow;

663

}

664

665

#volume_slider .yui3-slider-rail {

666

667

width: 31px;

668

}

669

670

#volume_slider .yui3-slider-thumb {

671

height: 17px;

672

width: 31px;

673

overflow: hidden;

674

}

675

676

#volume_slider .yui3-slider-thumb img {

677

position: absolute;

678

top: -225px;

679

}

680

681

#volume_slider .yui3-slider-disabled .yui3-slider-thumb img {

682

top: -242px;

683

}

684

685

#demo_sprite {

686

display: inline;

687

float: left;

688

margin-right: 1em;

689

}

690

</style></pre>

691

692

</div>

693

</div>

694

</div>

695

696

697

698

699

700

701

702

703

<h2 class="no-toc">Examples</h2>

704

</div>

705

706

707

708

709

710

711

<a href="slider-basic.html">Basic Sliders</a>

712

</li>

713

714

715

716

717

<a href="slider-from-markup.html">Creating a Slider from Existing Markup</a>

718

</li>

719

720

721

722

723

<a href="slider-skin.html">Alternate Skins</a>

724

</li>

725

726

727

728

729

730

731

732

733

</ul>

734

</div>

735

</div>

736

737

738

739

740

741

<h2 class="no-toc">Examples That Use This Component</h2>

742

</div>

743

744

745

746

747

748

749

750

751

752

753

754

755

<a href="../overlay/overlay-constrain.html">Constrain Support</a>

756

</li>

757

758

759

760

761

<a href="../stylesheet/stylesheet-theme.html">Adjusting a Page Theme on the Fly</a>

762

</li>

763

764

765

766

767

<a href="../dd/photo-browser.html">Photo Browser</a>

768

</li>

769

770

771

</ul>

772

</div>

773

</div>

774

775

</div>

776

</div>

777

</div>

778

</div>

779

780

781

782

783

</body>

784

</html>

Older »