/lib/style/common/jquery/jqueryui/development-bundle/docs/dialog.html - Annotate - Metacat - Ecoinformatics Redmine

5703

leinfelder

<ul class="UIAPIPlugin-toc">

3

<li><a href="#overview">Overview</a></li>

4

<li><a href="#options">Options</a></li>

5

<li><a href="#events">Events</a></li>

6

<li><a href="#methods">Methods</a></li>

7

<li><a href="#theming">Theming</a></li>

8

</ul>

9

<div class="UIAPIPlugin">

10

  <h1>jQuery UI Dialog</h1>

11

  <div id="overview">

12

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

13

    <div id="overview-main">

14

        <p>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>

15

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

16

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

17

<p>A call to <code>$(foo).dialog()</code> will initialize a dialog instance and will auto-open the dialog by default. If you want to reuse a dialog, the easiest way is to disable the "auto-open" option with: <code>$(foo).dialog({ autoOpen: false })</code> and open it with <code>$(foo).dialog('open')</code>. To close it, use <code>$(foo).dialog('close')</code>. A more in-depth explanation with a full demo is available on <a href="http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/" class="external text" title="http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/">the Nemikor blog</a>.</p>

18

    </div>

19

    <div id="overview-dependencies">

20

        <h3>Dependencies</h3>

21

        <ul>

22

<li>UI Core</li>

23

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

24

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

25

</ul>

26

    </div>

27

    <div id="overview-example">

28

        <h3>Example</h3>

29

        <div id="overview-example" class="example">

30

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

31

<p><div id="demo" class="tabs-container" rel="300">

32

A simple jQuery UI Dialog.<br />

33

</p>

34

<pre>$(&quot;#dialog&quot;).dialog();

35

</pre>

36

<p></div><div id="source" class="tabs-container">

37

</p>

38

<pre>&lt;!DOCTYPE html&gt;

39

&lt;html&gt;

40

&lt;head&gt;

41

  &lt;link href=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;

42

  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js&quot;&gt;&lt;/script&gt;

43

  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js&quot;&gt;&lt;/script&gt;

44

45

  &lt;script&gt;

46

  $(document).ready(function() {

47

    $(&quot;#dialog&quot;).dialog();

48

});

49

  &lt;/script&gt;

50

&lt;/head&gt;

51

&lt;body style="font-size:62.5%;"&gt;

52

53

&lt;div id=&quot;dialog&quot; title=&quot;Dialog Title&quot;&gt;I'm in a dialog&lt;/div&gt;

54

55

&lt;/body&gt;

56

&lt;/html&gt;

57

</pre>

58

<p></div>

59

</p><p></div>

60

    </div>

61

  </div>

62

  <div id="options">

63

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

64

    <ul class="options-list">

65

66

<li class="option" id="option-disabled">

67

  <div class="option-header">

68

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

69

    <dl>

70

      <dt class="option-type-label">Type:</dt>

71

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

72

73

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

74

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

75

76

    </dl>

77

  </div>

78

  <div class="option-description">

79

    <p>Disables (true) or enables (false) the dialog. Can be set when initialising (first creating) the dialog.</p>

80

  </div>

81

  <div class="option-examples">

82

    <h4>Code examples</h4>

83

    <dl class="option-examples-list">

84

85

<dt>

86

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

87

</dt>

88

<dd>

89

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

90

</dd>

91

92

93

<dt>

94

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

95

</dt>

96

<dd>

97

<pre><code>//getter

98

var disabled = $( ".selector" ).dialog( "option", "disabled" );

99

//setter

100

$( ".selector" ).dialog( "option", "disabled", true );</code></pre>

101

</dd>

102

103

    </dl>

104

  </div>

105

</li>

106

107

108

<li class="option" id="option-autoOpen">

109

  <div class="option-header">

110

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

111

    <dl>

112

      <dt class="option-type-label">Type:</dt>

113

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

114

115

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

116

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

117

118

    </dl>

119

  </div>

120

  <div class="option-description">

121

    <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>

122

  </div>

123

  <div class="option-examples">

124

    <h4>Code examples</h4>

125

    <dl class="option-examples-list">

126

127

<dt>

128

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

129

</dt>

130

<dd>

131

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

132

</dd>

133

134

135

<dt>

136

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

137

</dt>

138

<dd>

139

<pre><code>//getter

140

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

141

//setter

142

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

143

</dd>

144

145

    </dl>

146

  </div>

147

</li>

148

149

150

<li class="option" id="option-buttons">

151

  <div class="option-header">

152

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

153

    <dl>

154

      <dt class="option-type-label">Type:</dt>

155

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

156

157

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

158

        <dd class="option-default">{ }</dd>

159

160

    </dl>

161

  </div>

162

  <div class="option-description">

163

    <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.

164

</p>

165

  </div>

166

  <div class="option-examples">

167

    <h4>Code examples</h4>

168

    <dl class="option-examples-list">

169

170

<dt>

171

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

172

</dt>

173

<dd>

174

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

175

</dd>

176

177

178

<dt>

179

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

180

</dt>

181

<dd>

182

<pre><code>//getter

183

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

184

//setter

185

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

186

</dd>

187

188

    </dl>

189

  </div>

190

</li>

191

192

193

<li class="option" id="option-buttons">

194

  <div class="option-header">

195

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

196

    <dl>

197

      <dt class="option-type-label">Type:</dt>

198

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

199

200

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

201

        <dd class="option-default">[ ]</dd>

202

203

    </dl>

204

  </div>

205

  <div class="option-description">

206

    <p>Specifies which buttons should be displayed on the dialog. Each element of the array must be an Object defining the properties to set on the button.

207

</p>

208

  </div>

209

  <div class="option-examples">

210

    <h4>Code examples</h4>

211

    <dl class="option-examples-list">

212

213

<dt>

214

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

215

</dt>

216

<dd>

217

<pre><code>$( ".selector" ).dialog({ buttons: [

218

219

        text: &quot;Ok&quot;,

220

        click: function() { $(this).dialog(&quot;close&quot;); }

221

222

] });</code></pre>

223

</dd>

224

225

226

<dt>

227

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

228

</dt>

229

<dd>

230

<pre><code>//getter

231

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

232

//setter

233

$( ".selector" ).dialog( "option", "buttons", [

234

235

        text: &quot;Ok&quot;,

236

        click: function() { $(this).dialog(&quot;close&quot;); }

237

238

] );</code></pre>

239

</dd>

240

241

    </dl>

242

  </div>

243

</li>

244

245

246

<li class="option" id="option-closeOnEscape">

247

  <div class="option-header">

248

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

249

    <dl>

250

      <dt class="option-type-label">Type:</dt>

251

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

252

253

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

254

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

255

256

    </dl>

257

  </div>

258

  <div class="option-description">

259

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

260

  </div>

261

  <div class="option-examples">

262

    <h4>Code examples</h4>

263

    <dl class="option-examples-list">

264

265

<dt>

266

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

267

</dt>

268

<dd>

269

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

270

</dd>

271

272

273

<dt>

274

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

275

</dt>

276

<dd>

277

<pre><code>//getter

278

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

279

//setter

280

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

281

</dd>

282

283

    </dl>

284

  </div>

285

</li>

286

287

288

<li class="option" id="option-closeText">

289

  <div class="option-header">

290

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

291

    <dl>

292

      <dt class="option-type-label">Type:</dt>

293

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

294

295

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

296

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

297

298

    </dl>

299

  </div>

300

  <div class="option-description">

301

    <p>Specifies the text for the close button. Note that the close text is visibly hidden when using a standard theme.</p>

302

  </div>

303

  <div class="option-examples">

304

    <h4>Code examples</h4>

305

    <dl class="option-examples-list">

306

307

<dt>

308

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

309

</dt>

310

<dd>

311

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

312

</dd>

313

314

315

<dt>

316

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

317

</dt>

318

<dd>

319

<pre><code>//getter

320

var closeText = $( ".selector" ).dialog( "option", "closeText" );

321

//setter

322

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

323

</dd>

324

325

    </dl>

326

  </div>

327

</li>

328

329

330

<li class="option" id="option-dialogClass">

331

  <div class="option-header">

332

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

333

    <dl>

334

      <dt class="option-type-label">Type:</dt>

335

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

336

337

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

338

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

339

340

    </dl>

341

  </div>

342

  <div class="option-description">

343

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

344

  </div>

345

  <div class="option-examples">

346

    <h4>Code examples</h4>

347

    <dl class="option-examples-list">

348

349

<dt>

350

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

351

</dt>

352

<dd>

353

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

354

</dd>

355

356

357

<dt>

358

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

359

</dt>

360

<dd>

361

<pre><code>//getter

362

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

363

//setter

364

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

365

</dd>

366

367

    </dl>

368

  </div>

369

</li>

370

371

372

<li class="option" id="option-draggable">

373

  <div class="option-header">

374

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

375

    <dl>

376

      <dt class="option-type-label">Type:</dt>

377

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

378

379

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

380

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

381

382

    </dl>

383

  </div>

384

  <div class="option-description">

385

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

386

  </div>

387

  <div class="option-examples">

388

    <h4>Code examples</h4>

389

    <dl class="option-examples-list">

390

391

<dt>

392

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

393

</dt>

394

<dd>

395

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

396

</dd>

397

398

399

<dt>

400

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

401

</dt>

402

<dd>

403

<pre><code>//getter

404

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

405

//setter

406

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

407

</dd>

408

409

    </dl>

410

  </div>

411

</li>

412

413

414

<li class="option" id="option-height">

415

  <div class="option-header">

416

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

417

    <dl>

418

      <dt class="option-type-label">Type:</dt>

419

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

420

421

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

422

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

423

424

    </dl>

425

  </div>

426

  <div class="option-description">

427

    <p>The height of the dialog, in pixels. Specifying 'auto' is also supported to make the dialog adjust based on its content.</p>

428

  </div>

429

  <div class="option-examples">

430

    <h4>Code examples</h4>

431

    <dl class="option-examples-list">

432

433

<dt>

434

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

435

</dt>

436

<dd>

437

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

438

</dd>

439

440

441

<dt>

442

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

443

</dt>

444

<dd>

445

<pre><code>//getter

446

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

447

//setter

448

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

449

</dd>

450

451

    </dl>

452

  </div>

453

</li>

454

455

456

<li class="option" id="option-hide">

457

  <div class="option-header">

458

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

459

    <dl>

460

      <dt class="option-type-label">Type:</dt>

461

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

462

463

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

464

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

465

466

    </dl>

467

  </div>

468

  <div class="option-description">

469

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

470

  </div>

471

  <div class="option-examples">

472

    <h4>Code examples</h4>

473

    <dl class="option-examples-list">

474

475

<dt>

476

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

477

</dt>

478

<dd>

479

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

480

</dd>

481

482

483

<dt>

484

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

485

</dt>

486

<dd>

487

<pre><code>//getter

488

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

489

//setter

490

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

491

</dd>

492

493

    </dl>

494

  </div>

495

</li>

496

497

498

<li class="option" id="option-maxHeight">

499

  <div class="option-header">

500

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

501

    <dl>

502

      <dt class="option-type-label">Type:</dt>

503

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

504

505

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

506

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

507

508

    </dl>

509

  </div>

510

  <div class="option-description">

511

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

512

  </div>

513

  <div class="option-examples">

514

    <h4>Code examples</h4>

515

    <dl class="option-examples-list">

516

517

<dt>

518

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

519

</dt>

520

<dd>

521

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

522

</dd>

523

524

525

<dt>

526

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

527

</dt>

528

<dd>

529

<pre><code>//getter

530

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

531

//setter

532

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

533

</dd>

534

535

    </dl>

536

  </div>

537

</li>

538

539

540

<li class="option" id="option-maxWidth">

541

  <div class="option-header">

542

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

543

    <dl>

544

      <dt class="option-type-label">Type:</dt>

545

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

546

547

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

548

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

549

550

    </dl>

551

  </div>

552

  <div class="option-description">

553

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

554

  </div>

555

  <div class="option-examples">

556

    <h4>Code examples</h4>

557

    <dl class="option-examples-list">

558

559

<dt>

560

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

561

</dt>

562

<dd>

563

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

564

</dd>

565

566

567

<dt>

568

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

569

</dt>

570

<dd>

571

<pre><code>//getter

572

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

573

//setter

574

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

575

</dd>

576

577

    </dl>

578

  </div>

579

</li>

580

581

582

<li class="option" id="option-minHeight">

583

  <div class="option-header">

584

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

585

    <dl>

586

      <dt class="option-type-label">Type:</dt>

587

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

588

589

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

590

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

591

592

    </dl>

593

  </div>

594

  <div class="option-description">

595

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

596

  </div>

597

  <div class="option-examples">

598

    <h4>Code examples</h4>

599

    <dl class="option-examples-list">

600

601

<dt>

602

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

603

</dt>

604

<dd>

605

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

606

</dd>

607

608

609

<dt>

610

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

611

</dt>

612

<dd>

613

<pre><code>//getter

614

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

615

//setter

616

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

617

</dd>

618

619

    </dl>

620

  </div>

621

</li>

622

623

624

<li class="option" id="option-minWidth">

625

  <div class="option-header">

626

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

627

    <dl>

628

      <dt class="option-type-label">Type:</dt>

629

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

630

631

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

632

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

633

634

    </dl>

635

  </div>

636

  <div class="option-description">

637

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

638

  </div>

639

  <div class="option-examples">

640

    <h4>Code examples</h4>

641

    <dl class="option-examples-list">

642

643

<dt>

644

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

645

</dt>

646

<dd>

647

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

648

</dd>

649

650

651

<dt>

652

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

653

</dt>

654

<dd>

655

<pre><code>//getter

656

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

657

//setter

658

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

659

</dd>

660

661

    </dl>

662

  </div>

663

</li>

664

665

666

<li class="option" id="option-modal">

667

  <div class="option-header">

668

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

669

    <dl>

670

      <dt class="option-type-label">Type:</dt>

671

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

672

673

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

674

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

675

676

    </dl>

677

  </div>

678

  <div class="option-description">

679

    <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>

680

  </div>

681

  <div class="option-examples">

682

    <h4>Code examples</h4>

683

    <dl class="option-examples-list">

684

685

<dt>

686

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

687

</dt>

688

<dd>

689

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

690

</dd>

691

692

693

<dt>

694

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

695

</dt>

696

<dd>

697

<pre><code>//getter

698

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

699

//setter

700

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

701

</dd>

702

703

    </dl>

704

  </div>

705

</li>

706

707

708

<li class="option" id="option-position">

709

  <div class="option-header">

710

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

711

    <dl>

712

      <dt class="option-type-label">Type:</dt>

713

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

714

715

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

716

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

717

718

    </dl>

719

  </div>

720

  <div class="option-description">

721

    <p>Specifies where the dialog should be displayed. Possible values: <br />1) a single string representing position within viewport: 'center', 'left', 'right', 'top', 'bottom'. <br />2) an array containing an <em>x,y</em> coordinate pair in pixel offset from left, top corner of viewport (e.g. [350,100]) <br />3) an array containing <em>x,y</em> position string values (e.g. ['right','top'] for top right corner).</p>

722

  </div>

723

  <div class="option-examples">

724

    <h4>Code examples</h4>

725

    <dl class="option-examples-list">

726

727

<dt>

728

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

729

</dt>

730

<dd>

731

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

732

</dd>

733

734

735

<dt>

736

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

737

</dt>

738

<dd>

739

<pre><code>//getter

740

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

741

//setter

742

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

743

</dd>

744

745

    </dl>

746

  </div>

747

</li>

748

749

750

<li class="option" id="option-resizable">

751

  <div class="option-header">

752

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

753

    <dl>

754

      <dt class="option-type-label">Type:</dt>

755

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

756

757

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

758

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

759

760

    </dl>

761

  </div>

762

  <div class="option-description">

763

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

764

  </div>

765

  <div class="option-examples">

766

    <h4>Code examples</h4>

767

    <dl class="option-examples-list">

768

769

<dt>

770

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

771

</dt>

772

<dd>

773

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

774

</dd>

775

776

777

<dt>

778

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

779

</dt>

780

<dd>

781

<pre><code>//getter

782

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

783

//setter

784

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

785

</dd>

786

787

    </dl>

788

  </div>

789

</li>

790

791

792

<li class="option" id="option-show">

793

  <div class="option-header">

794

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

795

    <dl>

796

      <dt class="option-type-label">Type:</dt>

797

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

798

799

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

800

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

801

802

    </dl>

803

  </div>

804

  <div class="option-description">

805

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

806

  </div>

807

  <div class="option-examples">

808

    <h4>Code examples</h4>

809

    <dl class="option-examples-list">

810

811

<dt>

812

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

813

</dt>

814

<dd>

815

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

816

</dd>

817

818

819

<dt>

820

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

821

</dt>

822

<dd>

823

<pre><code>//getter

824

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

825

//setter

826

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

827

</dd>

828

829

    </dl>

830

  </div>

831

</li>

832

833

834

<li class="option" id="option-stack">

835

  <div class="option-header">

836

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

837

    <dl>

838

      <dt class="option-type-label">Type:</dt>

839

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

840

841

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

842

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

843

844

    </dl>

845

  </div>

846

  <div class="option-description">

847

    <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>

848

  </div>

849

  <div class="option-examples">

850

    <h4>Code examples</h4>

851

    <dl class="option-examples-list">

852

853

<dt>

854

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

855

</dt>

856

<dd>

857

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

858

</dd>

859

860

861

<dt>

862

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

863

</dt>

864

<dd>

865

<pre><code>//getter

866

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

867

//setter

868

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

869

</dd>

870

871

    </dl>

872

  </div>

873

</li>

874

875

876

<li class="option" id="option-title">

877

  <div class="option-header">

878

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

879

    <dl>

880

      <dt class="option-type-label">Type:</dt>

881

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

882

883

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

884

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

885

886

    </dl>

887

  </div>

888

  <div class="option-description">

889

    <p>Specifies the title of the dialog. Any valid HTML may be set as the title. The title can also be specified by the title attribute on the dialog source element.</p>

890

  </div>

891

  <div class="option-examples">

892

    <h4>Code examples</h4>

893

    <dl class="option-examples-list">

894

895

<dt>

896

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

897

</dt>

898

<dd>

899

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

900

</dd>

901

902

903

<dt>

904

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

905

</dt>

906

<dd>

907

<pre><code>//getter

908

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

909

//setter

910

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

911

</dd>

912

913

    </dl>

914

  </div>

915

</li>

916

917

918

<li class="option" id="option-width">

919

  <div class="option-header">

920

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

921

    <dl>

922

      <dt class="option-type-label">Type:</dt>

923

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

924

925

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

926

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

927

928

    </dl>

929

  </div>

930

  <div class="option-description">

931

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

932

  </div>

933

  <div class="option-examples">

934

    <h4>Code examples</h4>

935

    <dl class="option-examples-list">

936

937

<dt>

938

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

939

</dt>

940

<dd>

941

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

942

</dd>

943

944

945

<dt>

946

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

947

</dt>

948

<dd>

949

<pre><code>//getter

950

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

951

//setter

952

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

953

</dd>

954

955

    </dl>

956

  </div>

957

</li>

958

959

960

<li class="option" id="option-zIndex">

961

  <div class="option-header">

962

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

963

    <dl>

964

      <dt class="option-type-label">Type:</dt>

965

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

966

967

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

968

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

969

970

    </dl>

971

  </div>

972

  <div class="option-description">

973

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

974

  </div>

975

  <div class="option-examples">

976

    <h4>Code examples</h4>

977

    <dl class="option-examples-list">

978

979

<dt>

980

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

981

</dt>

982

<dd>

983

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

984

</dd>

985

986

987

<dt>

988

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

989

</dt>

990

<dd>

991

<pre><code>//getter

992

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

993

//setter

994

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

995

</dd>

996

997

    </dl>

998

  </div>

999

</li>

1000

1001

    </ul>

1002

  </div>

1003

  <div id="events">

1004

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

1005

    <ul class="events-list">

1006

1007

<li class="event" id="event-beforeClose">

1008

  <div class="event-header">

1009

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

1010

    <dl>

1011

      <dt class="event-type-label">Type:</dt>

1012

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

1013

    </dl>

1014

  </div>

1015

  <div class="event-description">

1016

    <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>

1017

  </div>

1018

  <div class="event-examples">

1019

    <h4>Code examples</h4>

1020

    <dl class="event-examples-list">

1021

1022

<dt>

1023

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

1024

</dt>

1025

<dd>

1026

<pre><code>$( &quot;.selector&quot; ).dialog({

1027

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

1028

});</code></pre>

1029

</dd>

1030

1031

1032

<dt>

1033

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

1034

</dt>

1035

<dd>

1036

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

1037

...

1038

});</code></pre>

1039

</dd>

1040

1041

    </dl>

1042

  </div>

1043

</li>

1044

1045

1046

<li class="event" id="event-open">

1047

  <div class="event-header">

1048

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

1049

    <dl>

1050

      <dt class="event-type-label">Type:</dt>

1051

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

1052

    </dl>

1053

  </div>

1054

  <div class="event-description">

1055

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

1056

  </div>

1057

  <div class="event-examples">

1058

    <h4>Code examples</h4>

1059

    <dl class="event-examples-list">

1060

1061

<dt>

1062

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

1063

</dt>

1064

<dd>

1065

<pre><code>$( &quot;.selector&quot; ).dialog({

1066

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

1067

});</code></pre>

1068

</dd>

1069

1070

1071

<dt>

1072

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

1073

</dt>

1074

<dd>

1075

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

1076

...

1077

});</code></pre>

1078

</dd>

1079

1080

    </dl>

1081

  </div>

1082

</li>

1083

1084

1085

<li class="event" id="event-focus">

1086

  <div class="event-header">

1087

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

1088

    <dl>

1089

      <dt class="event-type-label">Type:</dt>

1090

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

1091

    </dl>

1092

  </div>

1093

  <div class="event-description">

1094

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

1095

  </div>

1096

  <div class="event-examples">

1097

    <h4>Code examples</h4>

1098

    <dl class="event-examples-list">

1099

1100

<dt>

1101

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

1102

</dt>

1103

<dd>

1104

<pre><code>$( &quot;.selector&quot; ).dialog({

1105

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

1106

});</code></pre>

1107

</dd>

1108

1109

1110

<dt>

1111

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

1112

</dt>

1113

<dd>

1114

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

1115

...

1116

});</code></pre>

1117

</dd>

1118

1119

    </dl>

1120

  </div>

1121

</li>

1122

1123

1124

<li class="event" id="event-dragStart">

1125

  <div class="event-header">

1126

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

1127

    <dl>

1128

      <dt class="event-type-label">Type:</dt>

1129

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

1130

    </dl>

1131

  </div>

1132

  <div class="event-description">

1133

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

1134

  </div>

1135

  <div class="event-examples">

1136

    <h4>Code examples</h4>

1137

    <dl class="event-examples-list">

1138

1139

<dt>

1140

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

1141

</dt>

1142

<dd>

1143

<pre><code>$( &quot;.selector&quot; ).dialog({

1144

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

1145

});</code></pre>

1146

</dd>

1147

1148

1149

<dt>

1150

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

1151

</dt>

1152

<dd>

1153

<pre><code>$( &quot;.selector&quot; ).bind( &quot;dialogdragstart&quot;, function(event, ui) {

1154

...

1155

});</code></pre>

1156

</dd>

1157

1158

    </dl>

1159

  </div>

1160

</li>

1161

1162

1163

<li class="event" id="event-drag">

1164

  <div class="event-header">

1165

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

1166

    <dl>

1167

      <dt class="event-type-label">Type:</dt>

1168

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

1169

    </dl>

1170

  </div>

1171

  <div class="event-description">

1172

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

1173

  </div>

1174

  <div class="event-examples">

1175

    <h4>Code examples</h4>

1176

    <dl class="event-examples-list">

1177

1178

<dt>

1179

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

1180

</dt>

1181

<dd>

1182

<pre><code>$( &quot;.selector&quot; ).dialog({

1183

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

1184

});</code></pre>

1185

</dd>

1186

1187

1188

<dt>

1189

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

1190

</dt>

1191

<dd>

1192

<pre><code>$( &quot;.selector&quot; ).bind( &quot;dialogdrag&quot;, function(event, ui) {

1193

...

1194

});</code></pre>

1195

</dd>

1196

1197

    </dl>

1198

  </div>

1199

</li>

1200

1201

1202

<li class="event" id="event-dragStop">

1203

  <div class="event-header">

1204

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

1205

    <dl>

1206

      <dt class="event-type-label">Type:</dt>

1207

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

1208

    </dl>

1209

  </div>

1210

  <div class="event-description">

1211

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

1212

  </div>

1213

  <div class="event-examples">

1214

    <h4>Code examples</h4>

1215

    <dl class="event-examples-list">

1216

1217

<dt>

1218

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

1219

</dt>

1220

<dd>

1221

<pre><code>$( &quot;.selector&quot; ).dialog({

1222

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

1223

});</code></pre>

1224

</dd>

1225

1226

1227

<dt>

1228

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

1229

</dt>

1230

<dd>

1231

<pre><code>$( &quot;.selector&quot; ).bind( &quot;dialogdragstop&quot;, function(event, ui) {

1232

...

1233

});</code></pre>

1234

</dd>

1235

1236

    </dl>

1237

  </div>

1238

</li>

1239

1240

1241

<li class="event" id="event-resizeStart">

1242

  <div class="event-header">

1243

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

1244

    <dl>

1245

      <dt class="event-type-label">Type:</dt>

1246

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

1247

    </dl>

1248

  </div>

1249

  <div class="event-description">

1250

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

1251

  </div>

1252

  <div class="event-examples">

1253

    <h4>Code examples</h4>

1254

    <dl class="event-examples-list">

1255

1256

<dt>

1257

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

1258

</dt>

1259

<dd>

1260

<pre><code>$( &quot;.selector&quot; ).dialog({

1261

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

1262

});</code></pre>

1263

</dd>

1264

1265

1266

<dt>

1267

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

1268

</dt>

1269

<dd>

1270

<pre><code>$( &quot;.selector&quot; ).bind( &quot;dialogresizestart&quot;, function(event, ui) {

1271

...

1272

});</code></pre>

1273

</dd>

1274

1275

    </dl>

1276

  </div>

1277

</li>

1278

1279

1280

<li class="event" id="event-resize">

1281

  <div class="event-header">

1282

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

1283

    <dl>

1284

      <dt class="event-type-label">Type:</dt>

1285

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

1286

    </dl>

1287

  </div>

1288

  <div class="event-description">

1289

    <p>This event is triggered when the dialog is resized. <a href="http://www.jsfiddle.net/Jp7TM/18/" class="external text" title="http://www.jsfiddle.net/Jp7TM/18/">demo</a></p>

1290

  </div>

1291

  <div class="event-examples">

1292

    <h4>Code examples</h4>

1293

    <dl class="event-examples-list">

1294

1295

<dt>

1296

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

1297

</dt>

1298

<dd>

1299

<pre><code>$( &quot;.selector&quot; ).dialog({

1300

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

1301

});</code></pre>

1302

</dd>

1303

1304

1305

<dt>

1306

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

1307

</dt>

1308

<dd>

1309

<pre><code>$( &quot;.selector&quot; ).bind( &quot;dialogresize&quot;, function(event, ui) {

1310

...

1311

});</code></pre>

1312

</dd>

1313

1314

    </dl>

1315

  </div>

1316

</li>

1317

1318

1319

<li class="event" id="event-resizeStop">

1320

  <div class="event-header">

1321

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

1322

    <dl>

1323

      <dt class="event-type-label">Type:</dt>

1324

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

1325

    </dl>

1326

  </div>

1327

  <div class="event-description">

1328

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

1329

  </div>

1330

  <div class="event-examples">

1331

    <h4>Code examples</h4>

1332

    <dl class="event-examples-list">

1333

1334

<dt>

1335

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

1336

</dt>

1337

<dd>

1338

<pre><code>$( &quot;.selector&quot; ).dialog({

1339

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

1340

});</code></pre>

1341

</dd>

1342

1343

1344

<dt>

1345

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

1346

</dt>

1347

<dd>

1348

<pre><code>$( &quot;.selector&quot; ).bind( &quot;dialogresizestop&quot;, function(event, ui) {

1349

...

1350

});</code></pre>

1351

</dd>

1352

1353

    </dl>

1354

  </div>

1355

</li>

1356

1357

1358

<li class="event" id="event-close">

1359

  <div class="event-header">

1360

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

1361

    <dl>

1362

      <dt class="event-type-label">Type:</dt>

1363

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

1364

    </dl>

1365

  </div>

1366

  <div class="event-description">

1367

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

1368

  </div>

1369

  <div class="event-examples">

1370

    <h4>Code examples</h4>

1371

    <dl class="event-examples-list">

1372

1373

<dt>

1374

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

1375

</dt>

1376

<dd>

1377

<pre><code>$( &quot;.selector&quot; ).dialog({

1378

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

1379

});</code></pre>

1380

</dd>

1381

1382

1383

<dt>

1384

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

1385

</dt>

1386

<dd>

1387

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

1388

...

1389

});</code></pre>

1390

</dd>

1391

1392

    </dl>

1393

  </div>

1394

</li>

1395

1396

    </ul>

1397

  </div>

1398

  <div id="methods">

1399

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

1400

    <ul class="methods-list">

1401

1402

<li class="method" id="method-destroy">

1403

  <div class="method-header">

1404

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

1405

    <dl>

1406

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

1407

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

)</dd>

1416

    </dl>

1417

  </div>

1418

  <div class="method-description">

1419

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

1420

  </div>

1421

</li>

1422

1423

1424

<li class="method" id="method-disable">

1425

  <div class="method-header">

1426

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

1427

    <dl>

1428

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

1429

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

)</dd>

1438

    </dl>

1439

  </div>

1440

  <div class="method-description">

1441

    <p>Disable the dialog.</p>

1442

  </div>

1443

</li>

1444

1445

1446

<li class="method" id="method-enable">

1447

  <div class="method-header">

1448

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

1449

    <dl>

1450

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

1451

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

)</dd>

1460

    </dl>

1461

  </div>

1462

  <div class="method-description">

1463

    <p>Enable the dialog.</p>

1464

  </div>

1465

</li>

1466

1467

1468

<li class="method" id="method-option">

1469

  <div class="method-header">

1470

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

1471

    <dl>

1472

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

1473

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

1474

1475

, optionName

1476

1477

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

)</dd>

1482

    </dl>

1483

  </div>

1484

  <div class="method-description">

1485

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

1486

  </div>

1487

</li>

1488

1489

1490

<li class="method" id="method-option">

1491

  <div class="method-header">

1492

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

1493

    <dl>

1494

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

1495

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

1496

1497

, options

)</dd>

1504

    </dl>

1505

  </div>

1506

  <div class="method-description">

1507

    <p>Set multiple dialog options at once by providing an options object.</p>

1508

  </div>

1509

</li>

1510

1511

1512

<li class="method" id="method-widget">

1513

  <div class="method-header">

1514

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

1515

    <dl>

1516

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

1517

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

)</dd>

1526

    </dl>

1527

  </div>

1528

  <div class="method-description">

1529

    <p>Returns the .ui-dialog element.</p>

1530

  </div>

1531

</li>

1532

1533

1534

<li class="method" id="method-close">

1535

  <div class="method-header">

1536

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

1537

    <dl>

1538

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

1539

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

)</dd>

1548

    </dl>

1549

  </div>

1550

  <div class="method-description">

1551

    <p>Close the dialog.</p>

1552

  </div>

1553

</li>

1554

1555

1556

<li class="method" id="method-isOpen">

1557

  <div class="method-header">

1558

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

1559

    <dl>

1560

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

1561

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

)</dd>

1570

    </dl>

1571

  </div>

1572

  <div class="method-description">

1573

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

1574

  </div>

1575

</li>

1576

1577

1578

<li class="method" id="method-moveToTop">

1579

  <div class="method-header">

1580

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

1581

    <dl>

1582

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

1583

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

)</dd>

1592

    </dl>

1593

  </div>

1594

  <div class="method-description">

1595

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

1596

  </div>

1597

</li>

1598

1599

1600

<li class="method" id="method-open">

1601

  <div class="method-header">

1602

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

1603

    <dl>

1604

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

1605

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

)</dd>

1614

    </dl>

1615

  </div>

1616

  <div class="method-description">

1617

    <p>Open the dialog.</p>

1618

  </div>

1619

</li>

1620

1621

    </ul>

1622

  </div>

1623

  <div id="theming">

1624

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

1625

    <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.

1626

</p>

1627

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

1628

</p>

1629

1630

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

1631

  &lt;div class=&quot;<strong>ui-dialog</strong> ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable&quot;&gt;<br />

1632

&nbsp;&nbsp;&nbsp;&lt;div class=&quot;<strong>ui-dialog-titlebar</strong> ui-widget-header ui-corner-all ui-helper-clearfix&quot;&gt;<br />

1633

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span id=&quot;<strong>ui-dialog-title-dialog</strong>&quot; class=&quot;ui-dialog-title&quot;&gt;Dialog title&lt;/span&gt;<br />

1634

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a class=&quot;<strong>ui-dialog-titlebar-close</strong> ui-corner-all&quot; href=&quot;#&quot;&gt;&lt;span class=&quot;ui-icon ui-icon-closethick&quot;&gt;close&lt;/span&gt;&lt;/a&gt;<br />

1635

&nbsp;&nbsp;&nbsp;&lt;/div&gt;<br />

1636

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

1637

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Dialog content goes here.&lt;/p&gt;<br />

1638

&nbsp;&nbsp;&nbsp;&lt;/div&gt;<br />

1639

&lt;/div&gt;<br />

1640

  <p class="theme-note">

1641

    <strong>

1642

      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 &lt;div&gt;&lt;/div&gt;.

1643

    </strong>

1644

  </p>

1645

1646

  </div>

1647

</div>

1648

1649

</p><!--

1650

Pre-expand include size: 65074 bytes

1651

Post-expand include size: 110285 bytes

1652

Template argument size: 61376 bytes

1653

Maximum: 2097152 bytes

1654

-->

1655

1656

<!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:3775-1!1!0!!en!2 and timestamp 20101024203740 -->

Project

General

Profile

Metacat

Project

General

Profile

Metacat

metacat/lib/style/common/jquery/jqueryui/development-bundle/docs/dialog.html @ 7886