一，status bootstrap提更的一个下拉控件，但是它支持复选。。实现的方式是通过隐藏真实的checkbox,通过js将操作值传递给checkbox
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
Status
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" style="width: 153px">
<li role="presentation">
<a class="aaa" role="menuitem" tabindex="-1" href="#" id="drafted" style="color:#CC9900">
<?php if($_GET[‘draft‘]):?>Drafted <span style=‘position: relative;right:-70px;‘>√</span>
//因为隐藏表单的提交方式是通过get所以我们可以获取到操作值。
<?php else: ?>
Drafted
<?php endif; ?>
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#" id="scheduled" style="color:green">
<?php if($_GET[‘scheduled‘]):?>Scheduled <span style=‘position: relative;right:-50px;‘>√</span>
<?php else: ?>
Scheduled
<?php endif; ?>
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#" id="published" style="color:blue">
<?php if($_GET[‘published‘]):?>Published <span s style=‘position: relative;right:-55px;‘>√</span>
<?php else: ?>
Published
<?php endif; ?>
</a>
</li>
</ul>
js........................................................................
$("#drafted").click(function(){
//jQuery("#edit-draft").attr("checked", "checked");
jQuery("#edit-draft").click(); //点击隐藏表单的那个checkbox
jQuery("#views-exposed-form-messages-page").submit(); //js 调用提交事件
jQuery("#edit-submit").click();
});
$("#scheduled").click(function(){
jQuery("#edit-scheduled").click();
jQuery("#views-exposed-form-messages-page").submit();
jQuery("#edit-submit").click();
});
$("#published").click(function(){
jQuery("#edit-published").click();
jQuery("#views-exposed-form-messages-page").submit();
jQuery("#edit-submit").click();
});
二，日期选择器
<div style="float: left;width: 40px;margin-right: 10px;margin-top: 5px;margin-left: 20px"><b>From:</b></div>
<div id="start_filter_date" class="input-append date" style="float:left">
<input size="16" type="text" class="input-small" readonly style="cursor: pointer" /><span class="add-on"><i class="icon-calendar"></i></span>
</div>
<div id="end_filter_date" class="input-append date" style="float:left;margin-left: 5px;">
- <input size="16" type="text" class="input-small" readonly style="cursor: pointer" /><span class="add-on"><i class="icon-calendar"></i></span>
</div>
<button class="date_submit icon-search btn btn form-submit" style="float:left;width:40px;margin-left: 5px;"></button>
js............................................................................................................................
$(".date_submit").click(function(){
//获取选择器中时间值
var start_date = jQuery("#start_filter_date").find(‘input‘).val();
//将时间赋值给隐藏的表单项
jQuery("#start_date").attr("value",start_date);
var end_date = jQuery("#end_filter_date").find(‘input‘).val();
jQuery("#end_date").attr("value",end_date);
//然后出发提交按钮
jQuery("#edit-submit").click();
});
//时间选择器的相关js函数
var current_date = new Date();
//current_date.setDate(current_date.getDate()-30);
current_date.setDate(current_date.getDate());
jQuery("#start_filter_date").datetimepicker({
format: ‘M dd, yyyy‘,
autoclose: true,
startView: 2,
minView: 2,
maxView: 2,
startDate: 0,
endDate:current_date
});
jQuery("#end_filter_date").datetimepicker({
format: ‘M dd, yyyy‘,
autoclose: true,
startView: 2,
minView: 2,
maxView: 2,
startDate: 0
//endDate: current_date
});
三，自动完成框
<div style="float: right">
<div style="float: left;width: 40px;margin-right: 31px;margin-top: 5px;"><b>Keyword：</b></div>
<input class="span2" data-provide="typeahead" data-source=‘‘ autocomplete="off" id="keyworld" type="text" placeholder="Enter keyword" style="float: left">
<button class="keyworld_submit icon-search btn btn form-submit" style="float:left;width:40px;margin-right: 0px"></button>
</div>
//其中data-source 的值是从数据库调取出来的
js..................................................................................................
$(".keyworld_submit").click(function(){
var key = jQuery("#keyworld").val();
jQuery("#edit-title--2").attr("value",key);
jQuery("#edit-submit").click();
});
//如果data-source如果用js 赋值的话那么，应该在整个dom 加载完成后就马上被调用（不用什么触发事件才调用）
var source = jQuery("#edit-title--2").attr("data-source");
$("#keyworld").attr("data-source",source);
// 这是drupal获取data-source 的方式
$form[‘title‘] = array(
‘#type‘ => ‘textfield‘,
‘#title‘=> ‘‘,
‘#attributes‘ => array(
‘placeholder‘ => t(‘Search by campaign name‘),
‘data-provide‘ => t(‘typeahead‘),
‘data-source‘ => json_encode($arrMsg), //将数组转化为json格式的
‘autocomplete‘ => t(‘off‘)
),
‘#prefix‘ => ‘<div class="span4 pull-left spacer10">‘,
);
//$arrMsg要求是普通数组
$results = db_query($queryString)->fetchAll();
$arrMsg = array();
foreach($results as $result){
array_push($arrMsg, $result->title);
}