0

テキストを表示する div がたくさんあります。

私はこれらを選択可能にしました。理想的には、選択した div のテキストのフォント サイズを変更できるようにすることです。

選択リストにフォントサイズを含む基本的なフォームを持つダイアログがありますが、ダイアログ内から選択可能なものを実際にターゲットにする方法を見つけるのに苦労しています。

$(function(){
    $('#template_inner').selectable({
           selected: function(event, ui){
            console.log(ui);
            // displays the HTML in the console

        }
    })


$( "#font-size-form" ).dialog({
    autoOpen: false,
    height: 200,
    width: 270,
    modal: true,
    position: ['top', 200],
    buttons: {
        "Select": function() {
        },
        Cancel: function() {
            $( this ).dialog( "close" );
        }
    },
    close: function() {
    }
});

   $( ".font-size" )
       .button()
       .click(function() {
           $( "#font-size-form" ).dialog( "open" );
   });
});


<div id="font-size-form" title="Choose Font Size">
    <form action="" method="">
        <p>Please choose your font-size</p>
        <div class="">
            <select name="size">
                <option value="8">8</option>
                <option value="12">12</option>
                <option value="14">14</option>
                <option value="16">16</option>
                <option value="18">18</option>
                <option value="20">20</option>
                <option value="22">22</option>
                <option value="24">24</option>
                <option value="26">26</option>
                <option value="28">28</option>
                <option value="30">30</option>
                <option value="32">32</option>
            </select>
        </div>

    </form>
</div>

そのため、div をクリックしてから、クリックしてフォント サイズ ダイアログ ボックスを開き、フォント サイズを選択すると、div 内のテキストのフォント サイズを変更したいと思います。

これは可能ですか？

どうもありがとう

4

1 に答える 1

0

ページの期間だけ選択内容を記憶する必要がある場合は、フォント サイズをデータとして保存できます (ドキュメントを参照)。

//in your dialog
"Select": function() {
  $('#template_inner .ui-selected').css('font-size', $('select[name="size"]').val() + 'px');
  $('#template_inner').data('fontSize', $('select[name="size"]').val());
}

//on your selectable
$('#template_inner').selectable({
  selected: function(event, ui){
    var defaultSize = 22;
    // Get the saved value or default on new selects.
    var size = $('#template_inner').data('fontSize') || defaultSize;
    $(ui.selected).css('font-size', size + 'px');
  }
})
于 2012-11-22T11:27:54.683 に答える