Sunday, January 13, 2013

jquery develop sample and source

1.jquery mobile inline radio box

1.1 create horizontal style:

image

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


image

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


image

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


image

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

No comments: