代码之家 › 专栏 › 技术社区 › Dorad

具有依赖值的rtl选择器

html-framework-7 picker right-to-left

Dorad · 技术社区 · 7 年前

要求是制作一个具有多个级别的rtl选择器。

我从 documentation 进入一个页面,该页面为rtl用户配备了官方框架的css。

我还修改了每一列的“textalign”属性。不知什么原因,拾荒者没有按预期行事。 以全页模式打开代码段 .

var app = new Framework7({
  root: '#app',
  rtl: true,
  theme: 'md'
});
app.views.create('#mainView', {
});

var carVendors = {
  Japanese: ['Honda', 'Lexus', 'Mazda', 'Nissan', 'Toyota'],
  German: ['Audi', 'BMW', 'Mercedes', 'Volkswagen', 'Volvo'],
  American: ['Cadillac', 'Chrysler', 'Dodge', 'Ford']
};
var pickerDependent = app.picker.create({
  inputEl: '#demo-picker-dependent',
  rotateEffect: true,
  formatValue: function(values) {
    return values[1];
  },
  cols: [{
      textAlign: 'right',
      values: ['Japanese', 'German', 'American'],
      onChange: function(picker, country) {
        if (picker.cols[1].replaceValues) {
          picker.cols[1].replaceValues(carVendors[country]);
        }
      }
    },
    {
      textAlign: 'right',
      values: carVendors.Japanese,
      width: 160,
    },
  ],
  routableModals:false
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/framework7/2.3.0/css/framework7.rtl.md.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/framework7/2.3.0/js/framework7.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block-title">
  Dependent values</div>
<div id="app">
  <div id="mainView">
    <div class="list no-hairlines-md">
      <ul>
        <li>
          <div class="item-content item-input">
            <div class="item-inner">
              <div class="item-input-wrap">
                <input type="text" placeholder="Your car" readonly="readonly" id="demo-picker-dependent" />
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

1 回复 | 直到 7 年前

Dorad 7 年前

这似乎是框架7中的一个错误。第一个和最后一个的css“right”和“left”属性。选取器列不适合rtl布局(翻转)。附带的修理解决了这个问题。

var app = new Framework7({
  root: '#app',
  rtl: true,
  theme: 'md'
});
app.views.create('#mainView', {
});

var carVendors = {
  Japanese: ['Honda', 'Lexus', 'Mazda', 'Nissan', 'Toyota'],
  German: ['Audi', 'BMW', 'Mercedes', 'Volkswagen', 'Volvo'],
  American: ['Cadillac', 'Chrysler', 'Dodge', 'Ford']
};
var pickerDependent = app.picker.create({
  inputEl: '#demo-picker-dependent',
  rotateEffect: true,
  formatValue: function(values) {
    return values[1];
  },
  cols: [{
      textAlign: 'right',
      values: ['Japanese', 'German', 'American'],
      onChange: function(picker, country) {
        if (picker.cols[1].replaceValues) {
          picker.cols[1].replaceValues(carVendors[country]);
        }
      }
    },
    {
      textAlign: 'right',
      values: carVendors.Japanese,
      width: 160,
    },
  ],
  routableModals:false
});

.picker-column.picker-column-first:after{
  left:100% !important;
  right:0 !important;
}
.picker-column.picker-column-last:after{
  left:0 !important;
  right:100% !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/framework7/2.3.0/css/framework7.rtl.md.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/framework7/2.3.0/js/framework7.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block-title">
  Dependent values</div>
<div id="app">
  <div id="mainView">
    <div class="list no-hairlines-md">
      <ul>
        <li>
          <div class="item-content item-input">
            <div class="item-inner">
              <div class="item-input-wrap">
                <input type="text" placeholder="Your car" readonly="readonly" id="demo-picker-dependent" />
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

编辑: github issue