Beautiful front-end controls

1. Status Bootstrap provides a more drop-down control, but it supports check .. The method is to hide the real checkbox and pass the operation value to the checkbox through Js.

<Button class = "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> // because the hidden form submission method is get, we can get the operation value.
<? 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 (); // click the checkbox in the hidden form
Jquery ("# views-exposed-form-messages-page"). Submit (); // JS call to submit an event
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 ();
});

2. Date Selector

<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 form-submit" style = "float: Left; width: 40px; margin-left: 5px;"> </button>

JS ....................................... ........................................ ........................................ .....

$ (". Date_submit"). Click (function (){

// Obtain the time value in the selector
VaR start_date = jquery ("# start_filter_date"). Find ('input'). Val ();

// Assign a time value to a hidden form item
Jquery ("# start_date"). ATTR ("value", start_date );


VaR end_date = jquery ("# end_filter_date"). Find ('input'). Val ();
Jquery ("# end_date"). ATTR ("value", end_date );

// Click the submit button.
Jquery ("# edit-submit"). Click ();
});

// Time selector related JS Functions

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

3. Automatic completion box

<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 form-submit" style = "float: Left; width: 40px; margin-Right: 0px"> </button>
</Div>

// The data-source value is retrieved from the database.

JS ....................................... ........................................ ...................

$ (". Keyworld_submit"). Click (function (){
Var key = jquery ("# keyworld"). Val ();
Jquery ("# edit-title -- 2"). ATTR ("value", key );
Jquery ("# edit-submit"). Click ();
});

// If data-source is assigned a value using JS, it should be called immediately after the entire DOM is loaded (no trigger event is required)

VaR source = jquery ("# edit-title -- 2"). ATTR ("data-source ");
$ ("# Keyworld"). ATTR ("data-source", source );

// This Is How Drupal obtains data-source.

$ Form ['title'] = array (
'# Type' => 'textfield ',
'# Title' => '',
'# Attributes' => array (
'Placeholder' => T ('search by campaign name '),
'Data-provide' => T ('typehead '),
'Data-source' => json_encode ($ arrmsg), // convert the array to JSON format
'Autocomplete' => T ('off ')
),
'# Prefix' =>' <Div class = "span4 pull-left spacer10"> ',
);

// $ Arrmsg must be a normal Array

$ Results = db_query ($ querystring)-> fetchall ();
$ Arrmsg = array ();
Foreach ($ results as $ result ){
Array_push ($ arrmsg, $ result-> title );
}

Beautiful front-end controls