TextResizer を SELECT で使うコード
jQuery Text Resizer Plugin ≪ Mario J Vargas – Angstrey.com
テキストをクリックして、文字サイズを変更するのがなんかいやだったので、
SELECT仕様にしてみることに･ω･
| <body id="bod"> <div id="textsizer"> 文字サイズ: <a href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a> <SELECT OnChange="chgsize('#textsizer a:eq('+this.selectedIndex+')');"> <OPTION VALUE="XS">XS</OPTION> <OPTION VALUE="S">S</OPTION> <OPTION VALUE="M">M</OPTION> <OPTION VALUE="L">L</OPTION> <OPTION VALUE="XL">XL</OPTION> </SELECT> </div> |
リンクは見えないので OnChange でクリックさせることにした
| function chgsize(vv){ $(vv).click(); } jQuery(document).ready( function() { jQuery("#textsizer a").textresizer({ target: "#bod", // 対象要素 type: "fontSize", // サイズ指定方法 sizes: [ "9px", "12px", "15px", "18px", "30px"],// フォントサイズ selectedIndex: 1 // 初期表示 }); }); |
おまけ
でも、JQuery Mobile 使ってると、意味がないのでこうしてる
| //Specify affected tags. Add or remove from list: var tgs = new Array( 'div','td','tr','label','button','input','span'); var tgs2 = new Array( 'SIZE1','SIZE2'); //Specify spectrum of different font sizes: function ts( trgt,sz) { cEl.style.fontSize = szs[ sz ]+'px'; for ( i = 0 ; i < tgs.length ; i++ ) { |
| <div data-role="fieldcontain" align="right"> <SELECT data-inline="true" name="select-choice-1" id="select-choice-1" OnChange="ts('body',this.selectedIndex-1);this.options[0].disabled= 'disabled';"><OPTION VALUE="" selected="selected">文字サイズ</OPTION> <OPTION VALUE="XS">XS</OPTION> <OPTION VALUE="S">S</OPTION> <OPTION VALUE="M">M</OPTION> <OPTION VALUE="L">L</OPTION> <OPTION VALUE="XL">XL</OPTION> </SELECT> </div> |
Dynamic Drive DHTML Scripts- Document Text Sizer
Translate
Comments