1
Tarik
Bootstrap and forms
  • 2013/1/11 15:09

  • Tarik

  • Not too shy to talk

  • Posts: 170

  • Since: 2010/2/3 1


Hello, i'm at the moment messing with the 2.6 version of xoops and wanted to try Bootstrap potential in Modules which was amazing but still i didnt know how to use a portion of it, you can see it here http://jasny.github.com/bootstrap/javascript.html#buttons must i code the form with javascript.
mainly toggleable buttons and how to include them in forms, can someone informed give some guidance.
Some people like what you do,
-- some people hate what you do,
---- but most people simply don’t give a damn.

2
trabis
Re: Bootstrap and forms
  • 2013/1/11 18:50

  • trabis

  • Core Developer

  • Posts: 2269

  • Since: 2006/9/1 1


Quote:
Tarik wrote: Hello, i'm at the moment messing with the 2.6 version of xoops and wanted to try Bootstrap potential in Modules which was amazing but still i didnt know how to use a portion of it, you can see it here http://jasny.github.com/bootstrap/javascript.html#buttons must i code the form with javascript. mainly toggleable buttons and how to include them in forms, can someone informed give some guidance.
You can install the codex module and see the example on form.php If you need to insert javascript in one form element you can use the setExtra() Example of usage in publisher module:
$butt_cancel = new XoopsFormButton(''''_CO_PUBLISHER_CANCEL'button');
$butt_cancel->setExtra('onclick="history.go(-1)"');
$form->addElement($butt_cancel);
If you need to insert a inline script you can use XoopsFormlabel or XoopsFormRaw. Example from publisher
$js_data = new XoopsFormLabel('''
<script type= "text/javascript">/*<![CDATA[*/
$(document).ready(function(){
    var button = $("#publisher_upload_button"), interval;
    new AjaxUpload(button,{
        action: "' 
PUBLISHER_URL '/include/ajax_upload.php", // I disabled uploads in this example for security reasons
        responseType: "text/html",
        name: "publisher_upload_file",
        onSubmit : function(file, ext){
            // change button text, when user selects file
            $("#publisher_upload_message").html(" ");
            button.html("<img src='' . PUBLISHER_URL . '
/images/loadingbar.gif'/>"); this.setData({
                "image_nicename": $("#image_nicename").val(),
                "imgcat_id" : $("#imgcat_id").val()
            });
            // If you want to allow uploading only 1 file at time,
            // you can disable upload button
            this.disable();
            interval = window.setInterval(function(){
            }, 200);
        },
        onComplete: function(file, response){
            button.text("' 
_CO_PUBLISHER_IMAGE_UPLOAD_NEW '");
            window.clearInterval(interval);
            // enable upload button
            this.enable();
            // add file to the list
            var result = eval(response);
            if (result[0] == "success") {
                 $("#image_item").append("<option value='" + result[1] + "' selected='
selected'>" + result[2] + "</option>");
                 publisher_updateSelectOption('
image_item', 'image_featured');
                 showImgSelected('
image_display', 'image_item', 'uploads/images/', '', '' . XOOPS_URL . '')
            } else {
                 $("#publisher_upload_message").html("<div class='
errorMsg'>" + result[1] + "</div>");
            }
        }
    });
});
/*]]>*/</script>
'
);
$form->addElement($js_data);
Btw, when you look into the form example, you will see that the form is padded to the right. Can you find a way to fix it, I've tried for hours with no success :(

Login

Who's Online

70 user(s) are online (35 user(s) are browsing Support Forums)


Members: 0


Guests: 70


more...

Donat-O-Meter

Stats
Goal: $100.00
Due Date: Jul 31
Gross Amount: $0.00
Net Balance: $0.00
Left to go: $100.00
Make donations with PayPal!

Latest GitHub Commits