makin unorderedlist与我的样式复选框的方法 [英] makin unorderedlist with my method for styling checkboxes
问题描述
现在我把它放在一个字段集中
我的复选框列表是一行
i需要3行或4行而不是1行所以它看起来更整洁
我正在为餐馆制作在线订购网站。例如，如何在网上或地铁上订购多米诺骨牌披萨。
我正在与一家餐馆合作制作它，这样你就可以在网上订购食物。
我已经设置了所有东西现在工作得很好。
我想在无序列表中找到这些复选框的原因是我可以设置它的样式。
我的复选框目前显示在一个长列表中
我希望每排3或4个行。
我的代码（此方法）从集合中抓取数据并将其显示为页面上某个部分的复选框。
这只是我这个网站的一种方法。
我一直在尝试许多不同的订单和不同的东西试图获得这个工作但我还没有。
这是我最新的样本
如果你知道一个更好的解决方案然后是一个无序列表样式我的复选框我很感激听到它。
http://s13.postimg.org/8b6gg8byf/Untitled.png [ ^ ]
<！ - 选择填充物 - - >
< div id = selectFillings>
< div id = fillingValid class = 验证警报> < / div >
< fieldset id = fillings>
< legend>< h4> 4）。最多选择两个填充物（额外+ $ 1。 20 ）< / h4 > < / 图例 >
< table id = fillingsTable> < / table >
< / fieldset >
< / div >
function initializeCheckBox（elementName，dataService，render，name）{
if （render === null ）render = function （item）{ return （item.text）; };
var $ element = $（elementName）;
$ .when（dataService（））。then（ function （data）{
var $ unorderedList = $（' ul class =stylebox'）;
$ element.append（$ unorderedList）;
console .log（$ unorderedList） ;
for （ var itemIndex in data）{
var $ input = $（' < input type =checkboxname =' + name + ' < span class =code-string>value =' + data [itemIndex] .value + ' >' + render（data [itemIndex]）+ ' & LT; /输入>'）;
var $ row = $（' <李>'）;
$ input.data（data [itemIndex]）;
$ input.appendTo（$ element）;
}
}）;
}
function initializeRadioBtn（elementName，dataService）{
var $ element = $（elementName）;
$ .when（dataService（））。then（ function （data）{
for （ var itemIndex in data）{
var $ input = $（' < ; input type =radioname =Sidevalue =' + data [itemIndex] .value + ' >' + data [itemIndex] .text + ' < / input>' ）;
$ input.data（data [itemIndex]）;
$ input.appendTo（$ element）;
}
}）;
}
* /
function getFillings（）{
var deferred = new $ .Deferred（）;
deferred.resolve（[
{value：' 土耳其Breast'，text：' Turkey Breast'，price： 0 。 0 }，
{value：' Baked Ham'，text：' 烤火腿'，价格： 0 。 0 }，
{ value：' Salami'，text：' Salami'，价格： 0 。 0 }，
{值：' Cheddar Cheese'，text：< span class =code-string>' Cheddar Cheese'，价格： 0 。 0 }，
{值：' Swiss Cheese'，text：' Swiss Cheese'，价格： 0 。< span class =code-digit> 0 }，
{value：' Provologne Cheese'，文字：' Provologne Cheese'，价格： 0 。 0 }，
{value：' Veggie Mix'，text：' Veggie Mix'，价格： 0 。 0 }
]）;
return （延期）;
}
1. 20 ）< / h4 > < span class =code-keyword>< / 图例 >
< table id = fillingsTable> < / 表格 >
< span class =code-keyword>< / fieldset >
< / div >
function initializeCheckBox（elementName，dataService，render，name）{
if （render === null ）render = function （item）{ return （item.text）; };
var
element =
（elementName） ;
right now i have it in a fieldset
my list of checkboxes are in 1 row
i want 3 or 4 rows instead of 1 so it looks alot more neat
I am working on making a online ordering site for a restaurant. for example like how you can order dominoes pizza online or subway.
I am working with a restaurant on making it so you can order food online.
I have everything set up and working pretty good right now.
The reason i want these checkboxes in a unordered list is so i can style it.
my checkboxes currently are displayed in one long list
I would like to have them in rows of 3 or 4 boxes per row.
my code (this method) grabs data from a collection and displays it as checkboxes in its certain section on the page.
This is just one method of my many for this site.
I have been trying many different orders and differnt things to try to get this to work but i did not yet.
this is my most current sample
if you know a better solution then an unordered list to style my checkboxes i am grateful to hear it.
http://s13.postimg.org/8b6gg8byf/Untitled.png[^]
<!-- Select fillings -->
<div id="selectFillings">
<div id="fillingValid" class="validation alert"></div>
<fieldset id="fillings">
<legend><h4>4). Choose up to two fillings (Extra + $1.20)</h4></legend>
<table id="fillingsTable"></table>
</fieldset>
</div>
function initializeCheckBox(elementName, dataService, render, name) {
if (render === null) render = function(item) { return(item.text); };
var $element = $(elementName);
$.when(dataService()).then(function (data) {
var $unorderedList = $('ul class="stylebox"');
$element.append($unorderedList);
console.log($unorderedList);
for (var itemIndex in data) {
var $input = $('<input type="checkbox" name ="'+name+'" value="' + data[itemIndex].value + '">' + render(data[itemIndex]) + '</input>');
var $row = $('<li>');
$input.data(data[itemIndex]);
$input.appendTo($element);
}
});
}
function initializeRadioBtn(elementName, dataService) {
var $element = $(elementName);
$.when(dataService()).then(function (data) {
for (var itemIndex in data) {
var $input = $('<input type="radio" name ="Side" value="' + data[itemIndex].value + '">' + data[itemIndex].text + '</input>');
$input.data(data[itemIndex]);
$input.appendTo($element);
}
});
}
*/
function getFillings() {
var deferred = new $.Deferred();
deferred.resolve([
{ value: 'Turkey Breast', text: 'Turkey Breast', price: 0.0 },
{ value: 'Baked Ham', text: 'Baked Ham', price: 0.0 },
{ value: 'Salami', text: 'Salami', price: 0.0 },
{ value: 'Cheddar Cheese', text: 'Cheddar Cheese', price: 0.0 },
{ value: 'Swiss Cheese', text: 'Swiss Cheese', price: 0.0 },
{ value: 'Provologne Cheese', text: 'Provologne Cheese', price: 0.0 },
{ value: 'Veggie Mix', text: 'Veggie Mix', price: 0.0 }
]);
return (deferred);
}1.20)</h4></legend> <table id="fillingsTable"></table> </fieldset> </div> function initializeCheckBox(elementName, dataService, render, name) { if (render === null) render = function(item) { return(item.text); }; var
element =
(elementName);
这篇关于makin unorderedlist与我的样式复选框的方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
