<div id="dialogs" data-dojo-type="dojox.mobile.View">

        <div id="dlg_message" data-dojo-type="dojox.mobile.SimpleDialog">
                <div class="mblSimpleDialogTitle">Information</div>
                <div class="mblSimpleDialogText">This is a sample dialog.</div>
                <button data-dojo-type="dojox.mobile.Button" class="mblSimpleDialogButton" style="width:100px;" onclick="hide('dlg_message')">OK</button>
        </div>

        <div id="dlg_confirm" data-dojo-type="dojox.mobile.SimpleDialog">
                <div class="mblSimpleDialogTitle">Rain Alert</div>
                <div class="mblSimpleDialogText">Do you have an umbrella?</div>
                <button data-dojo-type="dojox.mobile.Button" class="mblSimpleDialogButton" onclick="hide('dlg_confirm')">No</button>
                <button data-dojo-type="dojox.mobile.Button" class="mblSimpleDialogButton mblBlueButton" onclick="hide('dlg_confirm')">Yes</button>
        </div>
        
        <div id="dlg_login" data-dojo-type="dojox.mobile.SimpleDialog">
                <div class="mblSimpleDialogTitle">Mobile Community</div>
                <div class="mblSimpleDialogText">Enter your ID and Password</div>
                <input data-dojo-type="dojox.mobile.TextBox" class="mblSimpleDialogInput" type="text" data-dojo-props='selectOnClick:true, placeHolder:"ID"' style="margin-bottom: 0;" required>
                <input data-dojo-type="dojox.mobile.TextBox" class="mblSimpleDialogInput" type="password" data-dojo-props='selectOnClick:true, placeHolder:"Password"' style="margin-top: 0;" required>
                <button data-dojo-type="dojox.mobile.Button" class="mblSimpleDialogButton2l" onclick="hide('dlg_login')">Cancel</button>
                <button data-dojo-type="dojox.mobile.Button" class="mblSimpleDialogButton2r mblBlueButton" onclick="hide('dlg_login')">OK</button>
        </div>

        <div id="dlg_progress" data-dojo-type="dojox.mobile.SimpleDialog">
                <div class="mblSimpleDialogText">Please wait for 5 seconds.</div>
                <div class="mblSimpleDialogText" id="progress_indicator_container"></div>
                <button data-dojo-type="dojox.mobile.Button" class="mblSimpleDialogButton mblRedButton" onclick="hide_progress_indicator('dlg_progress')">Cancel</button>
        </div>

        <div id="dlg_volume" data-dojo-type="dojox.mobile.SimpleDialog">
                <div class="mblSimpleDialogTitle">Volume</div>
                <div class="mblSimpleDialogText">Ringtone</div>
                <input data-dojo-type="dojox.mobile.Slider" value="0" min="0" max="20" step="0.1" type="range" style="width:90%;">
                <div class="mblSimpleDialogText">Media</div>
                <input data-dojo-type="dojox.mobile.Slider" value="0" min="0" max="20" step="0.1" type="range" style="width:90%;">
                <div class="mblSimpleDialogText">Alarm</div>
                <input data-dojo-type="dojox.mobile.Slider" value="0" min="0" max="20" step="0.1" type="range" style="width:90%;">
                <button data-dojo-type="dojox.mobile.Button" class="mblSimpleDialogButton2l" onclick="hide('dlg_volume')">OK</button>
                <button data-dojo-type="dojox.mobile.Button" class="mblSimpleDialogButton2r" onclick="hide('dlg_volume')">Cancel</button>
        </div>

        <div id="dlg_select" data-dojo-type="dojox.mobile.SimpleDialog">
                <div class="mblSimpleDialogTitle">Animation</div>
                <ul data-dojo-type="dojox.mobile.EdgeToEdgeList" data-dojo-props='select:"single"'>
                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='checkClass:"mblDomButtonSilverCircleGreenButton", uncheckClass:"mblDomButtonSilverCircleGrayButton"'>
                                No animations
                        </li>
                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='checkClass:"mblDomButtonSilverCircleGreenButton", uncheckClass:"mblDomButtonSilverCircleGrayButton"'>
                                Some animations
                        </li>
                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='checkClass:"mblDomButtonSilverCircleGreenButton", uncheckClass:"mblDomButtonSilverCircleGrayButton", checked:true'>
                                All animations
                        </li>
                </ul>
                <button data-dojo-type="dojox.mobile.Button" class="mblSimpleDialogButton" style="width:60%;" onclick="hide('dlg_select')">Cancel</button>
        </div>

        <div id="view" data-dojo-type="dojox.mobile.View" data-dojo-props='selected:true'>
                <div data-dojo-type="dojox.mobile.RoundRect" data-dojo-props='shadow:true'>
                        Message Box <button onclick="show('dlg_message')">Show Dialog</button>
                </div>
                <div data-dojo-type="dojox.mobile.RoundRect" data-dojo-props='shadow:true'>
                        Confirmation Dialog <button onclick="show('dlg_confirm')">Show Dialog</button>
                </div>
                <div data-dojo-type="dojox.mobile.RoundRect" data-dojo-props='shadow:true'>
                        Login Dialog <button onclick="show('dlg_login')">Show Dialog</button>
                </div>
                <div data-dojo-type="dojox.mobile.RoundRect" data-dojo-props='shadow:true'>
                        Progress Indicator <button onclick="show_progress_indicator('dlg_progress','progress_indicator_container')">Show Dialog</button>
                </div>
                <div data-dojo-type="dojox.mobile.RoundRect" data-dojo-props='shadow:true'>
                        Volume Control <button onclick="show('dlg_volume')">Show Dialog</button>
                </div>
                <div data-dojo-type="dojox.mobile.RoundRect" data-dojo-props='shadow:true'>
                        Selectable List <button onclick="show('dlg_select')">Show Dialog</button>
                </div>
        </div>

</div>
