0

我动态创建了一个页面来显示内容。我想调整内容文本大小（增加，减少）。在动态页面中，我创建了一个按钮。当我们点击按钮“ Dialog”时，框就被打开了slider。当我们slider从左到右移动内容大小应该增加或从右到左大小应该减小。但它对大小没有任何影响。

var seq = $(this).data("sequence");
        if ($('[data-role=page]#' + seq).length === 0) {
            $($.mobile.pageContainer).append('<div data-role="page" id="' + seq + '" class="items"><div data-role="content" id="desc"></div><div data-role="footer" data-position="fixed" class="my-footer"><div data-role="popup" id="textMenu" style="margin-bottom:10px;"><ul data-role="listview" data-inset="true" data-theme="a"><li data-icon="false"><a href="dialog.html" id="textSize" data-rel="dialog" data-transition="pop">Text size</a></li></ul></div><div class="ui-block-a ui-bar-a" data-theme="a"><div align="left" style="padding-left:5px;padding-top:3px;height:33px;height:40px;"><a href="#textMenu" class="ui-btn-left" data-icon="bars" data-role="button" data-iconpos="notext" data-rel="popup" data-transition="pop" style="margin-top:5px;"></a></div></div><a href="" data-role="button" class="addToFavoritesDiv" style="margin-top:5px;">Bookmark</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div class="ui-block-c ui-bar-a"><div align="right" style="padding-top:3px;height:33px;height:40px;"><a href="#" class="ui-btn-right" data-role="button" data-icon="back" data-rel="back" data-iconpos="notext" style="margin-top:5px;"></a></div></div></div></div>');    
            $('[data-role=page]#' + seq + ' [data-role=content]').load(file);
        }

var images = $('.items');
    var CELL_WIDTH = 5;
    var ASPECT = 1.5;

    $( "#slider" ).slider({
        step: 5,
        min: 70,
        max: 200,
        value: 100,
        slide: function(event, ui) {
            var size = (CELL_WIDTH * ui.value / 100) + "em";
            images.stop(true).animate({width: size * ASPECT, height: size}, 250);
        }
    });

Dialog.html 文件：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>XML File</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- <link href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" rel="stylesheet"/> -->
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
     <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
    <style type="text/css">
        .ui-dialog-contain
        {
            opacity: 1 !important;
            background: #FFFFFF !important;
        }
        .ui-dialog .ui-header .ui-btn-icon-notext
        {
            display: none !important;
        }
        .ui-dialog-background
        {
            opacity: 0.5;
            display: block !important;
            -webkit-transition: opacity 0.5s ease-in;
        }

        .ui-dialog-background.pop.in
        {
            opacity: 1;
            -webkit-transition: opacity 0.5s ease-in;
        }

        .ui-dialog
        {
            min-height: 100% !important;
            background: transparent !important;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            $('div[data-role="dialog"]').live('pagebeforeshow', function (e, ui) {
                // make parent page transparent
                ui.prevPage.addClass("ui-dialog-background");
            });

            $('div[data-role="dialog"]').live('pagehide', function (e, ui) {
                $(".ui-dialog-background").removeClass("ui-dialog-background");
            });
        });
</script>
</head>
<body>
    <div data-role="dialog">
        <div data-role="header">
            <h1>Dialog</h1>
        </div>
        <div data-role="content" id="slider">
           <label for="slider-mini">Text Size:</label>
<input type="range" name="slider-mini" id="slider-mini" min="0" max="100" data-highlight="true" data-mini="true" />
        </div>
    </div>
</body>
</html>

提前致谢。

4

0 回答 0