漂亮的前端控件

一，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);
    }