jquery develop sample and source

1.jquery mobile inline radio box

1.1 create horizontal style:

<fieldset data-role="controlgroup" data-mini="true" data-inline="true" data-type="horizontal" style="display:inline-block;">
                    <input type="radio" name="rsscat_type" value="System" checked="checked" id="rsscat_type_system" /><label class="pkAutoTranslactor" for="rsscat_type_system">System</label>
                    <input type="radio" name="rsscat_type" value="My" id="rsscat_type_my" disabled="disabled" /><label class="pkAutoTranslactor" for="rsscat_type_my">Login</label>
                </fieldset>

1.2 create vert style:

<fieldset data-role="controlgroup" data-mini="true">
    <input type="radio" name="radio-mini-rsslang" id="rss-radio-mini-en-US" value="en-US" checked="checked" />
    <label for="rss-radio-mini-en-US">English</label>
    <input type="radio" name="radio-mini-rsslang" id="rss-radio-mini-zh-CN" value="zh-CN" />
    <label for="rss-radio-mini-zh-CN">简体中文</label>
</fieldset>

1.3 get radio group value:

var rsslang = $("input[name=radio-mini-rsslang]:checked").val();

1.4 change event hander:

$("input[name='radio-mini-rsslang']").bind( "change", function(event, ui) {
            onRssLangChagned();        
        });

1.5 change label text:

$("label[for='rsscat_type_my'] span.ui-btn-text").text("My");

1.6 change radio checked value:

$("input[name='rsscat_type'][value='System']").prop("checked",true);

in jquery mobile:

$("input[name='rsscat_type'][value='System']").next().click();

2.jquery mobile inline button group

2.1 create:

<div data-role="controlgroup" data-mini="true" data-inline="true" data-type="horizontal" style="display:inline-block;">
                    <a href="#lanauagePage" data-role="button" data-icon="grid" class="pkAutoTranslactor">Setting</a>
                    <a href="#musicPage" data-role="button" class="pkAutoTranslactor">Music</a>
                    <a href="/p/m/auth/login/?redirect=/p/m/" data-role="button" rel="external" data-ajax="false" class="pkAutoTranslactor ui-disabled" disabled="">Login</a>
                    <a href="/p/m/oper/addcat/" data-role="button" data-icon="plus" rel="external" data-ajax="false" class="pkAutoTranslactor ui-disabled">Add</a>
                </div>

3.jquery mobile switch slider control

 

3.1 create:

<select name="speakInItemsSelect" id="speakInItemsSelect" data-role="slider" data-mini="true">
                            <option value="on"><?php  echo $this->translate("speak"); ?></option>
                            <option value="off"><?php  echo $this->translate("stop"); ?></option>
                        </select>

3.2 change value by code:

var speakInItemsSelect = $('#speakInItemsSelect');
        if(speakInItemsSelect[0].selectedIndex != 0){
            speakInItemsSelect[0].selectedIndex = 0;
            speakInItemsSelect.slider('refresh');
        }

3.3 change event hander:

$('#speakInItemsSelect').change(function(event) {
        event.stopPropagation();
        var myswitch = $(this);
        var show     = myswitch[0].selectedIndex == 1 ? true:false;
     
        if(show) {    
            pkrssspeak.speakItems();
        } else {         
            pkrssspeak.stop();           
        }
        });

4. hide and show

1.hide in htm source:

class="ui-btn-hidden"

2.hide in code:

$('#submit_btn').closest('.ui-btn').hide();

or try:

$("#<button-id>").parent().hide();

$('#submit_btn').hide();

your can change hide method to show.