~jstys-z/helioviewer.org/timeline

A dialog is a floating window that contains a title bar and a content area. The dialog window can be moved, resized and closed with the 'x' icon by default.

</p><p>If the content length exceeds the maximum height, a scrollbar will automatically appear.

</p>

A bottom button bar and semi-transparent modal overlay layer are common options that can be added.

</div>

<h3>Dependencies</h3>

<ul>

<li>UI Draggable (Optional)</li>

<li>UI Resizable (Optional)</li>

</ul>

</div>

<h3>Example</h3>

<ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul>

A simple jQuery UI Dialog.<br />

</p>

<pre>$("#dialog").dialog();

</pre>

</p>

<html>

<head>

$(document).ready(function(){

$("#dialog").dialog();

});

</script>

</head>

<div id="dialog" title="Dialog Title">I'm in a dialog</div>

</body>

</html>

</pre>

</p><p></div>

</div>

<h2 class="top-header">Options</h2>

<h3 class="option-name"><a href="#option-autoOpen">autoOpen</a></h3>

<dl>

<dd class="option-type">Boolean</dd>

<dt class="option-default-label">Default:</dt>

</dl>

</div>

<p>When <i>autoOpen</i> is <i>true</i> the dialog will open automatically when <i>dialog</i> is called. If <i>false</i> it will stay hidden until <i>.dialog("open")</i> is called on it.</p>

</div>

<h4>Code examples</h4>

<dt>

Initialize a dialog with the <code>autoOpen</code> option specified.

</dt>

<dd>

<pre><code>$('.selector').dialog({ autoOpen: false });</code></pre>

</dd>

<dt>

Get or set the <code>autoOpen</code> option, after init.

</dt>

<dd>

<pre><code>//getter

100

var autoOpen = $('.selector').dialog('option', 'autoOpen');

101

//setter

102

$('.selector').dialog('option', 'autoOpen', false);</code></pre>

103

</dd>

104

105

</dl>

106

</div>

107

</li>

108

109

110

111

112

<h3 class="option-name"><a href="#option-bgiframe">bgiframe</a></h3>

113

<dl>

114

115

<dd class="option-type">Boolean</dd>

116

117

<dt class="option-default-label">Default:</dt>

118

<dd class="option-default">false</dd>

119

120

</dl>

121

</div>

122

123

<p>When true, the bgiframe plugin will be used, to fix the issue in IE6 where select boxes show on top of other elements, regardless of zIndex. Requires including the bgiframe plugin. Future versions may not require a separate plugin.</p>

124

</div>

125

126

<h4>Code examples</h4>

127

128

129

<dt>

130

Initialize a dialog with the <code>bgiframe</code> option specified.

131

</dt>

132

<dd>

133

<pre><code>$('.selector').dialog({ bgiframe: true });</code></pre>

134

</dd>

135

136

137

<dt>

138

Get or set the <code>bgiframe</code> option, after init.

139

</dt>

140

<dd>

141

<pre><code>//getter

142

var bgiframe = $('.selector').dialog('option', 'bgiframe');

143

//setter

144

$('.selector').dialog('option', 'bgiframe', true);</code></pre>

145

</dd>

146

147

</dl>

148

</div>

149

</li>

150

151

152

153

154

<h3 class="option-name"><a href="#option-buttons">buttons</a></h3>

155

<dl>

156

157

<dd class="option-type">Object</dd>

158

159

<dt class="option-default-label">Default:</dt>

160

161

162

</dl>

163

</div>

164

165

<p>Specifies which buttons should be displayed on the dialog. The property key is the text of the button. The value is the callback function for when the button is clicked. The context of the callback is the dialog element; if you need access to the button, it is available as the target of the event object.

166

</p>

167

</div>

168

169

<h4>Code examples</h4>

170

171

172

<dt>

173

Initialize a dialog with the <code>buttons</code> option specified.

174

</dt>

175

<dd>

176

<pre><code>$('.selector').dialog({ buttons: { "Ok": function() { $(this).dialog("close"); } } });</code></pre>

177

</dd>

178

179

180

<dt>

181

Get or set the <code>buttons</code> option, after init.

182

</dt>

183

<dd>

184

<pre><code>//getter

185

var buttons = $('.selector').dialog('option', 'buttons');

186

//setter

187

$('.selector').dialog('option', 'buttons', { "Ok": function() { $(this).dialog("close"); } });</code></pre>

188

</dd>

189

190

</dl>

191

</div>

192

</li>

193

194

195

196

197

<h3 class="option-name"><a href="#option-closeOnEscape">closeOnEscape</a></h3>

198

<dl>

199

200

<dd class="option-type">Boolean</dd>

201

202

<dt class="option-default-label">Default:</dt>

203

204

205

</dl>

206

</div>

207

208

<p>Specifies whether the dialog should close when it has focus and the user presses the esacpe (ESC) key.</p>

209

</div>

210

211

<h4>Code examples</h4>

212

213

214

<dt>

215

Initialize a dialog with the <code>closeOnEscape</code> option specified.

216

</dt>

217

<dd>

218

<pre><code>$('.selector').dialog({ closeOnEscape: false });</code></pre>

219

</dd>

220

221

222

<dt>

223

Get or set the <code>closeOnEscape</code> option, after init.

224

</dt>

225

<dd>

226

<pre><code>//getter

227

var closeOnEscape = $('.selector').dialog('option', 'closeOnEscape');

228

//setter

229

$('.selector').dialog('option', 'closeOnEscape', false);</code></pre>

230

</dd>

231

232

</dl>

233

</div>

234

</li>

235

236

237

238

239

<h3 class="option-name"><a href="#option-dialogClass">dialogClass</a></h3>

240

<dl>

241

242

<dd class="option-type">String</dd>

243

244

<dt class="option-default-label">Default:</dt>

245

246

247

</dl>

248

</div>

249

250

<p>The specified class name(s) will be added to the dialog, for additional theming.</p>

251

</div>

252

253

<h4>Code examples</h4>

254

255

256

<dt>

257

Initialize a dialog with the <code>dialogClass</code> option specified.

258

</dt>

259

<dd>

260

<pre><code>$('.selector').dialog({ dialogClass: 'alert' });</code></pre>

261

</dd>

262

263

264

<dt>

265

Get or set the <code>dialogClass</code> option, after init.

266

</dt>

267

<dd>

268

<pre><code>//getter

269

var dialogClass = $('.selector').dialog('option', 'dialogClass');

270

//setter

271

$('.selector').dialog('option', 'dialogClass', 'alert');</code></pre>

272

</dd>

273

274

</dl>

275

</div>

276

</li>

277

278

279

280

281

<h3 class="option-name"><a href="#option-draggable">draggable</a></h3>

282

<dl>

283

284

<dd class="option-type">Boolean</dd>

285

286

<dt class="option-default-label">Default:</dt>

287

288

289

</dl>

290

</div>

291

292

<p>If set to true, the dialog will be draggable will be draggable by the titlebar.</p>

293

</div>

294

295

<h4>Code examples</h4>

296

297

298

<dt>

299

Initialize a dialog with the <code>draggable</code> option specified.

300

</dt>

301

<dd>

302

<pre><code>$('.selector').dialog({ draggable: false });</code></pre>

303

</dd>

304

305

306

<dt>

307

Get or set the <code>draggable</code> option, after init.

308

</dt>

309

<dd>

310

<pre><code>//getter

311

var draggable = $('.selector').dialog('option', 'draggable');

312

//setter

313

$('.selector').dialog('option', 'draggable', false);</code></pre>

314

</dd>

315

316

</dl>

317

</div>

318

</li>

319

320

321

322

323

<h3 class="option-name"><a href="#option-height">height</a></h3>

324

<dl>

325

326

<dd class="option-type">Number</dd>

327

328

<dt class="option-default-label">Default:</dt>

329

330

331

</dl>

332

</div>

333

334

<p>The height of the dialog, in pixels.</p>

335

</div>

336

337

<h4>Code examples</h4>

338

339

340

<dt>

341

Initialize a dialog with the <code>height</code> option specified.

342

</dt>

343

<dd>

344

<pre><code>$('.selector').dialog({ height: 530 });</code></pre>

345

</dd>

346

347

348

<dt>

349

Get or set the <code>height</code> option, after init.

350

</dt>

351

<dd>

352

<pre><code>//getter

353

var height = $('.selector').dialog('option', 'height');

354

//setter

355

$('.selector').dialog('option', 'height', 530);</code></pre>

356

</dd>

357

358

</dl>

359

</div>

360

</li>

361

362

363

364

365

366

<dl>

367

368

<dd class="option-type">String</dd>

369

370

<dt class="option-default-label">Default:</dt>

371

372

373

</dl>

374

</div>

375

376

<p>The effect to be used when the dialog is closed.</p>

377

</div>

378

379

<h4>Code examples</h4>

380

381

382

<dt>

383

Initialize a dialog with the <code>hide</code> option specified.

384

</dt>

385

<dd>

386

<pre><code>$('.selector').dialog({ hide: 'slide' });</code></pre>

387

</dd>

388

389

390

<dt>

391

Get or set the <code>hide</code> option, after init.

392

</dt>

393

<dd>

394

<pre><code>//getter

395

var hide = $('.selector').dialog('option', 'hide');

396

//setter

397

$('.selector').dialog('option', 'hide', 'slide');</code></pre>

398

</dd>

399

400

</dl>

401

</div>

402

</li>

403

404

405

406

407

<h3 class="option-name"><a href="#option-maxHeight">maxHeight</a></h3>

408

<dl>

409

410

<dd class="option-type">Number</dd>

411

412

<dt class="option-default-label">Default:</dt>

413

<dd class="option-default">false</dd>

414

415

</dl>

416

</div>

417

418

<p>The maximum height to which the dialog can be resized, in pixels.</p>

419

</div>

420

421

<h4>Code examples</h4>

422

423

424

<dt>

425

Initialize a dialog with the <code>maxHeight</code> option specified.

426

</dt>

427

<dd>

428

<pre><code>$('.selector').dialog({ maxHeight: 400 });</code></pre>

429

</dd>

430

431

432

<dt>

433

Get or set the <code>maxHeight</code> option, after init.

434

</dt>

435

<dd>

436

<pre><code>//getter

437

var maxHeight = $('.selector').dialog('option', 'maxHeight');

438

//setter

439

$('.selector').dialog('option', 'maxHeight', 400);</code></pre>

440

</dd>

441

442

</dl>

443

</div>

444

</li>

445

446

447

448

449

<h3 class="option-name"><a href="#option-maxWidth">maxWidth</a></h3>

450

<dl>

451

452

<dd class="option-type">Number</dd>

453

454

<dt class="option-default-label">Default:</dt>

455

<dd class="option-default">false</dd>

456

457

</dl>

458

</div>

459

460

<p>The maximum width to which the dialog can be resized, in pixels.</p>

461

</div>

462

463

<h4>Code examples</h4>

464

465

466

<dt>

467

Initialize a dialog with the <code>maxWidth</code> option specified.

468

</dt>

469

<dd>

470

<pre><code>$('.selector').dialog({ maxWidth: 600 });</code></pre>

471

</dd>

472

473

474

<dt>

475

Get or set the <code>maxWidth</code> option, after init.

476

</dt>

477

<dd>

478

<pre><code>//getter

479

var maxWidth = $('.selector').dialog('option', 'maxWidth');

480

//setter

481

$('.selector').dialog('option', 'maxWidth', 600);</code></pre>

482

</dd>

483

484

</dl>

485

</div>

486

</li>

487

488

489

490

491

<h3 class="option-name"><a href="#option-minHeight">minHeight</a></h3>

492

<dl>

493

494

<dd class="option-type">Number</dd>

495

496

<dt class="option-default-label">Default:</dt>

497

498

499

</dl>

500

</div>

501

502

<p>The minimum height to which the dialog can be resized, in pixels.</p>

503

</div>

504

505

<h4>Code examples</h4>

506

507

508

<dt>

509

Initialize a dialog with the <code>minHeight</code> option specified.

510

</dt>

511

<dd>

512

<pre><code>$('.selector').dialog({ minHeight: 300 });</code></pre>

513

</dd>

514

515

516

<dt>

517

Get or set the <code>minHeight</code> option, after init.

518

</dt>

519

<dd>

520

<pre><code>//getter

521

var minHeight = $('.selector').dialog('option', 'minHeight');

522

//setter

523

$('.selector').dialog('option', 'minHeight', 300);</code></pre>

524

</dd>

525

526

</dl>

527

</div>

528

</li>

529

530

531

532

533

<h3 class="option-name"><a href="#option-minWidth">minWidth</a></h3>

534

<dl>

535

536

<dd class="option-type">Number</dd>

537

538

<dt class="option-default-label">Default:</dt>

539

540

541

</dl>

542

</div>

543

544

<p>The minimum width to which the dialog can be resized, in pixels.</p>

545

</div>

546

547

<h4>Code examples</h4>

548

549

550

<dt>

551

Initialize a dialog with the <code>minWidth</code> option specified.

552

</dt>

553

<dd>

554

<pre><code>$('.selector').dialog({ minWidth: 400 });</code></pre>

555

</dd>

556

557

558

<dt>

559

Get or set the <code>minWidth</code> option, after init.

560

</dt>

561

<dd>

562

<pre><code>//getter

563

var minWidth = $('.selector').dialog('option', 'minWidth');

564

//setter

565

$('.selector').dialog('option', 'minWidth', 400);</code></pre>

566

</dd>

567

568

</dl>

569

</div>

570

</li>

571

572

573

574

575

<h3 class="option-name"><a href="#option-modal">modal</a></h3>

576

<dl>

577

578

<dd class="option-type">Boolean</dd>

579

580

<dt class="option-default-label">Default:</dt>

581

<dd class="option-default">false</dd>

582

583

</dl>

584

</div>

585

586

<p>If set to true, the dialog will have modal behavior; other items on the page will be disabled (i.e. cannot be interacted with). Modal dialogs create an overlay below the dialog but above other page elements.</p>

587

</div>

588

589

<h4>Code examples</h4>

590

591

592

<dt>

593

Initialize a dialog with the <code>modal</code> option specified.

594

</dt>

595

<dd>

596

<pre><code>$('.selector').dialog({ modal: true });</code></pre>

597

</dd>

598

599

600

<dt>

601

Get or set the <code>modal</code> option, after init.

602

</dt>

603

<dd>

604

<pre><code>//getter

605

var modal = $('.selector').dialog('option', 'modal');

606

//setter

607

$('.selector').dialog('option', 'modal', true);</code></pre>

608

</dd>

609

610

</dl>

611

</div>

612

</li>

613

614

615

616

617

<h3 class="option-name"><a href="#option-position">position</a></h3>

618

<dl>

619

620

<dd class="option-type">String, Array</dd>

621

622

<dt class="option-default-label">Default:</dt>

623

<dd class="option-default">'center'</dd>

624

625

</dl>

626

</div>

627

628

<p>Specifies where the dialog should be displayed. Possible values: 'center', 'left', 'right', 'top', 'bottom', or an array containing a coordinate pair (in pixel offset from top left of viewport) or the possible string values (e.g. ['right','top'] for top right corner).</p>

629

</div>

630

631

<h4>Code examples</h4>

632

633

634

<dt>

635

Initialize a dialog with the <code>position</code> option specified.

636

</dt>

637

<dd>

638

<pre><code>$('.selector').dialog({ position: 'top' });</code></pre>

639

</dd>

640

641

642

<dt>

643

Get or set the <code>position</code> option, after init.

644

</dt>

645

<dd>

646

<pre><code>//getter

647

var position = $('.selector').dialog('option', 'position');

648

//setter

649

$('.selector').dialog('option', 'position', 'top');</code></pre>

650

</dd>

651

652

</dl>

653

</div>

654

</li>

655

656

657

658

659

<h3 class="option-name"><a href="#option-resizable">resizable</a></h3>

660

<dl>

661

662

<dd class="option-type">Boolean</dd>

663

664

<dt class="option-default-label">Default:</dt>

665

666

667

</dl>

668

</div>

669

670

<p>If set to true, the dialog will be resizeable.</p>

671

</div>

672

673

<h4>Code examples</h4>

674

675

676

<dt>

677

Initialize a dialog with the <code>resizable</code> option specified.

678

</dt>

679

<dd>

680

<pre><code>$('.selector').dialog({ resizable: false });</code></pre>

681

</dd>

682

683

684

<dt>

685

Get or set the <code>resizable</code> option, after init.

686

</dt>

687

<dd>

688

<pre><code>//getter

689

var resizable = $('.selector').dialog('option', 'resizable');

690

//setter

691

$('.selector').dialog('option', 'resizable', false);</code></pre>

692

</dd>

693

694

</dl>

695

</div>

696

</li>

697

698

699

700

701

702

<dl>

703

704

<dd class="option-type">String</dd>

705

706

<dt class="option-default-label">Default:</dt>

707

708

709

</dl>

710

</div>

711

712

<p>The effect to be used when the dialog is opened.</p>

713

</div>

714

715

<h4>Code examples</h4>

716

717

718

<dt>

719

Initialize a dialog with the <code>show</code> option specified.

720

</dt>

721

<dd>

722

<pre><code>$('.selector').dialog({ show: 'slide' });</code></pre>

723

</dd>

724

725

726

<dt>

727

Get or set the <code>show</code> option, after init.

728

</dt>

729

<dd>

730

<pre><code>//getter

731

var show = $('.selector').dialog('option', 'show');

732

//setter

733

$('.selector').dialog('option', 'show', 'slide');</code></pre>

734

</dd>

735

736

</dl>

737

</div>

738

</li>

739

740

741

742

743

<h3 class="option-name"><a href="#option-stack">stack</a></h3>

744

<dl>

745

746

<dd class="option-type">Boolean</dd>

747

748

<dt class="option-default-label">Default:</dt>

749

750

751

</dl>

752

</div>

753

754

<p>Specifies whether the dialog will stack on top of other dialogs. This will cause the dialog to move to the front of other dialogs when it gains focus.</p>

755

</div>

756

757

<h4>Code examples</h4>

758

759

760

<dt>

761

Initialize a dialog with the <code>stack</code> option specified.

762

</dt>

763

<dd>

764

<pre><code>$('.selector').dialog({ stack: false });</code></pre>

765

</dd>

766

767

768

<dt>

769

Get or set the <code>stack</code> option, after init.

770

</dt>

771

<dd>

772

<pre><code>//getter

773

var stack = $('.selector').dialog('option', 'stack');

774

//setter

775

$('.selector').dialog('option', 'stack', false);</code></pre>

776

</dd>

777

778

</dl>

779

</div>

780

</li>

781

782

783

784

785

<h3 class="option-name"><a href="#option-title">title</a></h3>

786

<dl>

787

788

<dd class="option-type">String</dd>

789

790

<dt class="option-default-label">Default:</dt>

791

792

793

</dl>

794

</div>

795

796

<p>Specifies the title of the dialog. The title can also be specified by the title attribute on the dialog source element.</p>

797

</div>

798

799

<h4>Code examples</h4>

800

801

802

<dt>

803

Initialize a dialog with the <code>title</code> option specified.

804

</dt>

805

<dd>

806

<pre><code>$('.selector').dialog({ title: 'Dialog Title' });</code></pre>

807

</dd>

808

809

810

<dt>

811

Get or set the <code>title</code> option, after init.

812

</dt>

813

<dd>

814

<pre><code>//getter

815

var title = $('.selector').dialog('option', 'title');

816

//setter

817

$('.selector').dialog('option', 'title', 'Dialog Title');</code></pre>

818

</dd>

819

820

</dl>

821

</div>

822

</li>

823

824

825

826

827

<h3 class="option-name"><a href="#option-width">width</a></h3>

828

<dl>

829

830

<dd class="option-type">Number</dd>

831

832

<dt class="option-default-label">Default:</dt>

833

834

835

</dl>

836

</div>

837

838

<p>The width of the dialog, in pixels.</p>

839

</div>

840

841

<h4>Code examples</h4>

842

843

844

<dt>

845

Initialize a dialog with the <code>width</code> option specified.

846

</dt>

847

<dd>

848

<pre><code>$('.selector').dialog({ width: 460 });</code></pre>

849

</dd>

850

851

852

<dt>

853

Get or set the <code>width</code> option, after init.

854

</dt>

855

<dd>

856

<pre><code>//getter

857

var width = $('.selector').dialog('option', 'width');

858

//setter

859

$('.selector').dialog('option', 'width', 460);</code></pre>

860

</dd>

861

862

</dl>

863

</div>

864

</li>

865

866

867

868

869

<h3 class="option-name"><a href="#option-zIndex">zIndex</a></h3>

870

<dl>

871

872

<dd class="option-type">Integer</dd>

873

874

<dt class="option-default-label">Default:</dt>

875

876

877

</dl>

878

</div>

879

880

<p>The starting z-index for the dialog.</p>

881

</div>

882

883

<h4>Code examples</h4>

884

885

886

<dt>

887

Initialize a dialog with the <code>zIndex</code> option specified.

888

</dt>

889

<dd>

890

<pre><code>$('.selector').dialog({ zIndex: 3999 });</code></pre>

891

</dd>

892

893

894

<dt>

895

Get or set the <code>zIndex</code> option, after init.

896

</dt>

897

<dd>

898

<pre><code>//getter

899

var zIndex = $('.selector').dialog('option', 'zIndex');

900

//setter

901

$('.selector').dialog('option', 'zIndex', 3999);</code></pre>

902

</dd>

903

904

</dl>

905

</div>

906

</li>

907

908

</ul>

909

</div>

910

911

<h2 class="top-header">Events</h2>

912

913

914

915

916

<h3 class="event-name"><a href="#event-beforeclose">beforeclose</a></h3>

917

<dl>

918

919

<dd class="event-type">dialogbeforeclose</dd>

920

</dl>

921

</div>

922

923

<p>This event is triggered when a dialog attempts to close. If the beforeclose event handler (callback function) returns false, the close will be prevented.</p>

924

</div>

925

926

<h4>Code examples</h4>

927

928

929

<dt>

930

Supply a callback function to handle the <code>beforeclose</code> event as an init option.

931

</dt>

932

<dd>

933

<pre><code>$('.selector').dialog({

934

beforeclose: function(event, ui) { ... }

935

});</code></pre>

936

</dd>

937

938

939

<dt>

940

Bind to the <code>beforeclose</code> event by type: <code>dialogbeforeclose</code>.

941

</dt>

942

<dd>

943

<pre><code>$('.selector').bind('dialogbeforeclose', function(event, ui) {

944

...

945

});</code></pre>

946

</dd>

947

948

</dl>

949

</div>

950

</li>

951

952

953

954

955

956

<dl>

957

958

<dd class="event-type">dialogopen</dd>

959

</dl>

960

</div>

961

962

<p>This event is triggered when dialog is opened.</p>

963

</div>

964

965

<h4>Code examples</h4>

966

967

968

<dt>

969

Supply a callback function to handle the <code>open</code> event as an init option.

970

</dt>

971

<dd>

972

<pre><code>$('.selector').dialog({

973

open: function(event, ui) { ... }

974

});</code></pre>

975

</dd>

976

977

978

<dt>

979

Bind to the <code>open</code> event by type: <code>dialogopen</code>.

980

</dt>

981

<dd>

982

<pre><code>$('.selector').bind('dialogopen', function(event, ui) {

983

...

984

});</code></pre>

985

</dd>

986

987

</dl>

988

</div>

989

</li>

990

991

992

993

994

<h3 class="event-name"><a href="#event-focus">focus</a></h3>

995

<dl>

996

997

<dd class="event-type">dialogfocus</dd>

998

</dl>

999

</div>

1000

1001

<p>This event is triggered when the dialog gains focus.</p>

1002

</div>

1003

1004

<h4>Code examples</h4>

1005

1006

1007

<dt>

1008

Supply a callback function to handle the <code>focus</code> event as an init option.

1009

</dt>

1010

<dd>

1011

<pre><code>$('.selector').dialog({

1012

focus: function(event, ui) { ... }

1013

});</code></pre>

1014

</dd>

1015

1016

1017

<dt>

1018

Bind to the <code>focus</code> event by type: <code>dialogfocus</code>.

1019

</dt>

1020

<dd>

1021

<pre><code>$('.selector').bind('dialogfocus', function(event, ui) {

1022

...

1023

});</code></pre>

1024

</dd>

1025

1026

</dl>

1027

</div>

1028

</li>

1029

1030

1031

1032

1033

<h3 class="event-name"><a href="#event-dragStart">dragStart</a></h3>

1034

<dl>

1035

1036

<dd class="event-type">dragStart</dd>

1037

</dl>

1038

</div>

1039

1040

<p>This event is triggered at the beginning of the dialog being dragged.</p>

1041

</div>

1042

1043

<h4>Code examples</h4>

1044

1045

1046

<dt>

1047

Supply a callback function to handle the <code>dragStart</code> event as an init option.

1048

</dt>

1049

<dd>

1050

<pre><code>$('.selector').dialog({

1051

dragStart: function(event, ui) { ... }

1052

});</code></pre>

1053

</dd>

1054

1055

1056

<dt>

1057

Bind to the <code>dragStart</code> event by type: <code>dragStart</code>.

1058

</dt>

1059

<dd>

1060

<pre><code>$('.selector').bind('dragStart', function(event, ui) {

1061

...

1062

});</code></pre>

1063

</dd>

1064

1065

</dl>

1066

</div>

1067

</li>

1068

1069

1070

1071

1072

1073

<dl>

1074

1075

1076

</dl>

1077

</div>

1078

1079

<p>This event is triggered when the dialog is dragged.</p>

1080

</div>

1081

1082

<h4>Code examples</h4>

1083

1084

1085

<dt>

1086

Supply a callback function to handle the <code>drag</code> event as an init option.

1087

</dt>

1088

<dd>

1089

<pre><code>$('.selector').dialog({

1090

drag: function(event, ui) { ... }

1091

});</code></pre>

1092

</dd>

1093

1094

1095

<dt>

1096

Bind to the <code>drag</code> event by type: <code>drag</code>.

1097

</dt>

1098

<dd>

1099

<pre><code>$('.selector').bind('drag', function(event, ui) {

1100

...

1101

});</code></pre>

1102

</dd>

1103

1104

</dl>

1105

</div>

1106

</li>

1107

1108

1109

1110

1111

<h3 class="event-name"><a href="#event-dragStop">dragStop</a></h3>

1112

<dl>

1113

1114

<dd class="event-type">dragStop</dd>

1115

</dl>

1116

</div>

1117

1118

<p>This event is triggered after the dialog has been dragged.</p>

1119

</div>

1120

1121

<h4>Code examples</h4>

1122

1123

1124

<dt>

1125

Supply a callback function to handle the <code>dragStop</code> event as an init option.

1126

</dt>

1127

<dd>

1128

<pre><code>$('.selector').dialog({

1129

dragStop: function(event, ui) { ... }

1130

});</code></pre>

1131

</dd>

1132

1133

1134

<dt>

1135

Bind to the <code>dragStop</code> event by type: <code>dragStop</code>.

1136

</dt>

1137

<dd>

1138

<pre><code>$('.selector').bind('dragStop', function(event, ui) {

1139

...

1140

});</code></pre>

1141

</dd>

1142

1143

</dl>

1144

</div>

1145

</li>

1146

1147

1148

1149

1150

<h3 class="event-name"><a href="#event-resizeStart">resizeStart</a></h3>

1151

<dl>

1152

1153

<dd class="event-type">resizeStart</dd>

1154

</dl>

1155

</div>

1156

1157

<p>This event is triggered at the beginning of the dialog being resized.</p>

1158

</div>

1159

1160

<h4>Code examples</h4>

1161

1162

1163

<dt>

1164

Supply a callback function to handle the <code>resizeStart</code> event as an init option.

1165

</dt>

1166

<dd>

1167

<pre><code>$('.selector').dialog({

1168

resizeStart: function(event, ui) { ... }

1169

});</code></pre>

1170

</dd>

1171

1172

1173

<dt>

1174

Bind to the <code>resizeStart</code> event by type: <code>resizeStart</code>.

1175

</dt>

1176

<dd>

1177

<pre><code>$('.selector').bind('resizeStart', function(event, ui) {

1178

...

1179

});</code></pre>

1180

</dd>

1181

1182

</dl>

1183

</div>

1184

</li>

1185

1186

1187

1188

1189

<h3 class="event-name"><a href="#event-resize">resize</a></h3>

1190

<dl>

1191

1192

<dd class="event-type">resize</dd>

1193

</dl>

1194

</div>

1195

1196

<p>This event is triggered when the dialog is resized.</p>

1197

</div>

1198

1199

<h4>Code examples</h4>

1200

1201

1202

<dt>

1203

Supply a callback function to handle the <code>resize</code> event as an init option.

1204

</dt>

1205

<dd>

1206

<pre><code>$('.selector').dialog({

1207

resize: function(event, ui) { ... }

1208

});</code></pre>

1209

</dd>

1210

1211

1212

<dt>

1213

Bind to the <code>resize</code> event by type: <code>resize</code>.

1214

</dt>

1215

<dd>

1216

<pre><code>$('.selector').bind('resize', function(event, ui) {

1217

...

1218

});</code></pre>

1219

</dd>

1220

1221

</dl>

1222

</div>

1223

</li>

1224

1225

1226

1227

1228

<h3 class="event-name"><a href="#event-resizeStop">resizeStop</a></h3>

1229

<dl>

1230

1231

<dd class="event-type">resizeStop</dd>

1232

</dl>

1233

</div>

1234

1235

<p>This event is triggered after the dialog has been resized.</p>

1236

</div>

1237

1238

<h4>Code examples</h4>

1239

1240

1241

<dt>

1242

Supply a callback function to handle the <code>resizeStop</code> event as an init option.

1243

</dt>

1244

<dd>

1245

<pre><code>$('.selector').dialog({

1246

resizeStop: function(event, ui) { ... }

1247

});</code></pre>

1248

</dd>

1249

1250

1251

<dt>

1252

Bind to the <code>resizeStop</code> event by type: <code>resizeStop</code>.

1253

</dt>

1254

<dd>

1255

<pre><code>$('.selector').bind('resizeStop', function(event, ui) {

1256

...

1257

});</code></pre>

1258

</dd>

1259

1260

</dl>

1261

</div>

1262

</li>

1263

1264

1265

1266

1267

<h3 class="event-name"><a href="#event-close">close</a></h3>

1268

<dl>

1269

1270

<dd class="event-type">dialogclose</dd>

1271

</dl>

1272

</div>

1273

1274

<p>This event is triggered when the dialog is closed.</p>

1275

</div>

1276

1277

<h4>Code examples</h4>

1278

1279

1280

<dt>

1281

Supply a callback function to handle the <code>close</code> event as an init option.

1282

</dt>

1283

<dd>

1284

<pre><code>$('.selector').dialog({

1285

close: function(event, ui) { ... }

1286

});</code></pre>

1287

</dd>

1288

1289

1290

<dt>

1291

Bind to the <code>close</code> event by type: <code>dialogclose</code>.

1292

</dt>

1293

<dd>

1294

<pre><code>$('.selector').bind('dialogclose', function(event, ui) {

1295

...

1296

});</code></pre>

1297

</dd>

1298

1299

</dl>

1300

</div>

1301

</li>

1302

1303

</ul>

1304

</div>

1305

1306

<h2 class="top-header">Methods</h2>

1307

1308

1309

1310

1311

<h3 class="method-name"><a href="#method-destroy">destroy</a></h3>

1312

<dl>

1313

<dt class="method-signature-label">Signature:</dt>

1314

<dd class="method-signature">.dialog( 'destroy'

1315

1316

1317

1318

1319

1320

1321

1322

)</dd>

1323

</dl>

1324

</div>

1325

1326

<p>Remove the dialog functionality completely. This will return the element back to its pre-init state.</p>

1327

</div>

1328

</li>

1329

1330

1331

1332

1333

<h3 class="method-name"><a href="#method-disable">disable</a></h3>

1334

<dl>

1335

<dt class="method-signature-label">Signature:</dt>

1336

<dd class="method-signature">.dialog( 'disable'

1337

1338

1339

1340

1341

1342

1343

1344

)</dd>

1345

</dl>

1346

</div>

1347

1348

<p>Disable the dialog.</p>

1349

</div>

1350

</li>

1351

1352

1353

1354

1355

<h3 class="method-name"><a href="#method-enable">enable</a></h3>

1356

<dl>

1357

<dt class="method-signature-label">Signature:</dt>

1358

<dd class="method-signature">.dialog( 'enable'

1359

1360

1361

1362

1363

1364

1365

1366

)</dd>

1367

</dl>

1368

</div>

1369

1370

<p>Enable the dialog.</p>

1371

</div>

1372

</li>

1373

1374

1375

1376

1377

<h3 class="method-name"><a href="#method-option">option</a></h3>

1378

<dl>

1379

<dt class="method-signature-label">Signature:</dt>

1380

<dd class="method-signature">.dialog( 'option'

1381

1382

, optionName

1383

1384

, <span class="optional">[</span>value<span class="optional">] </span>

1385

1386

1387

1388

)</dd>

1389

</dl>

1390

</div>

1391

1392

<p>Get or set any dialog option. If no value is specified, will act as a getter.</p>

1393

</div>

1394

</li>

1395

1396

1397

1398

1399

<h3 class="method-name"><a href="#method-close">close</a></h3>

1400

<dl>

1401

<dt class="method-signature-label">Signature:</dt>

1402

<dd class="method-signature">.dialog( 'close'

1403

1404

1405

1406

1407

1408

1409

1410

)</dd>

1411

</dl>

1412

</div>

1413

1414

<p>Close the dialog.</p>

1415

</div>

1416

</li>

1417

1418

1419

1420

1421

<h3 class="method-name"><a href="#method-isOpen">isOpen</a></h3>

1422

<dl>

1423

<dt class="method-signature-label">Signature:</dt>

1424

<dd class="method-signature">.dialog( 'isOpen'

1425

1426

1427

1428

1429

1430

1431

1432

)</dd>

1433

</dl>

1434

</div>

1435

1436

<p>Returns true if the dialog is currently open.</p>

1437

</div>

1438

</li>

1439

1440

1441

1442

1443

<h3 class="method-name"><a href="#method-moveToTop">moveToTop</a></h3>

1444

<dl>

1445

<dt class="method-signature-label">Signature:</dt>

1446

<dd class="method-signature">.dialog( 'moveToTop'

1447

1448

1449

1450

1451

1452

1453

1454

)</dd>

1455

</dl>

1456

</div>

1457

1458

<p>Move the dialog to the top of the dialogs stack.</p>

1459

</div>

1460

</li>

1461

1462

1463

1464

1465

1466

<dl>

1467

<dt class="method-signature-label">Signature:</dt>

1468

<dd class="method-signature">.dialog( 'open'

1469

1470

1471

1472

1473

1474

1475

1476

)</dd>

1477

</dl>

1478

</div>

1479

1480

<p>Open the dialog.</p>

1481

</div>

1482

</li>

1483

1484

</ul>

1485

</div>

1486

1487

<h2 class="top-header">Theming</h2>

1488

<p>The jQuery UI Dialog plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain.

1489

</p>

1490

<p>If a deeper level of customization is needed, there are widget-specific classes referenced within the ui.dialog.css stylesheet that can be modified. These classes are highlighed in bold below.

1491

</p>

1492

1493

<h3>Sample markup with jQuery UI CSS Framework classes</h3>

1494

<div class="<strong>ui-dialog</strong> ui-widget ui-widget-content ui-corner-all undefined ui-draggable ui-resizable"><br />

1495

   <div class="<strong>ui-dialog-titlebar</strong> ui-widget-header ui-corner-all ui-helper-clearfix"><br />

1496

      <span id="<strong>ui-dialog-title-dialog</strong>" class="ui-dialog-title">Dialog title</span><br />

1497

      <a class="<strong>ui-dialog-titlebar-close</strong> ui-corner-all" href="#"><span class="ui-icon ui-icon-closethick">close</span></a><br />

1498

   </div><br />

1499

   <div style="height: 200px; min-height: 109px; width: auto;" class="<strong>ui-dialog-content</strong> ui-widget-content" id="dialog"><br />

1500

      <p>Dialog content goes here.</p><br />

1501

   </div><br />

1502

</div><br />

1503

1504

1505

Note: This is a sample of markup generated by the dialog plugin, not markup you should use to create a dialog. The only markup needed for that is <div></div>.

1506

</strong>

1507

</p>

1508

1509

</div>

1510

</div>

1511

1512

</p><!--

1513

Pre-expand include size: 58797 bytes

1514

Post-expand include size: 99942 bytes

1515

Template argument size: 56593 bytes

1516

Maximum: 2097152 bytes

1517

-->

1518

1519

Older »